font-weight-text

1"use client"
2 
3import { useEffect, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface FontWeightTextProps {
8  text: string
9  className?: string
10  fontSize?: number
11  minWeight?: number
12  maxWeight?: number
13  animationDuration?: number
14  delayMultiplier?: number
15}
16 
17export function FontWeightText({
18  text,
19  className = "",
20  fontSize = 150,
21  minWeight = 0,
22  maxWeight = 840,
23  animationDuration = 1.5,
24  delayMultiplier = 0.25,
25}: FontWeightTextProps) {
26  const containerRef = useRef<HTMLParagraphElement>(null)
27 
28  useEffect(() => {
29    if (!containerRef.current) return
30 
31    const spans = containerRef.current.querySelectorAll("span")
32    const numLetters = spans.length
33 
34    spans.forEach((span, i) => {
35      const mappedIndex = i - numLetters / 2
36      span.style.animationDelay = mappedIndex * delayMultiplier + "s"
37    })
38  }, [text, delayMultiplier])
39 
40  const characters = text.split("").map((char, index) => (
41    <span
42      key={index}
43      aria-hidden="true"
44      style={{
45        animation: `breath ${animationDuration}s alternate cubic-bezier(0.37, 0, 0.63, 1) infinite`,
46        animationFillMode: "both",
47        fontVariationSettings: `"wght" ${minWeight}`,
48      }}
49    >
50      {char}
51    </span>
52  ))
53 
54  return (
55    <div className="flex items-center justify-center">
56      <p
57        className={cn("m-0 font-sans", className)}
58        ref={containerRef}
59        aria-label={text}
60        style={{
61          fontSize: `${fontSize}px`,
62          fontFeatureSettings: '"wght"',
63        }}
64      >
65        {characters}
66        <style jsx>{`
67          @keyframes breath {
68            0% {
69              font-variation-settings: "wght" ${minWeight};
70            }
71            100% {
72              font-variation-settings: "wght" ${maxWeight};
73            }
74          }
75        `}</style>
76      </p>
77    </div>
78  )
79}