masked-slide-reveal

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { EASING_ENTER, staggerDelay } from "@/remotion/lib/timing";
4 
5const MASK_LINE_HEIGHT = 1.12;
6 
7export type MaskedSlideRevealProps = {
8  /** Single string — splits on newlines for line mode, or words when one line. */
9  text?: string;
10  /** Explicit lines to reveal; preferred for multi-line headlines. */
11  lines?: string[];
12  staggerInFrames?: number;
13  durationInFrames?: number;
14  delayInFrames?: number;
15  fontSize?: number;
16  color?: string;
17  fontWeight?: number;
18  fontFamily?: string;
19  textAlign?: "left" | "center" | "right";
20  lineGap?: number;
21};
22 
23function resolveLines(text: string | undefined, lines?: string[]): string[] {
24  if (lines && lines.length > 0) {
25    return lines;
26  }
27 
28  const content = text?.trim() ?? "";
29  if (!content) {
30    return [];
31  }
32 
33  if (content.includes("\n")) {
34    return content.split("\n").map((line) => line.trim()).filter(Boolean);
35  }
36 
37  return content.split(/\s+/).filter(Boolean);
38}
39 
40function isWordMode(text: string | undefined, lines?: string[]): boolean {
41  const content = text?.trim() ?? "";
42  return !lines?.length && Boolean(content) && !content.includes("\n");
43}
44 
45export const MaskedSlideReveal: React.FC<MaskedSlideRevealProps> = ({
46  text,
47  lines,
48  staggerInFrames = 6,
49  durationInFrames = 16,
50  delayInFrames = 0,
51  fontSize: fontSizeProp,
52  color = "#f4f4f5",
53  fontWeight = 600,
54  fontFamily,
55  textAlign = "center",
56  lineGap = 0.18,
57}) => {
58  const frame = useCurrentFrame();
59  const { width } = useVideoConfig();
60  const fontSize = fontSizeProp ?? scaleFont(72, width);
61  const items = resolveLines(text, lines);
62  const wordMode = isWordMode(text, lines);
63 
64  if (items.length === 0) {
65    return null;
66  }
67 
68  const typography = {
69    fontSize,
70    fontWeight,
71    color,
72    lineHeight: MASK_LINE_HEIGHT,
73    letterSpacing: "-0.02em",
74    ...(fontFamily ? { fontFamily } : {}),
75  };
76 
77  const renderMaskedItem = (item: string, index: number) => {
78    const start = staggerDelay(index, staggerInFrames, delayInFrames);
79    const progress = interpolate(
80      frame,
81      [start, start + durationInFrames],
82      [0, 1],
83      {
84        easing: EASING_ENTER,
85        extrapolateLeft: "clamp",
86        extrapolateRight: "clamp",
87      },
88    );
89    const y = interpolate(progress, [0, 1], [108, 0]);
90 
91    return (
92      <span
93        key={`${item}-${index}`}
94        style={{
95// … truncated