Variable Font Hover By Random Letter

1"use client"
2 
3import { useMemo } from "react"
4import { motion, Transition } from "motion/react"
5 
6// Function to shuffle an array
7function shuffleArray(array: number[]) {
8  for (let i = array.length - 1; i > 0; i--) {
9    const j = Math.floor(Math.random() * (i + 1))
10    ;[array[i], array[j]] = [array[j], array[i]]
11  }
12}
13 
14interface TextProps {
15  label: string
16  fromFontVariationSettings: string
17  toFontVariationSettings: string
18  transition?: Transition
19  staggerDuration?: number
20  className?: string
21  onClick?: () => void
22}
23 
24const VariableFontHoverByRandomLetter = ({
25  label,
26  fromFontVariationSettings = "'wght' 400, 'slnt' 0",
27  toFontVariationSettings = "'wght' 900, 'slnt' -10",
28  transition = {
29    type: "spring",
30    duration: 0.7,
31  },
32  staggerDuration = 0.03,
33  className,
34  onClick,
35  ...props
36}: TextProps) => {
37  const shuffledIndices = useMemo(() => {
38    const indices = Array.from({ length: label.length }, (_, i) => i)
39    shuffleArray(indices)
40    return indices
41  }, [label])
42 
43  const letterVariants = {
44    hover: (index: number) => ({
45      fontVariationSettings: toFontVariationSettings,
46      transition: {
47        ...transition,
48        delay: staggerDuration * index,
49      },
50    }),
51    initial: (index: number) => ({
52      fontVariationSettings: fromFontVariationSettings,
53      transition: {
54        ...transition,
55        delay: staggerDuration * index,
56      },
57    }),
58  }
59 
60  return (
61    <motion.span
62      className={`${className}`}
63      onClick={onClick}
64      whileHover="hover"
65      initial="initial"
66      {...props}
67    >
68      <span className="sr-only">{label}</span>
69 
70      {label.split("").map((letter: string, i: number) => {
71        const index = shuffledIndices[i]
72        return (
73          <motion.span
74            key={i}
75            className="inline-block whitespace-pre"
76            aria-hidden="true"
77            variants={letterVariants}
78            custom={index}
79          >
80            {letter}
81          </motion.span>
82        )
83      })}
84    </motion.span>
85  )
86}
87 
88export default VariableFontHoverByRandomLetter