Text Shine

1"use client";
2 
3import { motion, useAnimationControls, useReducedMotion } from "motion/react";
4import { useCallback, useEffect, useRef } from "react";
5 
6interface TextShineProps {
7  text: string;
8  /** Colour of the highlight that sweeps across the text. */
9  shineColor?: string;
10  /** Colour of the text itself. Any CSS colour, including a custom property. */
11  baseColor?: string;
12  /** Seconds for one sweep. */
13  duration?: number;
14  className?: string;
15}
16 
17/**
18 * Text with a highlight that sweeps across it.
19 *
20 * `baseColor` defaults to the theme's foreground rather than a hardcoded
21 * `#222`, which was all but invisible against a dark background. Because the
22 * text is painted with `background-clip: text`, the base colour has to be a
23 * real colour value — `currentColor` resolves to `transparent` here.
24 */
25export function TextShine({
26  text,
27  shineColor = "#FFD700",
28  baseColor = "var(--foreground)",
29  duration = 5,
30  className = "",
31}: TextShineProps) {
32  const controls = useAnimationControls();
33  const textRef = useRef<HTMLSpanElement>(null);
34  const prefersReducedMotion = useReducedMotion();
35 
36  const updateAnimation = useCallback(() => {
37    const element = textRef.current;
38    if (!element || prefersReducedMotion) return;
39 
40    const textWidth = element.offsetWidth;
41 
42    controls.start({
43      backgroundPosition: [`${textWidth * -0.5}px`, `${textWidth * 1.25}px`],
44      transition: { duration, ease: "linear", repeat: Infinity },
45    });
46  }, [controls, duration, prefersReducedMotion]);
47 
48  useEffect(() => {
49    updateAnimation();
50    window.addEventListener("resize", updateAnimation);
51    return () => window.removeEventListener("resize", updateAnimation);
52  }, [updateAnimation]);
53 
54  return (
55    <motion.span
56      ref={textRef}
57      className={`relative w-fit bg-clip-text text-2xl font-bold text-transparent ${className}`}
58      style={{
59        backgroundImage: `linear-gradient(to right, ${baseColor} 0%, ${shineColor} 10%, ${baseColor} 20%)`,
60        backgroundSize: "200%",
61      }}
62      animate={controls}
63    >
64      {text}
65    </motion.span>
66  );
67}
68 
69export default TextShine;