remotion-animation
Generates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic. Focuses ONLY on animation parameters, NOT component implementation. Use when defining animation behavior or when asked to "configure animations", "setup spring configs", "def
By ncklrs · 420 installs
npx skills add ncklrs/startup-os-skills --skill remotion-animation
Source repository · Upstream listing
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:
From Motion Spec:
Output Format: ANIMATION CONFIG.md
Generates a configuration document with all animation parameters:
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;
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;
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;
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;
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;
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,
}} /
Animation Patterns
Pattern 1: Entrance Animation
Spring based entrance with scale and opacity:
Pattern 2: Staggered Reveal
Multiple items animating with delay:
Pattern 3: Transition Between States
Smooth transition using frame ranges:
Pattern 4: Looping Animation
Continuous cycling animation:
Pattern 5: Overshoot and Settle
Spring with intentional overshoot:
Spring Configuration Guide
Damping Parameter
Controls how quickly oscillation stops:
Stiffness Parameter
Controls animation speed:
Mass Parameter
Controls inertia and weight:
Easing Function Reference
Standard easing curves:
Frame Calculation Helpers
Common frame calculations:
Integration Workflow
1. Generate animation config using this skill → ANIMATION CONFIG.md
2. Add to constants.ts in composition folder
3. Reference in components during implementation
4. Test in preview and adjust parameters
5. Document any changes back to config
Common Animation Combinations
Logo Entrance (Smooth + Scale + Fade)
Text Reveal (Stagger + Slide + Fade)
Button Pulse (Loop + Scale)
Page Transition (Fade + Slide)
Timing Best Practices
Recommended timing ranges for different animation types:
Integration with Other Skills
This skill feeds into:
Works with:
/motion designer — Animation specs from design documents
/remotion scaffold — Configs go into constants.ts
/remotion component gen — Components apply these configs
/remotion composition — Timing coordinates with Sequence layout
/remotion spec translator — Orchestrates this skill when translating specs
This skill provides precise animation parameter definitions that ensure consistent, production quality motion across Remotion video projects.