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

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

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

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

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

// 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

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 parameters** if timing feels off
5. **Document final values** for consistency

## Checklist

- [x] Spring configs defined
- [x] Interpolation ranges specified
- [x] Timing constants calculated
- [x] Progress patterns documented
- [ ] Integrated into components (next step)
- [ ] Tested in preview (next step)

Animation Patterns

Pattern 1: Entrance Animation

Spring-based entrance with scale and opacity:

const entranceProgress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

const scale = interpolate(entranceProgress, [0, 1], [0.8, 1]);
const opacity = entranceProgress;
const translateY = interpolate(entranceProgress, [0, 1], [20, 0]);

Pattern 2: Staggered Reveal

Multiple items animating with delay:

const items = ['Item 1', 'Item 2', 'Item 3'];
const STAGGER_DELAY = 5;

items.map((item, index) => {
  const itemProgress = spring({
    frame: frame - (index * STAGGER_DELAY),
    fps,
    config: SPRING_CONFIGS.snappy,
  });

  return (
    <div style={{ opacity: itemProgress }}>
      {item}
    </div>
  );
});

Pattern 3: Transition Between States

Smooth transition using frame ranges:

const transitionProgress = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// State A → State B
const value = interpolate(
  transitionProgress,
  [0, 1],
  [stateAValue, stateBValue]
);

Pattern 4: Looping Animation

Continuous cycling animation:

const LOOP_DURATION = 60; // frames
const loopProgress = (frame % LOOP_DURATION) / LOOP_DURATION;

const rotation = loopProgress * 360; // 0 to 360 degrees
const pulse = Math.sin(loopProgress * Math.PI * 2) * 0.1 + 1; // 0.9 to 1.1

Pattern 5: Overshoot and Settle

Spring with intentional overshoot:

const overshootProgress = spring({
  frame,
  fps,
  config: {
    damping: 10,    // Low damping = more bounce
    stiffness: 100,
  },
});

const scale