Spinning Circular Text

1import { cn } from "@/lib/utils"
2 
3export type SpinningCircularTextProps = Omit<
4  React.ComponentProps<"div">,
5  "children"
6> & {
7  text: string
8 
9  /**
10   * @defaultValue 1
11   * */
12  charSpacing?: number
13 
14  /**
15   * @defaultValue 1rem
16   * */
17  fontSize?: string
18 
19  /**
20   * Class names applied to the spinning ring, e.g. to override the
21   * animation duration (`duration-[10s]`) or easing.
22   * */
23  spinClassName?: string
24 
25  /**
26   * Customize how each character is rendered, e.g. to wrap it in a
27   * `motion.span` for per-character effects. The returned node is placed
28   * inside a positioned wrapper, so positioning is handled for you.
29   * */
30  renderChar?: (char: string, index: number) => React.ReactNode
31}
32 
33export function SpinningCircularText({
34  text,
35  charSpacing = 1,
36  fontSize = "1rem",
37  spinClassName,
38  renderChar,
39  className,
40  style,
41  ...props
42}: SpinningCircularTextProps) {
43  return (
44    <div
45      className={cn(
46        "grid size-(--sc-container-size) place-items-center font-mono font-medium uppercase select-none",
47        className
48      )}
49      style={
50        {
51          "--sc-size": fontSize,
52          "--sc-char-count": text.length,
53          "--sc-char-spacing": charSpacing,
54          "--sc-inner-angle": "calc((360 / var(--sc-char-count)) * 1deg)",
55          "--sc-radius-factor":
56            "calc(var(--sc-char-spacing) / sin(var(--sc-inner-angle)))",
57          "--sc-radius": "calc(var(--sc-radius-factor) * -1ch)",
58          "--sc-container-size":
59            "calc(var(--sc-radius-factor) * var(--sc-size) * 2)",
60          ...style,
61        } as React.CSSProperties
62      }
63      {...props}
64    >
65      <div
66        className={cn(
67          "relative animate-spin-ccw text-(size:--sc-size) leading-none",
68          "*:absolute *:top-1/2 *:left-1/2 *:inline-block",
69          "*:[--sc-char-rotate:calc(var(--sc-inner-angle)*var(--sc-char-index))]",
70          "*:transform-[translate(-50%,-50%)_rotate(var(--sc-char-rotate))_translateY(var(--sc-radius))]",
71          spinClassName
72        )}
73        aria-hidden
74      >
75        {text.split("").map((char, index) => (
76          <span
77            key={index}
78            style={{ "--sc-char-index": index } as React.CSSProperties}
79          >
80            {renderChar ? renderChar(char, index) : char}
81          </span>
82        ))}
83      </div>
84      <span className="sr-only">{text}</span>
85    </div>
86  )
87}