Guides
Motion Tokens
Shared durations, delays, stagger steps, and Bézier curves.
Install
Install
$ npx remotion-ui@latest add motion-tokensMotion tokens centralize timing so primitives and scenes stay consistent across compositions.
Example
import { DURATION, DELAY, STAGGER, EASING } from "@/remotion/lib/motion-tokens";
import { enterProgress } from "@/remotion/lib/timing";
// DURATION.fast ~12 frames at 30fps
// DURATION.normal ~24 frames
// DURATION.slow ~36 frames
// STAGGER.normal 8 frames between children
// EASING.enter crisp ease-out for entrances
const progress = enterProgress(frame, DELAY.short, DURATION.normal, EASING.enter);Pair tokens with springs.ts for physics-based motion (spring-in, marker-highlight) and timing.ts for interpolate helpers.