Aurora Text

1"use client";
2 
3import * as React from "react";
4 
5export type AuroraTextProps = React.HTMLAttributes<HTMLSpanElement> & {
6  children: React.ReactNode;
7  /** Gradient stops the aurora cycles through. Defaults to a rainbow spectrum. */
8  colors?: string[];
9  /** Speed multiplier — `1` ≈ 10s per cycle, higher is faster. */
10  speed?: number;
11};
12 
13// Full-spectrum rainbow, looped back to the first stop for a seamless cycle.
14const RAINBOW_COLORS = [
15  "#ff2d55",
16  "#ff9500",
17  "#ffd60a",
18  "#34c759",
19  "#00c7be",
20  "#0a84ff",
21  "#5e5ce6",
22  "#bf5af2",
23];
24 
25const AuroraText = React.forwardRef<HTMLSpanElement, AuroraTextProps>(
26  (
27    {
28      children,
29      className,
30      colors = RAINBOW_COLORS,
31      speed = 1,
32      style,
33      ...props
34    },
35    ref,
36  ) => {
37    const stops = [...colors, colors[0]].join(", ");
38 
39    // The gradient runs on an infinite background-position keyframe (main-thread
40    // paint). Pause it whenever the text is off screen so it costs nothing while
41    // idle — resumes seamlessly on scroll-in.
42    const gradientRef = React.useRef<HTMLSpanElement>(null);
43    React.useEffect(() => {
44      const el = gradientRef.current;
45      if (!el || typeof IntersectionObserver === "undefined") return;
46      const io = new IntersectionObserver(
47        ([entry]) => {
48          el.style.animationPlayState = entry.isIntersecting ? "" : "paused";
49        },
50        { rootMargin: "128px" },
51      );
52      io.observe(el);
53      return () => io.disconnect();
54    }, []);
55 
56    return (
57      <span
58        ref={ref}
59        data-slot="aurora-text"
60        className={`relative inline-block ${className ?? ""}`}
61        {...props}
62      >
63        <span className="sr-only">{children}</span>
64        <span
65          ref={gradientRef}
66          aria-hidden="true"
67          className="animate-aurora-text bg-[length:200%_auto] bg-clip-text text-transparent motion-reduce:animate-none"
68          style={
69            {
70              backgroundImage: `linear-gradient(135deg, ${stops})`,
71              "--aurora-text-speed": `${10 / speed}s`,
72              ...style,
73            } as React.CSSProperties
74          }
75        >
76          {children}
77        </span>
78      </span>
79    );
80  },
81);
82AuroraText.displayName = "AuroraText";
83 
84export { AuroraText };