Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

lottie-bodymovin — Claude Code skill: what it does, how to install

Applies Disney's 12 animation principles to Lottie vector animations. Bridges After Effects setup with runtime JavaScript controls.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add calesthio/OpenMontage --skill lottie-bodymovin -a claude-code
Open on GitHub

What lottie-bodymovin does

This skill guides you through applying Disney's 12 animation principles to web vector graphics. It links preparation steps in After Effects with runtime controls in JavaScript.

Each principle comes with After Effects expressions or runtime snippets. You get code for spring overshoot decay and inverse scale ratios for squash effects. In web applications, playback responds to methods like setSpeed, goToAndStop, or segment ranges via playSegments.

Runtime code cannot rescue a poorly constructed composition. You still need to build the Bezier motion paths and layer offsets in After Effects before exporting with Bodymovin.

What it helps with

  • link squash and stretch scale formulas between After Effects and runtime code
  • split playback into anticipation and primary action using playSegments
  • add overshoot decay calculations to rotation and position properties
  • trigger secondary animations on specific frame events in lottie-react

Example prompts for the agent

  • Show me the After Effects expression for overshoot decay in a Lottie animation
  • How do I play a secondary Lottie animation after the main one finishes in React?

How to install lottie-bodymovin

1Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill lottie-bodymovin -a claude-code

2Manually: put the files in place

~/.claude/skills/lottie-bodymovin/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/lottie-bodymovin/

From the same set28

The whole set →
video-understand calesthio This skill extracts video frames and transcribes audio locally with ffmpeg and Whisper. Use it to inspect video content without API keys. Claude Code CX Codex Cursor +1 1,300installs remotion calesthio Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules. Claude Code CX Codex Cursor +1 1,200installs video-download calesthio Uses yt-dlp to fetch video, audio, subtitles, or URL metadata. Use it when you need a local file, a selected resolution, or details without downloading media. Claude Code CX Codex Cursor +1 1,200installs create-video calesthio This skill turns a description into a finished video: write what you want to see, and HeyGen generates the script, picks an avatar, adds voiceover and editing. Good for quick demos, explainers and promos without tweaking every detail. Claude Code CX Codex Cursor +1 1,100installs video-toolkit calesthio Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. Requires Node.js, Python3, ffmpeg, and cloud GPU access (Modal or RunPod). Claude Code CX Codex Cursor +1 1,100installs text-to-speech calesthio Generates speech audio with HeyGen Starfish and lets you choose a voice, speed, and pitch. Useful for voiceovers, narration, and podcasts. Claude Code CX Codex Cursor +1 1,100installs bfl-api Black Forest Labs This skill helps connect BFL FLUX API for image generation and editing. It covers async requests, polling, rate limits, and webhooks. Claude Code CX Codex Cursor +1 1,000installs threejs-textures calesthio Skill for working with Three.js textures: image loading, UV coordinates, cubemaps, HDR environments and optimization. Use when building 3D scenes with materials, skyboxes and reflection maps. Claude Code CX Codex Cursor +1 1,000installs

Similar

design-guide paperclipai This skill defines Paperclip rules for UI components, tokens, typography, and status systems. Use it when building or changing frontend pages. Claude Code CX Codex Cursor +1 362installs hairline-create lucasmarkes Generates interactive isometric line figures using the Hairline engine and outputs them as self-contained HTML files. Claude Code CX Codex Cursor +1 5,000installs fullstack-dev MiniMax-AI Guides full-stack backend architecture and frontend integration. It enforces a structured checklist from requirement gathering to verification smoke tests. Claude Code CX Codex Cursor +1 3,400installs paseo-plugin getpaseo Builds and manages local Paseo plugins with UI panels, slash commands, lifecycle hooks, and daemon RPCs. Claude Code CX Codex Cursor +1 1,400installs gpui-kit longbridge This skill guides AI coding assistants in building Rust desktop apps with the gpui-kit crate. Use it to implement UI components, manage state, handle focus, and write tests. Claude Code CX Codex Cursor +1 1,000installs frontend-dev MiniMax-AI Orchestrates frontend development, motion design, AI-generated media, and conversion copy. Built for landing pages, marketing sites, and dashboards. Claude Code CX Codex Cursor +1 3,200installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about lottie-bodymovin

How to install lottie-bodymovin in Claude Code?

Run npx skills add calesthio/OpenMontage --skill lottie-bodymovin -a claude-code. You can also place the skill file directly into ~/.claude/skills/lottie-bodymovin/SKILL.md.

What does the lottie-bodymovin skill do?

It provides guidelines to implement Disney's 12 animation principles in Lottie vector files. The guide pairs After Effects expressions with runtime JavaScript methods.

Which library does it use for React rendering?

The examples rely on lottie-react for component rendering and mention lottie-interactivity for custom interactions.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor