timing

1import { Easing, interpolate } from "remotion";
2 
3export const DEFAULT_FPS = 30;
4 
5/** Crisp UI entrance curve from Remotion timing best practices */
6export const EASING_ENTER = Easing.bezier(0.16, 1, 0.3, 1);
7 
8/** Exit curve — accelerates away (Easing.in) */
9export const EASING_EXIT = Easing.in(Easing.cubic);
10 
11export function secondsToFrames(seconds: number, fps = DEFAULT_FPS): number {
12  return Math.round(seconds * fps);
13}
14 
15export function framesToSeconds(frames: number, fps = DEFAULT_FPS): number {
16  return frames / fps;
17}
18 
19export function staggerDelay(
20  index: number,
21  staggerInFrames: number,
22  baseDelayInFrames = 0,
23): number {
24  return baseDelayInFrames + index * staggerInFrames;
25}
26 
27/** Normalized 0→1 enter progress with default ease-out curve */
28export function enterProgress(
29  frame: number,
30  delayInFrames: number,
31  durationInFrames: number,
32  easing = EASING_ENTER,
33): number {
34  return interpolate(
35    frame,
36    [delayInFrames, delayInFrames + durationInFrames],
37    [0, 1],
38    {
39      easing,
40      extrapolateLeft: "clamp",
41      extrapolateRight: "clamp",
42    },
43  );
44}
45 
46/** Normalized 0→1 exit progress with default ease-in curve */
47export function exitProgress(
48  frame: number,
49  delayInFrames: number,
50  durationInFrames: number,
51  easing = EASING_EXIT,
52): number {
53  return interpolate(
54    frame,
55    [delayInFrames, delayInFrames + durationInFrames],
56    [0, 1],
57    {
58      easing,
59      extrapolateLeft: "clamp",
60      extrapolateRight: "clamp",
61    },
62  );
63}