Kinetic Text

1import React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5type As = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"
6 
7type KineticTextProps = React.HTMLAttributes<HTMLElement> & {
8  text: string
9  as?: As
10}
11 
12export function KineticText({
13  text,
14  as: Tag = "h1",
15  className = "",
16  style,
17  ...rest
18}: KineticTextProps) {
19  const mergedStyle = {
20    "--hover-padding": "calc(1em / 12)",
21    "--text-stroke-width": "calc(1em * 125 / 6000)",
22    ...(style as React.CSSProperties | undefined),
23  } as React.CSSProperties
24 
25  return (
26    <Tag
27      {...rest}
28      className={cn("flex flex-wrap font-[300]", className)}
29      style={mergedStyle}
30    >
31      {text.split("").map((letter, i) => (
32        <span
33          key={i}
34          aria-hidden="true"
35          className="[will-change:font-weight,-webkit-text-stroke-width,padding] [-webkit-text-stroke-color:transparent] [-webkit-text-stroke-width:var(--text-stroke-width)] [transition:font-weight_0.4s,_-webkit-text-stroke-color_0.4s,_padding_0.4s] hover:[padding-inline:var(--hover-padding)] hover:font-[900] hover:[-webkit-text-stroke-color:currentcolor] hover:[-webkit-text-stroke-width:calc(var(--text-stroke-width)*2)] has-[+span+span:hover]:font-[400] has-[+span:hover]:[padding-inline:var(--hover-padding)] has-[+span:hover]:font-[600] [:hover+&]:[padding-inline:var(--hover-padding)] [:hover+&]:font-[600] [:hover+span+&]:font-[400]"
36        >
37          {letter === " " ? "\u00A0" : letter}
38        </span>
39      ))}
40      <span className="sr-only">{text}</span>
41    </Tag>
42  )
43}