Shimmering Text

1"use client"
2 
3import * as React from "react"
4import type { Variants } from "motion/react"
5import { motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9export type ShimmeringTextProps = Omit<
10  React.ComponentProps<typeof motion.span>,
11  "children"
12> & {
13  /** The text to render with the shimmering effect. */
14  text: string
15  /**
16   * Duration in seconds for one shimmer cycle.
17   * @defaultValue 1 */
18  duration?: number
19  /**
20   * Whether the shimmer animation is paused.
21   * @defaultValue false */
22  isStopped?: boolean
23}
24 
25export function ShimmeringText({
26  text,
27  duration = 1,
28  isStopped = false,
29  className,
30  ...props
31}: ShimmeringTextProps) {
32  const createCharVariants = React.useCallback(
33    (charIndex: number): Variants => ({
34      running: {
35        color: ["var(--color)", "var(--shimmering-color)", "var(--color)"],
36        transition: {
37          duration,
38          repeat: Infinity,
39          repeatType: "loop" as const,
40          repeatDelay: text.length * 0.05,
41          delay: (charIndex * duration) / text.length,
42          ease: "easeInOut",
43        },
44      },
45      stopped: {
46        color: "var(--color)",
47        transition: {
48          duration: duration * 0.5,
49          ease: "easeOut",
50        },
51      },
52    }),
53    [duration, text.length]
54  )
55 
56  return (
57    <motion.span
58      className={cn(
59        "inline-block select-none",
60        "[--color:var(--muted-foreground)] [--shimmering-color:var(--foreground)]",
61        className
62      )}
63      {...props}
64    >
65      {text?.split("")?.map((char, i) => (
66        <motion.span
67          key={i}
68          className="inline-block whitespace-pre"
69          initial="stopped"
70          animate={isStopped ? "stopped" : "running"}
71          variants={createCharVariants(i)}
72          aria-hidden
73        >
74          {char}
75        </motion.span>
76      ))}
77      <span className="sr-only">{text}</span>
78    </motion.span>
79  )
80}