Underline To Background

1"use client"
2 
3import { ElementType, useEffect, useMemo, useRef } from "react"
4import { motion, ValueAnimationTransition } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface UnderlineProps {
9  /**
10   * The content to be displayed and animated
11   */
12  children: React.ReactNode
13 
14  /**
15   * HTML Tag to render the component as
16   * @default span
17   */
18  as?: ElementType
19 
20  /**
21   * Optional class name for styling
22   */
23  className?: string
24 
25  /**
26   * Animation transition configuration
27   * @default { type: "spring", damping: 30, stiffness: 300 }
28   */
29  transition?: ValueAnimationTransition
30 
31  /**
32   * The color that the text will animate to on hover
33   */
34  targetTextColor: string
35 
36  /**
37   * Height of the underline as a ratio of font size
38   * @default 0.1
39   */
40  underlineHeightRatio?: number
41 
42  /**
43   * Padding of the underline as a ratio of font size
44   * @default 0.01
45   */
46  underlinePaddingRatio?: number
47}
48 
49const UnderlineToBackground = ({
50  children,
51  as,
52  className,
53  transition = { type: "spring", damping: 30, stiffness: 300 },
54  underlineHeightRatio = 0.1, // Default to 10% of font size
55  underlinePaddingRatio = 0.01, // Default to 1% of font size
56  targetTextColor = "#fef",
57  ...props
58}: UnderlineProps) => {
59  const textRef = useRef<HTMLSpanElement>(null)
60 
61  // Create custom motion component based on the 'as' prop
62  const MotionComponent = useMemo(() => motion.create(as ?? "span"), [as])
63 
64  // Update CSS custom properties based on font size
65  useEffect(() => {
66    const updateUnderlineStyles = () => {
67      if (textRef.current) {
68        const fontSize = parseFloat(getComputedStyle(textRef.current).fontSize)
69        const underlineHeight = fontSize * underlineHeightRatio
70        const underlinePadding = fontSize * underlinePaddingRatio
71        textRef.current.style.setProperty(
72          "--underline-height",
73          `${underlineHeight}px`
74        )
75        textRef.current.style.setProperty(
76          "--underline-padding",
77          `${underlinePadding}px`
78        )
79      }
80    }
81 
82    updateUnderlineStyles()
83    window.addEventListener("resize", updateUnderlineStyles)
84 
85    return () => window.removeEventListener("resize", updateUnderlineStyles)
86  }, [underlineHeightRatio, underlinePaddingRatio])
87 
88  // Animation variants for the underline background
89  const underlineVariants = {
90    initial: {
91      height: "var(--underline-height)",
92    },
93    target: {
94      height: "100%",
95      transition: transition,
96    },
97  }
98 
99// … truncated