Remotion Spec Translator

# Rule Sections

## Translation Patterns
- scene-structure.md — Scene component structure and layout patterns
- animation-conversion.md — Converting animation descriptions to spring/interpolate code
- timing-calculations.md — Frame timing and duration calculations
- constants-extraction.md — Organizing colors, springs, and timing constants

## Implementation Patterns
- audio-implementation.md — Generating Audio components with proper timing
- asset-imports.md — Import statements and staticFile usage
- reusable-components.md — Extracting reusable components during translation
- typescript-types.md — Generating proper TypeScript interfaces


---
title: Animation Spec to Code Conversion
impact: CRITICAL
tags: animations, spring, interpolate, timing
---

## Animation Spec to Code Conversion

**Impact: CRITICAL**

Converting motion design animation descriptions into working spring and interpolate code.

### Spring Animation Pattern

**Spec Description:**
```markdown
Element scales from 0.8 to 1.0 with smooth spring
Spring config: { damping: 200 }
```

**Code Translation:**
```typescript
const elementProgress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

const scale = interpolate(elementProgress, [0, 1], [0.8, 1]);

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

### Multi-Property Animations

**Spec:**
```markdown
Logo entrance:
- Scale: 0.8 → 1.0
- Opacity: 0 → 1
- Y position: 50px → 0px
Timing: 0-30 frames
Spring: { damping: 200 }
```

**Code:**
```typescript
const logoProgress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

const scale = interpolate(logoProgress, [0, 1], [0.8, 1]);
const opacity = logoProgress; // 0 to 1 naturally
const y = interpolate(logoProgress, [0, 1], [50, 0]);

<div style={{
  transform: `scale(${scale}) translateY(${y}px)`,
  opacity,
}} />
```

### Delayed Animations

**Spec:**
```markdown
Title appears after 30 frame delay
```

**Code:**
```typescript
const titleProgress = spring({
  frame: frame - 30,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Progress will be 0 until frame 30, then animate
```

### Hold and Exit Pattern

**Spec:**
```markdown
Element behavior:
- Frames 0-30: Enter
- Frames 30-120: Hold
- Frames 120-135: Exit
```

**Code:**
```typescript
// Entrance
const enterProgress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Exit
const exitProgress = spring({
  frame: frame - 120,
  fps,
  config: SPRING_CONFIGS.smooth,
});

// Combine: fade in, hold, fade out
const opacity = frame < 120
  ? enterProgress
  : 1 - exitProgress;
```

### Easing vs Spring

**When spec says "smooth ease":**
```typescript
// Use interpolate with easing
const progress = frame / totalFrames;
const eased = Easing.inOut(Easing.cubic)(progress);
const x = interpolate(eased, [0, 1], [0, 1000]);
```

**When spec says "spring" or "bounce":**
```typescript
// Use spring
const progress = spring({
  frame,
  fps,
  config: { damping: 20, stiffness: 200 }, // bouncy
});
```

### Continuous Animations

**Spec:**
```markdown
Element rotates continuously
```

**Code:**
```typescript
// Linear rotation, no spring
const rotation = (frame * 2) % 360; // 2 degrees per frame

<div style={{
  transform: `rotate(${rotation}deg)`,
}} />
```

### Oscillating Animations

**Spec:**
```markdown
Element pulses between 0.9 and 1.1 scale
```

**Code:**
```typescript
const pulse = Math.sin(frame * 0.1) * 0.1 + 1;
// Oscillates: 0.9 → 1.0 → 1.1 → 1.0 → 0.9

<div style={{
  transform: `scale(${pulse})`,
}} />
```

### Sequence Timing

**Spec:**
```markdown
Three elements stagger in:
- Element 1 at frame 0
- Element 2 at frame 15
- Element 3 at frame 30
```

**Code:**
```typescript
const elements = [
  { text: 'First', delay: 0 },
  { text: 'Second', delay: 15 },
  { text: 'Third', delay: 30 },
];

{elements.map((el, i) => {
  const progress = spring({
    frame: frame - el.delay,
    fps,
    config: SPRING_CONFIGS.smooth,
  });

  return (
    <div key={i} style={{ opacity: progress }}>