Shimmering Text

1"use client";
2 
3import { motion, useReducedMotion, type Variants } from "motion/react";
4import { type ComponentProps, useCallback } from "react";
5import { cn } from "@/lib/utils";
6 
7export type ShimmeringTextProps = Omit<
8  ComponentProps<typeof motion.span>,
9  "children"
10> & {
11  /** The text to render with the shimmering effect. */
12  text: string;
13  /**
14   * Duration in seconds for one shimmer cycle.
15   * @defaultValue 1
16   */
17  duration?: number;
18  /**
19   * Pause the shimmer (e.g. when the hero leaves the viewport).
20   * @defaultValue false
21   */
22  paused?: boolean;
23  /**
24   * Legacy alias for `paused`.
25   * @defaultValue false
26   */
27  isStopped?: boolean;
28};
29 
30export function ShimmeringText({
31  text,
32  duration = 1,
33  isStopped = false,
34  paused = false,
35  className,
36  ...props
37}: ShimmeringTextProps) {
38  const reducedMotion = useReducedMotion();
39  const stopped = isStopped || paused || reducedMotion === true;
40 
41  const createCharVariants = useCallback(
42    (charIndex: number): Variants => ({
43      running: {
44        color: ["var(--color)", "var(--shimmering-color)", "var(--color)"],
45        transition: {
46          duration,
47          repeat: Number.POSITIVE_INFINITY,
48          repeatType: "loop",
49          repeatDelay: text.length * 0.05,
50          delay: (charIndex * duration) / text.length,
51          ease: "easeInOut",
52        },
53      },
54      stopped: {
55        color: "var(--color)",
56        transition: {
57          duration: duration * 0.5,
58          ease: "easeOut",
59        },
60      },
61    }),
62    [duration, text.length]
63  );
64 
65  return (
66    <motion.span
67      className={cn(
68        "inline-flex select-none items-center leading-none",
69        "[--color:var(--muted-foreground)] [--shimmering-color:var(--foreground)]",
70        className
71      )}
72      {...props}
73    >
74      {text.split("").map((char, index) => (
75        <motion.span
76          animate={stopped ? "stopped" : "running"}
77          aria-hidden
78          className="inline-block whitespace-pre leading-none"
79          initial="stopped"
80          // biome-ignore lint/suspicious/noArrayIndexKey: static label text, order never changes
81          key={index}
82          variants={createCharVariants(index)}
83        >
84          {char}
85        </motion.span>
86      ))}
87      <span className="sr-only">{text}</span>
88    </motion.span>
89  );
90}