Cascade Text

1"use client";
2 
3import React, { useEffect, useRef } from "react";
4 
5import {
6  animate,
7  cubicBezier,
8  inView,
9  stagger,
10  useReducedMotion,
11} from "motion/react";
12 
13interface CascadeTextProps {
14  children: React.ReactNode;
15  animateOnScroll?: boolean;
16  delay?: number;
17}
18 
19type PreparedElement = {
20  element: HTMLElement;
21  originalHTML: string;
22  originalTextIndent: string;
23  lines: HTMLElement[];
24};
25 
26const getTargetElements = (container: HTMLElement): HTMLElement[] => {
27  if (container.hasAttribute("data-cascade-text")) {
28    return Array.from(container.children) as HTMLElement[];
29  }
30 
31  return [container];
32};
33 
34const splitIntoLines = (
35  element: HTMLElement,
36  reduceMotion: boolean
37): HTMLElement[] => {
38  const text = (element.textContent ?? "").trim();
39 
40  if (!text) {
41    element.textContent = "";
42    return [];
43  }
44 
45  const words = text.split(/\s+/).filter(Boolean);
46  const fragment = document.createDocumentFragment();
47  const wordSpans: HTMLSpanElement[] = [];
48 
49  for (let index = 0; index < words.length; index += 1) {
50    const span = document.createElement("span");
51    span.textContent = words[index];
52    span.style.display = "inline-block";
53 
54    wordSpans.push(span);
55    fragment.appendChild(span);
56 
57    if (index < words.length - 1) {
58      fragment.appendChild(document.createTextNode(" "));
59    }
60  }
61 
62  element.textContent = "";
63  element.appendChild(fragment);
64 
65  const linesText: string[] = [];
66  let currentTop: number | null = null;
67  let currentWords: string[] = [];
68 
69  wordSpans.forEach((span) => {
70    const top = span.offsetTop;
71    const value = span.textContent ?? "";
72 
73    if (currentTop === null) {
74      currentTop = top;
75      currentWords.push(value);
76      return;
77    }
78 
79    if (top !== currentTop) {
80      linesText.push(currentWords.join(" "));
81      currentWords = [value];
82      currentTop = top;
83      return;
84    }
85 
86    currentWords.push(value);
87  });
88 
89  if (currentWords.length > 0) {
90    linesText.push(currentWords.join(" "));
91  }
92 
93  element.textContent = "";
94 
95  const lines: HTMLElement[] = [];
96 
97  linesText.forEach((lineText) => {
98    const mask = document.createElement("span");
99    mask.style.display = "block";
100    mask.style.overflow = "hidden";
101 
102    const line = document.createElement("span");
103    line.textContent = lineText;
104    line.style.display = "block";
105    line.style.willChange = reduceMotion ? "opacity" : "transform";
106 
107    if (reduceMotion) {
108      line.style.opacity = "0";
109    } else {
110// … truncated