remotion-animation — Claude Code skill: what it does, how to install
Builds timing constants, spring physics, and interpolation ranges for Remotion without creating UI components.
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a claude-codeWhat remotion-animation does
This skill converts plain text instructions or motion briefs into an ANIMATION_CONFIG.md file. It outputs typed TypeScript blocks covering spring physics parameters and interpolation boundaries.
It exclusively handles motion mathematics and frame progress formulas. The skill deliberately avoids generating JSX or scene layouts, so you apply these exported constants inside components separately.
What it helps with
- define spring damping and stiffness values for video elements
- build input and output interpolation boundaries for transforms
- calculate frame stagger intervals across sequential items
- generate reusable easing curves and frame progress formulas
Example prompts for the agent
- Define a smooth spring entrance for a logo scaling from 0.8 to 1.0 over 30 frames.
- Set up staggered word animations with a 5 frame delay between each item.
How to install remotion-animation
1Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a claude-code2Manually: put the files in place
~/.claude/skills/remotion-animation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/remotion-animation/
1Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a codex2Manually: put the files in place
.agents/skills/remotion-animation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a cursor2Manually: put the files in place
.cursor/skills/remotion-animation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ncklrs/startup-os-skills remotion-animation2Manually: put the files in place
.github/skills/remotion-animation/SKILL.md1Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a gemini-cli2Platform CLI
gemini skills install https://github.com/ncklrs/startup-os-skills --path skills/remotion-animationManually: put the files in place
.devin/skills/remotion-animation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill remotion-animation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about remotion-animation
How to install remotion-animation in Claude Code?
Run npx skills add ncklrs/startup-os-skills --skill remotion-animation -a claude-code in your terminal. You can also place the file directly at ~/.claude/skills/remotion-animation/SKILL.md.
What does remotion-animation do?
It outputs an ANIMATION_CONFIG.md file containing TypeScript constants for Remotion spring mechanics, interpolation ranges, and scene frame timing.
Does remotion-animation generate React components?
No, it strictly defines animation parameters and timing calculations. Component JSX and CSS styles remain outside its scope.
