Text Reveal

1"use client";
2 
3import { 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 {
15  defaultLightTheme,
16  type SnapCnTheme,
17  useSnapCnTheme,
18} from "@/lib/snap-cn-ui";
19 
20/**
21 * Pure animation math for TextReveal. Everything in this file is
22 * frame-deterministic and side-effect free so it can be unit tested.
23 */
24 
25export type TextRevealUnit = "character" | "word" | "line" | "block";
26 
27export type TextRevealEffect =
28  | "fade"
29  | "slide"
30  | "blur"
31  | "scale"
32  | "mask"
33  | "tracking";
34 
35export type TextRevealDirection = "up" | "down" | "left" | "right";
36 
37export type TextRevealEasing =
38  | "smooth"
39  | "snappy"
40  | "overshoot"
41  | "linear"
42  | "spring"
43  | [number, number, number, number];
44 
45export type TextRevealExit = "none" | "mirror";
46 
47export type TextRevealPreset =
48  | "soft-blur-in"
49  | "per-character-rise"
50  | "bottom-up-letters"
51  | "top-down-letters"
52  | "spring-scale-in"
53  | "micro-scale-fade"
54  | "scale-down-fade"
55  | "blur-out-up"
56  | "focus-blur-resolve"
57  | "line-by-line-slide"
58  | "mask-reveal-up"
59  | "tracking-in"
60  | "short-slide-right"
61  | "staggered-fade-up";
62 
63export interface TextRevealSettings {
64  unit: TextRevealUnit;
65  effects: TextRevealEffect[];
66  direction: TextRevealDirection;
67  distance: number;
68  blurAmount: number;
69  scaleFrom: number;
70  /** Starting letter-spacing for the `tracking` effect, in em. */
71  trackingFrom: number;
72  stagger: number;
73  enterDuration: number;
74  easing: TextRevealEasing;
75  exit: TextRevealExit;
76  exitDirection: TextRevealDirection;
77  exitDistance: number;
78  exitBlur: number;
79  exitDuration: number;
80  exitStagger: number;
81  align: "left" | "center" | "right";
82  fontSize: number;
83  color: string;
84  fontWeight: number | string;
85  letterSpacing: string;
86  speed: number;
87}
88 
89export const TEXT_REVEAL_DEFAULTS: TextRevealSettings = {
90  unit: "word",
91  effects: ["fade", "slide"],
92  direction: "up",
93  distance: 24,
94  blurAmount: 8,
95  scaleFrom: 0.9,
96  trackingFrom: 0.5,
97  stagger: 2,
98  enterDuration: 18,
99  easing: "smooth",
100  exit: "none",
101  exitDirection: "up",
102  exitDistance: 14,
103  exitBlur: 8,
104  exitDuration: 14,
105  exitStagger: 1,
106  align: "center",
107  fontSize: 72,
108  // A settings preset has no hook to resolve against, so it takes the token's
109  // value directly rather than a hex — the component itself still prefers the
110// … truncated