Text Swell

1"use client";
2 
3import { Fragment, useEffect, useRef, useState } from "react";
4import {
5  AbsoluteFill,
6  continueRender,
7  delayRender,
8  Easing,
9  getRemotionEnvironment,
10  interpolate,
11  useCurrentFrame,
12  useVideoConfig,
13} from "remotion";
14import { type SnapCnTheme, useSnapCnTheme } from "@/lib/snap-cn-ui";
15 
16export interface TextSwellProps {
17  /** The sentence to assemble. Its first word leads, and everything else pushes it left. */
18  text?: string;
19  /** Final font size in px (the size the line settles at). */
20  fontSize?: number;
21  /** Overrides the design system's `foreground`. */
22  color?: string;
23  fontWeight?: number | string;
24  /** Design-system token overrides. */
25  theme?: Partial<SnapCnTheme>;
26  mode?: "light" | "dark";
27 
28  /** Frames the lead word fades in over. */
29  introDuration?: number;
30  /** How far below its resting line the lead word starts, in em. */
31  riseDistance?: number;
32  /** Frames the lead word takes to rise into place. */
33  riseDuration?: number;
34 
35  /** Size the lead word rises in at, relative to its final size. */
36  startScale?: number;
37  /**
38   * How far forward the line floats (2.1 = just over twice its final size).
39   * Capped so the line never leaves the frame — see `frontScale` in the docs.
40   */
41  frontScale?: number;
42  /** Frames after the start before the line begins floating forward. */
43  approachDelay?: number;
44  /** Frames the line takes to float forward. */
45  approachDuration?: number;
46 
47  /**
48   * Frames before the second word arrives. The lead word is alone until then, so
49   * this is the beat between it landing and the sentence starting to build.
50   */
51  wordDelay?: number;
52  /** Frames between each trailing word arriving. */
53  wordStagger?: number;
54  /** How far right of its slot a trailing word starts, in em. */
55  wordPush?: number;
56  /**
57   * Frames a trailing word takes to push into its slot. The lead word is shoved
58   * left over the same window, so the push and the shove are one motion.
59   */
60  wordPushDuration?: number;
61 
62  /**
63   * How many trailing words bounce their letters in. 1 (the default) bounces
64   * only the second word; the rest simply push in. The lead word never bounces.
65   */
66  bounceWords?: number;
67  /** How far each letter swells at the peak of its bounce (0.23 = 23% bigger). */
68  letterSwell?: number;
69  /** Frames between one letter starting its bounce and the next. */
70  letterStagger?: number;
71  /** Frames a letter takes to swell up. */
72  letterRise?: number;
73// … truncated