Text Highlighter

1"use client"
2 
3import {
4  ElementType,
5  forwardRef,
6  useEffect,
7  useImperativeHandle,
8  useMemo,
9  useRef,
10  useState,
11} from "react"
12import { motion, Transition, useInView, UseInViewOptions } from "motion/react"
13 
14import { cn } from "@/lib/utils"
15 
16type HighlightDirection = "ltr" | "rtl" | "ttb" | "btt"
17 
18type TextHighlighterProps = {
19  /**
20   * The text content to be highlighted
21   */
22  children: React.ReactNode
23 
24  /**
25   * HTML element to render as
26   * @default "p"
27   */
28  as?: ElementType
29 
30  /**
31   * How to trigger the animation
32   * @default "inView"
33   */
34  triggerType?: "hover" | "ref" | "inView" | "auto"
35 
36  /**
37   * Animation transition configuration
38   * @default { duration: 0.4, type: "spring", bounce: 0 }
39   */
40  transition?: Transition
41 
42  /**
43   * Options for useInView hook when triggerType is "inView"
44   */
45  useInViewOptions?: UseInViewOptions
46 
47  /**
48   * Class name for the container element
49   */
50  className?: string
51 
52  /**
53   * Highlight color (CSS color string). Also can be a function that returns a color string, eg:
54   * @default 'hsl(60, 90%, 68%)' (yellow)
55   */
56  highlightColor?: string
57 
58  /**
59   * Direction of the highlight animation
60   * @default "ltr" (left to right)
61   */
62  direction?: HighlightDirection
63} & React.HTMLAttributes<HTMLElement>
64 
65export type TextHighlighterRef = {
66  /**
67   * Trigger the highlight animation
68   * @param direction - Optional direction override for this animation
69   */
70  animate: (direction?: HighlightDirection) => void
71 
72  /**
73   * Reset the highlight animation
74   */
75  reset: () => void
76}
77 
78export const TextHighlighter = forwardRef<
79  TextHighlighterRef,
80  TextHighlighterProps
81>(
82  (
83    {
84      children,
85      as = "span",
86      triggerType = "inView",
87      transition = { type: "spring", duration: 1, delay: 0, bounce: 0 },
88      useInViewOptions = {
89        once: true,
90        initial: false,
91        amount: 0.1,
92      },
93      className,
94      highlightColor = "hsl(25, 90%, 80%)",
95      direction = "ltr",
96      ...props
97    },
98    ref
99  ) => {
100    const componentRef = useRef<HTMLDivElement>(null)
101    const [isAnimating, setIsAnimating] = useState(false)
102    const [isHovered, setIsHovered] = useState(false)
103    const [currentDirection, setCurrentDirection] =
104      useState<HighlightDirection>(direction)
105 
106    // this allows us to change the direction whenever the direction prop changes
107    useEffect(() => {
108      setCurrentDirection(direction)
109    }, [direction])
110 
111    const isInView =
112// … truncated