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:**
```markdown
## 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:

```markdown
# 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,
  },

  // Snappy, responsive - quick settle
  snappy: {
    damping: 20,
    stiffness: 200,
    mass: 0.5,
  },

  // Bouncy, playful - noticeable oscillation
  bouncy: {
    damping: 8,
    mass: 1,
    stiffness: 100,
  },

  // Gentle, soft - slow and smooth
  gentle: {
    damping: 30,
    stiffness: 80,
    mass: 1,
  },
} as const;
```

## Interpolation Mappings

```typescript
export const INTERPOLATIONS = {
  // Logo scale animation
  logoScale: {
    input: [0, 1],      // Progress from spring (0 to 1)
    output: [0.8, 1],   // Scale value (0.8 to 1.0)
    extrapolate: 'clamp',
  },

  // Text slide-in
  textSlide: {
    input: [0, 1],
    output: [-50, 0],   // Translate X from -50px to 0
    extrapolate: 'clamp',
  },

  // Fade effect
  fade: {
    input: [0, 1],
    output: [0, 1],     // Opacity 0 to 1
    extrapolate: 'clamp',
  },
} as const;
```

## Animation Timing

```typescript
export const ANIMATION_TIMING = {
  // Global timing constants
  fps: 30,

  // Stagger animations
  stagger: {
    textWords: 5,         // Frame delay between words
    listItems: 3,         // Frame delay between list items
    cards: 8,             // Frame delay between card reveals
  },

  // Durations
  durations: {
    fadeIn: 15,           // Frames for fade in
    fadeOut: 10,          // Frames for fade out
    hold: 30,             // Frames to hold on screen
    quickTransition: 5,   // Frames for quick change
  },

  // Scene-specific timing
  scene1: {
    logoEnter: { start: 0, end: 30 },
    textReveal: { start: 20, end: 60 },
  },

  scene2: {
    contentFadeIn: { start: 0, end: 20 },
    bulletStagger: { start: 25, delay: 8 },
  },
} as const;
```

## Easing Functions

```typescript
export const EASING = {
  // Standard easing curves
  easeInOut: (t: number) =>
    t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,

  easeOut: (t: number) =>
    t * (2 - t),

  easeIn: (t: number) =>
    t * t,

  // Cubic bezier approximations
  cubicBezier: {
    ease: [0.25, 0.1, 0.25, 1],
    easeIn: [0.42, 0, 1, 1],
    easeOut: [0, 0, 0.58, 1],
    easeInOut: [0.42, 0, 0.58, 1],
  },
} as const;
```

## Progress Calculation Patterns

```typescript
// Pattern 1: Simple spring progress
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Pattern 2: Delayed spring (for stagger)
const itemProgress = spring({
  frame: frame - (index * ANIMATION_TIMING.stagger.textWords),
  fps,
  config: SPRING_CONFIGS.snappy,
});

// Pattern 3: Frame-based linear progress
const linearProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// Pattern 4: Eased progress
const easedProgress = EASING.easeOut(linearProgress);

// Pattern 5: Looping animation
const loopProgress = (frame % loopDuration) / loopDuration;
```

## Usage Examples

### Implementing in Components

```typescript
import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
import { SPRING_CONFIGS, INTERPOLATIONS, ANIMATION_TIMING } from '../constants';

// In component:
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Apply spring animation
const logoProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Apply interpolation
const scale = interpolate(
  logoProgress,
  INTERPOLATIONS.logoScale.input,
  INTERPOLATIONS.logoScale.output
);

const opacity = logoProgress; // Direct 0-1 progress

// Use in styles
<div style={{
  transform: `scale(${scale})`,
  opacity,
}} />
```

## Next Steps

1. **Integrate into constants.ts** in composition folder
2. **Use in component implementation** via `/remotion-component-gen`
3. **Test animation feel** in Remotion preview
4. **Adjust parame