Text Swap

1"use client";
2 
3import { Easing, interpolate, useCurrentFrame } from "remotion";
4import { type SnapCnTheme, useSnapCnTheme } from "@/lib/snap-cn-ui";
5 
6export type TextSwapTransition =
7  | "fly-through"
8  | "fade-through"
9  | "crossfade"
10  | "shared-axis-y"
11  | "shared-axis-z"
12  | "cut";
13 
14export type TextSwapUnit = "word" | "block";
15 
16export interface TextSwapTransitionDefaults {
17  unit: TextSwapUnit;
18  exitDuration: number;
19  enterDuration: number;
20}
21 
22/**
23 * Per-transition timing defaults. `unit` picks whether the line animates as a
24 * whole block or word-by-word when the `unit` prop is omitted.
25 */
26export const TRANSITION_DEFAULTS: Record<
27  TextSwapTransition,
28  TextSwapTransitionDefaults
29> = {
30  // Always a block: the line has to rush the camera as one object. Per-word it
31  // would be five objects each blowing up about its own centre, which is not a
32  // camera move, it is a collision.
33  "fly-through": { unit: "block", exitDuration: 20, enterDuration: 16 },
34  "fade-through": { unit: "block", exitDuration: 8, enterDuration: 13 },
35  crossfade: { unit: "word", exitDuration: 15, enterDuration: 21 },
36  "shared-axis-y": { unit: "block", exitDuration: 10, enterDuration: 14 },
37  "shared-axis-z": { unit: "block", exitDuration: 11, enterDuration: 16 },
38  cut: { unit: "word", exitDuration: 8, enterDuration: 8 },
39};
40 
41export interface TextSwapMotion {
42  /** Y offset (px) the outgoing text drifts to. */
43  exitY: number;
44  /** Scale the outgoing text ends at. */
45  exitScale: number;
46  /** Blur (px) the outgoing text ends at. */
47  exitBlur: number;
48  /** Y offset (px) the incoming text starts from. */
49  enterY: number;
50  /** Scale the incoming text starts from. */
51  enterScale: number;
52  /** Blur (px) the incoming text starts from. */
53  enterBlur: number;
54 
55  /**
56   * Shape the exit's scale as a **perspective rush** instead of a plain ramp —
57   * see `perspectiveScale`. Only worth it when the line is meant to pass the
58   * camera rather than merely grow.
59   */
60  exitPerspective?: boolean;
61  /**
62   * Fraction of the exit that passes before the outgoing line starts to fade.
63   * 0 (the default) fades across the whole exit. A line flying at your face does
64   * not dim on the way in — it stays solid until it is on top of you and then it
65   * is gone, so this holds the fade back until the very end.
66   */
67  exitFadeStart?: number;
68  /**
69   * Motion-blur samples for the exit. See `SHUTTER` below.
70   *
71// … truncated