Remotion Rule: Timing

What it is

This Remotion skill rule covers interpolation and timing in Remotion videos. Remotion renders video frame-by-frame in React, and animations are driven by the current frame number rather than CSS transitions or requestAnimationFrame. You use the interpolate() function to map frame numbers to property values, with configurable easing curves and spring physics.

This rule is part of the official Remotion Agent Skill set. It provides the correct patterns for creating smooth motion, fade effects, and spring-based animations in programmatic video compositions.

Why it saves time or tokens

Getting animation timing right in Remotion requires understanding how interpolate() maps frame ranges to output ranges. Without this skill rule, developers (and AI agents) often produce jerky animations because they use linear interpolation where easing is needed, or miscalculate frame boundaries. This rule provides the correct formulas and patterns upfront, reducing trial-and-error iterations.

How to use

1. Import interpolate and useCurrentFrame from the remotion package
2. Map frame ranges to output values using interpolate(frame, inputRange, outputRange)
3. Apply easing curves or spring physics for natural-feeling motion

Example

import { useCurrentFrame, interpolate, spring, useVideoConfig } from 'remotion';
import { Easing } from 'remotion';

const MyAnimation = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Linear fade in over 30 frames
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp'
  });

  // Eased slide from left
  const translateX = interpolate(frame, [0, 45], [-100, 0], {
    easing: Easing.out(Easing.cubic),
    extrapolateRight: 'clamp'
  });

  // Spring animation
  const scale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <div style={{ opacity, transform: `translateX(${translateX}px) scale(${scale})` }}>
      Animated content
    </div>
  );
};

Related on TokRepo

• AI tools for video — video production skills and tools on TokRepo
• AI tools for design — animation and design tools

Common pitfalls

• Forgetting extrapolateRight: 'clamp' causes values to keep increasing past the intended range, producing unexpected animation behavior
• Using interpolate without easing produces robotic linear motion; add Easing.out(Easing.cubic) for natural deceleration
• Spring animations do not have a fixed duration; use measureSpring() to calculate how many frames a spring animation takes for accurate composition timing