dotLottie Web — guide skill for animation & motion graphics

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Ship Lottie animations on the web with dotLottie: package choice, workers, state machines, theming, slots.

• Type: Guide · Animation & motion graphics
• Slug: dotlottie-web
• Status: live
• Publisher: LottieFiles (vendor, verified)
• License: MIT
• Source: https://github.com/LottieFiles/dotlottie-web
• Works in: Claude Code, Codex, Cursor, Gemini CLI
• Requires: Node.js, @lottiefiles/dotlottie-web or @lottiefiles/dotlottie-react
• Cost: Free — open-source runtime (MIT)
• Adoption: 123 installs, 928 GitHub stars (skills.sh, 2026-10-26)

What it does

Implements Lottie and dotLottie animations with @lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react in vanilla JS, React and Next.js. It covers choosing a package, .lottie versus .json, Web Workers, state machines for interactivity, theming, dynamic slot overrides and performance practices.

Use when

• Playing Lottie or dotLottie files in a web app
• Interactive Lottie with state machines
• Theming or swapping content in an animation

Install

• Claude Code: npx skills add LottieFiles/dotlottie-web --skill dotlottie-web -a claude-code
• Codex: npx skills add LottieFiles/dotlottie-web --skill dotlottie-web -a codex
• Cursor: npx skills add LottieFiles/dotlottie-web --skill dotlottie-web -a cursor
• Gemini CLI: npx skills add LottieFiles/dotlottie-web --skill dotlottie-web -a gemini-cli

Example output

https://skills.varg.ai/previews/dotlottie-web.mp4 — Output of the repo's web-node example: a Lottie animation (flame to heart to splat) rendered frame by frame with dotLottie Web and saved as a GIF (credit: LottieFiles, https://github.com/LottieFiles/dotlottie-web/tree/main/examples/web-node)

More animation & motion graphics skills

• Day in My Life: A 60–75 s hand-drawn ink film of your agent's day with you, built from local Claude Code history, scored for strings.
• p5 Paint Animation: Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
• Session Story: A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
• Remotion Markup: Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
• Motion AI Kit: Write production-grade UI animation with Motion or CSS: best practices, docs search, springs, perf audits.
• Motion Design: Animate with intent: timing, easing, choreography and Disney principles for UI and motion graphics.