Slide Up Text

1"use client";
2 
3import { AnimationOptions, motion } from "motion/react";
4import {
5  forwardRef,
6  useCallback,
7  useEffect,
8  useImperativeHandle,
9  useMemo,
10  useState,
11} from "react";
12 
13import { cn } from "@/lib/utils";
14 
15interface SlideUpTextProps {
16  children: React.ReactNode;
17  split?: "words" | "characters" | "lines";
18  delay?: number;
19  stagger?: number;
20  from?: "first" | "last" | "center";
21  transition?: AnimationOptions;
22  className?: string;
23  wordClass?: string;
24  charClass?: string;
25  autoStart?: boolean;
26  onStart?: () => void;
27  onComplete?: () => void;
28  inView?: boolean;
29  once?: boolean;
30}
31 
32export interface SlideUpTextRef {
33  startAnimation: () => void;
34  reset: () => void;
35}
36 
37interface WordObject {
38  characters: string[];
39  needsSpace: boolean;
40}
41 
42const SlideUpText = forwardRef<SlideUpTextRef, SlideUpTextProps>(
43  (
44    {
45      children,
46      split = "words",
47      delay = 0,
48      stagger = 0.1,
49      from = "first",
50      transition = {
51        type: "tween",
52        ease: [0.625, 0.05, 0, 1],
53        duration: 0.5,
54      },
55      className,
56      wordClass,
57      charClass,
58      autoStart = true,
59      onStart,
60      onComplete,
61      inView = false,
62      once = true,
63      ...props
64    },
65    ref,
66  ) => {
67    const text = typeof children === "string"
68      ? children
69      : children?.toString() || "";
70    const [isAnimating, setIsAnimating] = useState(false);
71 
72    const splitIntoCharacters = (text: string): string[] => {
73      if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
74        const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
75        return Array.from(segmenter.segment(text), ({ segment }) => segment);
76      }
77      return Array.from(text);
78    };
79 
80    const elements = useMemo(() => {
81      const words = text.split(" ");
82      if (split === "characters") {
83        return words.map((word, i) => ({
84          characters: splitIntoCharacters(word),
85          needsSpace: i !== words.length - 1,
86        }));
87      }
88      return split === "words" ? text.split(" ") : text.split("\n");
89    }, [text, split]);
90 
91    const getStaggerDelay = useCallback(
92      (index: number) => {
93        const total = split === "characters"
94          ? elements.reduce(
95            (acc, word) =>
96              acc +
97              (typeof word === "string"
98                ? 1
99                : word.characters.length + (word.needsSpace ? 1 : 0)),
100            0,
101          )
102          : elements.length;
103 
104// … truncated