Underline Goes Out Comes In

1"use client"
2 
3import { ElementType, useEffect, useRef, useState, useMemo } from "react"
4import cn from "clsx"
5import {
6  motion,
7  useAnimationControls,
8  ValueAnimationTransition,
9} from "motion/react"
10 
11interface GoesOutComesInUnderlineProps {
12  /**
13   * The content to be displayed and animated
14   */
15  children: React.ReactNode
16 
17  /**
18   * HTML Tag to render the component as
19   * @default span
20   */
21  as?: ElementType
22 
23  /**
24   * Direction of the animation
25   * @default "left"
26   */
27  direction?: "left" | "right"
28 
29  /**
30   * Optional class name for styling
31   */
32  className?: string
33 
34  /**
35   * Height of the underline as a ratio of font size
36   * @default 0.1
37   */
38  underlineHeightRatio?: number
39 
40  /**
41   * Padding of the underline as a ratio of font size
42   * @default 0.01
43   */
44  underlinePaddingRatio?: number
45 
46  /**
47   * Animation transition configuration
48   * @default { duration: 0.5, ease: "easeOut" }
49   */
50  transition?: ValueAnimationTransition
51}
52 
53const GoesOutComesInUnderline = ({
54  children,
55  as,
56  direction = "left",
57  className,
58  underlineHeightRatio = 0.1,
59  underlinePaddingRatio = 0.01,
60  transition = {
61    duration: 0.5,
62    ease: "easeOut",
63  },
64  ...props
65}: GoesOutComesInUnderlineProps) => {
66  const controls = useAnimationControls()
67  const [blocked, setBlocked] = useState(false)
68  const textRef = useRef<HTMLSpanElement>(null)
69  const MotionComponent = useMemo(() => motion.create(as ?? "span"), [as])
70 
71  useEffect(() => {
72    const updateUnderlineStyles = () => {
73      if (textRef.current) {
74        const fontSize = parseFloat(getComputedStyle(textRef.current).fontSize)
75        const underlineHeight = fontSize * underlineHeightRatio
76        const underlinePadding = fontSize * underlinePaddingRatio
77        textRef.current.style.setProperty(
78          "--underline-height",
79          `${underlineHeight}px`
80        )
81        textRef.current.style.setProperty(
82          "--underline-padding",
83          `${underlinePadding}px`
84        )
85      }
86    }
87 
88    updateUnderlineStyles()
89    window.addEventListener("resize", updateUnderlineStyles)
90 
91    return () => window.removeEventListener("resize", updateUnderlineStyles)
92  }, [underlineHeightRatio, underlinePaddingRatio])
93 
94  const animate = async () => {
95    if (blocked) return
96 
97    setBlocked(true)
98 
99    await controls.start({
100      width: 0,
101      transition,
102      transitionEnd: {
103        left: direction === "left" ? "auto" : 0,
104        right: direction === "left" ? 0 : "auto",
105      },
106    })
107 
108// … truncated