Text Shimmer

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion } from "motion/react";
5import React, { useMemo, type JSX } from "react";
6 
7export type TextShimmerProps = {
8  children: string;
9  as?: React.ElementType;
10  className?: string;
11  duration?: number;
12  spread?: number;
13  delay?: number;
14  repeatDelay?: number;
15};
16 
17const TextShimmer = ({
18  children,
19  as: Component = "p",
20  className,
21  duration = 2,
22  spread = 2,
23  delay = 0,
24  repeatDelay = 0,
25}: TextShimmerProps) => {
26  const MotionComponent = motion.create(
27    Component as keyof JSX.IntrinsicElements,
28  );
29 
30  const dynamicSpread = useMemo(() => {
31    return children.length * spread;
32  }, [children, spread]);
33 
34  return (
35    <MotionComponent
36      className={cn(
37        "relative inline-block bg-size-[250%_100%,auto] bg-clip-text",
38        "text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
39        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
40        "dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
41        className,
42      )}
43      initial={{ backgroundPosition: "105% center" }}
44      animate={{ backgroundPosition: "-5% center" }}
45      transition={{
46        repeat: Number.POSITIVE_INFINITY,
47        duration,
48        ease: "linear",
49        delay,
50        repeatDelay,
51      }}
52      style={
53        {
54          "--spread": `${dynamicSpread}px`,
55          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
56        } as React.CSSProperties
57      }
58    >
59      {children}
60    </MotionComponent>
61  );
62};
63 
64export default React.memo(TextShimmer);