remotion-animation

Remotion Animation

Generates animation configuration documents that define spring behaviors, interpolation mappings, easing curves, and timing constants for Remotion videos. This skill focuses exclusively on animation parameters and does NOT generate component code.

What This Skill Does

Generates animation configurations for:

1. Spring configs - Damping, stiffness, mass parameters for spring animations
2. Interpolation mappings - Input/output ranges for value transformations
3. Easing functions - Timing function configurations
4. Animation timing - Stagger delays, durations, transition points
5. Progress calculations - Frame-based animation progress logic

Scope Boundaries

IN SCOPE:

• Spring configuration parameters
• Interpolation input/output ranges
• Easing curve definitions
• Animation timing constants
• Progress calculation patterns

OUT OF SCOPE:

• Component implementation (use /remotion-component-gen)
• Scene layout (use /remotion-composition)
• Visual styling (colors, fonts, layout)
• Asset management (use /remotion-asset-coordinator)

Input/Output Formats

Input Format: Animation Requirements

Accepts animation specifications from natural language or motion specs:

From Natural Language:

Create smooth entrance animations with gentle bounce for logo.
Scale from 0.8 to 1.0 over 30 frames.
Stagger text words with 5 frame delay between each.

From Motion Spec:

## Scene 1 Animation Details

**Logo Entrance:**
- Spring animation: Scale 0.8 → 1.0
- Timing: Frames 0-30
- Config: Smooth with slight bounce (damping: 180)
- Opacity: 0 → 1 (linear)

**Text Stagger:**
- Word-by-word reveal
- Stagger delay: 5 frames
- Individual word animation: 15 frames
- Spring config: Snappy (damping: 20, stiffness: 200)

Output Format: ANIMATION_CONFIG.md

Generates a configuration document with all animation parameters:

# Animation Configuration: ProductDemo

## Status
✅ Animation parameters defined
⏳ Ready for implementation in components

## Spring Configurations

```typescript
export const SPRING_CONFIGS = {
  // Smooth, elegant entrance - minimal bounce
  smooth: {
    damping: 200,
    mass: 1,
    stiffness: 100,
  },