Vertical Cut Reveal

1"use client"
2 
3import { AnimationOptions, motion } from "motion/react"
4import {
5  forwardRef,
6  useCallback,
7  useEffect,
8  useImperativeHandle,
9  useMemo,
10  useRef,
11  useState,
12} from "react"
13 
14import { cn } from "@/lib/utils"
15 
16interface TextProps {
17  children: React.ReactNode
18  reverse?: boolean
19  transition?: AnimationOptions
20  splitBy?: "words" | "characters" | "lines" | string
21  staggerDuration?: number
22  staggerFrom?: "first" | "last" | "center" | "random" | number
23  containerClassName?: string
24  wordLevelClassName?: string
25  elementLevelClassName?: string
26  onClick?: () => void
27  onStart?: () => void
28  onComplete?: () => void
29  autoStart?: boolean // Whether to start the animation automatically
30}
31 
32// Ref interface to allow external control of the animation
33export interface VerticalCutRevealRef {
34  startAnimation: () => void
35  reset: () => void
36}
37 
38interface WordObject {
39  characters: string[]
40  needsSpace: boolean
41}
42 
43const VerticalCutReveal = forwardRef<VerticalCutRevealRef, TextProps>(
44  (
45    {
46      children,
47      reverse = false,
48      transition = {
49        type: "spring",
50        stiffness: 190,
51        damping: 22,
52      },
53      splitBy = "words",
54      staggerDuration = 0.2,
55      staggerFrom = "first",
56      containerClassName,
57      wordLevelClassName,
58      elementLevelClassName,
59      onClick,
60      onStart,
61      onComplete,
62      autoStart = true,
63      ...props
64    },
65    ref
66  ) => {
67    const containerRef = useRef<HTMLSpanElement>(null)
68    const text =
69      typeof children === "string" ? children : children?.toString() || ""
70    const [isAnimating, setIsAnimating] = useState(false)
71 
72    // handy function to split text into characters with support for unicode and emojis
73    const splitIntoCharacters = (text: string): string[] => {
74      if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
75        const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" })
76        return Array.from(segmenter.segment(text), ({ segment }) => segment)
77      }
78      // Fallback for browsers that don't support Intl.Segmenter
79      return Array.from(text)
80    }
81 
82    // Split text based on splitBy parameter
83    const elements = useMemo(() => {
84      const words = text.split(" ")
85      if (splitBy === "characters") {
86        return words.map((word, i) => ({
87          characters: splitIntoCharacters(word),
88          needsSpace: i !== words.length - 1,
89        }))
90      }
91      return splitBy === "words"
92        ? text.split(" ")
93// … truncated