motion-tokens

1import { Easing } from "remotion";
2import { EASING_ENTER, EASING_EXIT, secondsToFrames } from "./timing";
3 
4/** Named frame durations — pair with `springs.ts` or `enterProgress()` */
5export const DURATION = {
6  fast: secondsToFrames(0.4),
7  normal: secondsToFrames(0.8),
8  slow: secondsToFrames(1.2),
9} as const;
10 
11export const DELAY = {
12  none: 0,
13  short: secondsToFrames(0.15),
14  medium: secondsToFrames(0.3),
15} as const;
16 
17export const STAGGER = {
18  tight: 4,
19  normal: 8,
20  relaxed: 12,
21} as const;
22 
23/**
24 * Emphasis scale steps. One word popping inside a line of text carries a lot
25 * less headroom than a card lifting off a page, so emphasis is a named ramp
26 * rather than a per-component magic number — pair with `EASING.pop`.
27 */
28export const EMPHASIS = {
29  /** Type-level accent: a highlighted word inside running copy. */
30  subtle: 1.05,
31  /** Standalone element that owns its own line. */
32  medium: 1.1,
33  /** Hero beat — one per scene at most. */
34  strong: 1.18,
35} as const;
36 
37/**
38 * Copy-paste Bézier curves from Remotion timing guidance.
39 * Curves are shared with `timing.ts` so a component picks the same motion
40 * whether it imports the token object or the standalone curve.
41 */
42export const EASING = {
43  /** Strong ease-out — entrances, decelerates into place */
44  enter: EASING_ENTER,
45  /** Ease-in — exits accelerate away. Never ease-out an exit. */
46  exit: EASING_EXIT,
47  /** Balanced ease-in-out — editorial holds */
48  editorial: Easing.bezier(0.45, 0, 0.55, 1),
49  /** Slight overshoot — emphasis pops */
50  pop: Easing.bezier(0.34, 1.56, 0.64, 1),
51} as const;