Shimmering Text

1"use client";
2 
3import type { HTMLMotionProps, Variants } from "motion/react";
4import { motion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9export type ShimmeringTextProps = Omit<HTMLMotionProps<"span">, "children"> & {
10  text: string;
11  duration?: number;
12  isStopped?: boolean;
13};
14 
15export function ShimmeringText({
16  text,
17  duration = 1,
18  isStopped = false,
19  className,
20  ...props
21}: ShimmeringTextProps) {
22  const createCharVariants = React.useCallback(
23    (charIndex: number): Variants => ({
24      running: {
25        color: ["var(--color)", "var(--shimmering-color)", "var(--color)"],
26        transition: {
27          duration,
28          repeat: Infinity,
29          repeatType: "loop" as const,
30          repeatDelay: text.length * 0.05,
31          delay: (charIndex * duration) / text.length,
32          ease: "easeInOut",
33        },
34      },
35      stopped: {
36        color: "var(--color)",
37        transition: {
38          duration: duration * 0.5,
39          ease: "easeOut",
40        },
41      },
42    }),
43    [duration, text.length]
44  );
45 
46  return (
47    <motion.span
48      className={cn(
49        "inline-block select-none",
50        "[--color:var(--color-zinc-400)] [--shimmering-color:var(--color-zinc-950)]",
51        "dark:[--color:var(--color-zinc-600)] dark:[--shimmering-color:var(--color-zinc-50)]",
52        className
53      )}
54      {...props}
55    >
56      {text?.split("")?.map((char, i) => (
57        <motion.span
58          key={i}
59          className="inline-block whitespace-pre"
60          initial="stopped"
61          animate={isStopped ? "stopped" : "running"}
62          variants={createCharVariants(i)}
63        >
64          {char}
65        </motion.span>
66      ))}
67    </motion.span>
68  );
69}