Variable Font Hover By Letter

1"use client"
2 
3import { useState } from "react"
4import { debounce } from "lodash"
5import { AnimationOptions, motion, stagger, useAnimate } from "motion/react"
6 
7interface TextProps {
8  label: string
9  fromFontVariationSettings: string
10  toFontVariationSettings: string
11  transition?: AnimationOptions
12  staggerDuration?: number
13  staggerFrom?: "first" | "last" | "center" | number
14  className?: string
15  onClick?: () => void
16}
17 
18const VariableFontHoverByLetter = ({
19  label,
20  fromFontVariationSettings = "'wght' 400, 'slnt' 0",
21  toFontVariationSettings = "'wght' 900, 'slnt' -10",
22  transition = {
23    type: "spring",
24    duration: 0.7,
25  },
26  staggerDuration = 0.03,
27  staggerFrom = "first",
28  className,
29  onClick,
30  ...props
31}: TextProps) => {
32  const [scope, animate] = useAnimate()
33  const [isHovered, setIsHovered] = useState(false)
34 
35  const mergeTransition = (baseTransition: AnimationOptions) => ({
36    ...baseTransition,
37    delay: stagger(staggerDuration, {
38      from: staggerFrom,
39    }),
40  })
41 
42  const hoverStart = debounce(
43    () => {
44      if (isHovered) return
45      setIsHovered(true)
46 
47      animate(
48        ".letter",
49        { fontVariationSettings: toFontVariationSettings },
50        mergeTransition(transition)
51      )
52    },
53    100,
54    { leading: true, trailing: true }
55  )
56 
57  const hoverEnd = debounce(
58    () => {
59      setIsHovered(false)
60 
61      animate(
62        ".letter",
63        { fontVariationSettings: fromFontVariationSettings },
64        mergeTransition(transition)
65      )
66    },
67    100,
68    { leading: true, trailing: true }
69  )
70 
71  return (
72    <motion.span
73      className={`${className}`}
74      onHoverStart={hoverStart}
75      onHoverEnd={hoverEnd}
76      onClick={onClick}
77      ref={scope}
78      {...props}
79    >
80      <span className="sr-only">{label}</span>
81 
82      {label.split("").map((letter: string, i: number) => {
83        return (
84          <motion.span
85            key={i}
86            className="inline-block whitespace-pre letter"
87            aria-hidden="true"
88          >
89            {letter}
90          </motion.span>
91        )
92      })}
93    </motion.span>
94  )
95}
96 
97export default VariableFontHoverByLetter