Remotion Markup — 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.mdto its path. Before generating anything, show the person the options on the use-case page.
Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
- Type: Guide · Animation & motion graphics
- Slug:
remotion-markup - Status: live
- Publisher: Remotion (vendor, verified)
- License: MIT
- Source: https://github.com/remotion-dev/skills/tree/main/skills/remotion-markup
- Works in: Claude Code, Codex, Cursor, Gemini CLI
- Requires: Node.js, Remotion 4
- Cost: Free — local render (Remotion company license for larger for-profit teams)
- Adoption: 212,200 installs, 5,750 GitHub stars (skills.sh, 2026-10-26)
What it does
The deep reference for writing Remotion compositions: assets and media components, trimming and delays, multi-scene and connected compositions, voiceover, embedded video and audio, transitions, motion blur, light leaks and pixel effects, color correction, 3D, sound effects, audio visualization, fonts, Lottie and GIFs. Each topic is its own reference file that the agent loads on demand.
Use when
- Writing or animating Remotion components
- Adding transitions, effects or motion blur
- Voiceover, sound effects or audio-reactive visuals
Install
- Claude Code:
npx skills add remotion-dev/skills --skill remotion-markup -a claude-code - Codex:
npx skills add remotion-dev/skills --skill remotion-markup -a codex - Cursor:
npx skills add remotion-dev/skills --skill remotion-markup -a cursor - Gemini CLI:
npx skills add remotion-dev/skills --skill remotion-markup -a gemini-cli
Example output
https://skills.varg.ai/previews/remotion-markup.mp4 — HTML-in-canvas transitions written with the skills (zoomBlur, filmBurn, linearBlur, bookFlip, ripple, crosswarp...) playing between two shots (credit: Remotion (@Remotion), https://x.com/Remotion/status/2073079536414077277)
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.
- 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.
- dotLottie Web: Ship Lottie animations on the web with dotLottie: package choice, workers, state machines, theming, slots.