shimmering-text

1"use client"
2 
3import React, { useMemo, useRef } from "react"
4import { motion, useInView, UseInViewOptions } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface ShimmeringTextProps {
9  /** Text to display with shimmer effect */
10  text: string
11  /** Animation duration in seconds */
12  duration?: number
13  /** Delay before starting animation */
14  delay?: number
15  /** Whether to repeat the animation */
16  repeat?: boolean
17  /** Pause duration between repeats in seconds */
18  repeatDelay?: number
19  /** Custom className */
20  className?: string
21  /** Whether to start animation when component enters viewport */
22  startOnView?: boolean
23  /** Whether to animate only once */
24  once?: boolean
25  /** Margin for in-view detection (rootMargin) */
26  inViewMargin?: UseInViewOptions["margin"]
27  /** Shimmer spread multiplier */
28  spread?: number
29  /** Base text color */
30  color?: string
31  /** Shimmer gradient color */
32  shimmerColor?: string
33}
34 
35export function ShimmeringText({
36  text,
37  duration = 2,
38  delay = 0,
39  repeat = true,
40  repeatDelay = 0.5,
41  className,
42  startOnView = true,
43  once = false,
44  inViewMargin,
45  spread = 2,
46  color,
47  shimmerColor,
48}: ShimmeringTextProps) {
49  const ref = useRef<HTMLSpanElement>(null)
50  const isInView = useInView(ref, { once, margin: inViewMargin })
51 
52  // Calculate dynamic spread based on text length
53  const dynamicSpread = useMemo(() => {
54    return text.length * spread
55  }, [text, spread])
56 
57  // Determine if we should start animation
58  const shouldAnimate = !startOnView || isInView
59 
60  return (
61    <motion.span
62      ref={ref}
63      className={cn(
64        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
65        "[--base-color:var(--muted-foreground)] [--shimmer-color:var(--foreground)]",
66        "[background-repeat:no-repeat,padding-box]",
67        "[--shimmer-bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--shimmer-color),transparent_calc(50%+var(--spread)))]",
68        "dark:[--base-color:var(--muted-foreground)] dark:[--shimmer-color:var(--foreground)]",
69        className
70      )}
71      style={
72        {
73          "--spread": `${dynamicSpread}px`,
74          ...(color && { "--base-color": color }),
75          ...(shimmerColor && { "--shimmer-color": shimmerColor }),
76          backgroundImage: `var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color))`,
77        } as React.CSSProperties
78      }
79      initial={{
80        backgroundPosition: "100% center",
81// … truncated