← ClaudeAtlas

text-to-lottielisted

Author a Lottie (Bodymovin) JSON animation that renders in a local skia player. Use whenever the user asks to create, generate, edit, or fix a Lottie animation, or asks for "an animation" to load.
dong-park/pharos · ★ 0 · AI & Automation · score 58
Install: claude install-skill dong-park/pharos
# Authoring Renderable Lottie Files This app renders Lottie with **Skia's Skottie** module (via `canvaskit-wasm`), not the JS `lottie-web` runtime. Follow the rules below and verify the result. > This skill covers the *mechanics* — the JSON shape Skottie needs. For the > *craft* (timing, easing, choreography, Disney animation principles), see > LottieFiles' [motion-design skill](https://github.com/lottiefiles/motion-design-skill). > Its guidance is in milliseconds; convert to frames with `frames = ms / 1000 * fr`. ## Setting up the project The deliverable is not just `public/lottie.json`: the viewer should be set up and the animation should be previewable in the browser. If the player project is missing, create it; if it exists, install/update dependencies as needed, start the dev server, and open the local preview URL for verification. **Always use the official GitHub player project — never hand-roll a custom viewer.** This skill's JSON rules (slots, the properties panel, the `?frame=` URL controls, the Skottie wasm wiring) only hold inside that exact project. Do **not** build your own HTML page, swap in `lottie-web`, or scaffold a bespoke canvas setup — any of those will silently diverge from how this player renders and the verification steps below won't apply. If the player project isn't already on this machine, scaffold a fresh copy of the repo with **degit**: ```bash npx degit diffusionstudio/lottie my-animation cd my-animation npm install # postinstall copies th