From animation-pro
This skill should be used when the user asks to "create a programmatic video", "build a video composition", "make an explainer animation", "compose a video with code", "render a video", "add audio sync", "build a motion graphics piece", "animate for video export", "create a Remotion composition", "build a Motion Canvas scene", or mentions Remotion, Motion Canvas, useCurrentFrame, interpolate, Sequence, Composition, programmatic video, video rendering, frame-based animation, Theatre.js for video, or export pipeline. Covers programmatic video composition, frame-based rendering, audio synchronization, and export pipelines.
How this skill is triggered — by the user, by Claude, or both
Slash command
/animation-pro:production-motionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Programmatic video composition using Remotion and Motion Canvas. This domain
Programmatic video composition using Remotion and Motion Canvas. This domain covers animation where the output is a rendered video file rather than a web interaction.
| Need | Tool | Why |
|---|---|---|
| React-based video with existing components | Remotion | Uses React component library directly |
| Math-heavy explainer animation | Motion Canvas | Generator-based timeline, built for technical content |
| Visual keyframe editing | Theatre.js + either | When a visual timeline editor is needed |
| Quick social media clip | Remotion | Faster setup, more templates available |
| Complex choreographed sequence | Motion Canvas | Precise timing control via generators |
Remotion treats video as a React application rendered frame-by-frame:
useCurrentFrame(): Returns the current frame number (0-indexed)interpolate(frame, inputRange, outputRange): Maps frame ranges to value rangesspring({ frame, fps, config }): Spring-physics interpolation per frame<Audio>: Audio component with startFrom and volume control# Verify Remotion API
grep -r "useCurrentFrame\|interpolate\|Sequence\|Composition" refs/remotion/packages/core/src/
See references/remotion-architecture.md for the full architecture guide.
Motion Canvas uses generator functions for precise timeline control:
yield animation stepscreateRef(): Reference to scene elements for animationall(): Run animations in parallelsequence(): Run animations in sequence with optional delaywaitFor(duration): Pause for duration# Verify Motion Canvas API
grep -r "makeScene\|createRef\|all\|sequence\|waitFor" refs/motion-canvas/packages/core/src/
See references/motion-canvas-generators.md for generator patterns.
Standard video composition setup:
| Parameter | Typical values | Notes |
|---|---|---|
| Width | 1920 (1080p), 3840 (4K) | Match target platform |
| Height | 1080 (1080p), 2160 (4K) | 16:9 for YouTube, 9:16 for vertical |
| FPS | 30 (standard), 60 (smooth motion) | Higher = smoother but larger files |
| Duration | In frames: fps * seconds | 30 fps * 60 sec = 1800 frames |
For both tools, audio sync is frame-based:
frame = timestamp_seconds * fpsinterpolate (Remotion) or signal keyframes (Motion Canvas)
to align visual events to audio timestampsSee references/audio-sync.md for frame-accurate alignment patterns.
| Transition | Remotion approach | Motion Canvas approach |
|---|---|---|
| Cut | End one Sequence, start next | Yield next scene |
| Dissolve | Overlap Sequences with opacity interpolation | fadeTransition() |
| Spring | spring() on enter/exit properties | Custom spring signal |
| Slide | interpolate on translateX | slideTransition() |
| Custom | Any React animation on frame range | Generator-based custom |
Remotion rendering:
npx remotion render src/index.tsx CompositionId output.mp4
Motion Canvas rendering: Built-in editor exports, or programmatic render API.
Rendering options:
See references/export-pipeline.md for render configuration and optimization.
references/remotion-architecture.md: Compositions, Sequences, useCurrentFrame, rendering pipelinereferences/motion-canvas-generators.md: Generator-based timeline, scenes, signalsreferences/audio-sync.md: Frame-accurate audio alignment, waveform visualizationreferences/programmatic-editing.md: Cuts, transitions, overlays, text animation in videoreferences/theatre-for-video.md: Using Theatre.js studio for video timeline editingreferences/export-pipeline.md: Rendering to MP4/WebM, cloud rendering, batch processingProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
npx claudepluginhub travis-gilbert/claude-marketplace --plugin animation-pro