text-to-lottie는 diffusionstudio에서 개발한 오픈 소스 harness로, Claude code/Codex 또는 기타 skills를 지원하는 모든 coding agent를 사용하여 production ready Lottie 애니메이션을 생성하는 데 사용됩니다. 이 시스템의 핵심 방법론은 npx skills add diffusionstudio/lottie 명령을 통해 text-to-lottie skill을 설치한 후, 사용자가 자연어 프롬프트를 통해 coding agent에게 애니메이션 생성을 요청하는 방식입니다.

coding agent는 제공된 프롬프트를 해석하여 Lottie JSON 데이터를 생성하며, 이 과정에서 text-to-lottie harness는 생성된 애니메이션을 검사하고 편집할 수 있는 player를 제공하여 개발 워크플로우를 용이하게 합니다.

성공적인 Lottie 애니메이션 생성을 위한 프롬프트 작성 가이드는 다음과 같은 세부적인 방법론을 제시합니다.

1. 모델 grounding: SVG 경로, 실제 데이터 또는 스크린샷과 같은 구체적인 asset을 제공하여 agent가 애니메이션의 기반을 명확히 이해하도록 돕습니다. 이는 결과물의 품질을 크게 향상시킵니다.
2. 모션 디자인 용어 사용: ease-in, ease-out, ease-in-out과 같은 모션 디자인 용어를 사용하여 타이밍과 움직임을 정확하게 설명합니다. 이를 통해 agent가 원하는 애니메이션 곡선을 더 잘 파악할 수 있습니다.
3. 카메라 작동 방식(camera operator) 사고: camera pushes, pans, zooms 또는 rig-like motion과 같은 카메라 움직임을 요청하여 동적인 효과를 추가합니다. agent는 이를 group transforms를 통해 시뮬레이션할 수 있습니다.
4. 필요한 controls 요청: 기본적으로 background color control만 노출되는 경우가 많으므로, 애니메이션 속성(properties)에 대한 추가적인 customizability를 원한다면 agent에게 명시적으로 해당 controls를 생성하도록 요청해야 합니다.
5. FPS 및 duration 지정: 특정 프레임 속도(frame rate) 또는 총 프레임 수(frame count)가 필요한 경우, 프롬프트에 이를 명시하여 원하는 시간적 제약을 부여할 수 있습니다.

생성된 Lottie 애니메이션은 Lottie JSON file로 직접 사용하거나 After Effects로 가져와 추가적으로 수정할 수 있습니다. 웹 (vanilla HTML), React Native, React Native Skia (Skottie 모듈을 통해 Lottie 애니메이션을 렌더링하며 animation properties, assets, typographies를 런타임에 customize 가능), iOS Swift, Android Kotlin, Flutter 등 다양한 플랫폼에서 활용 가능한 사용 예시 코드를 제공하여 Lottie JSON 데이터를 각 환경에 맞게 load, play, loop할 수 있도록 지원합니다.