Shimmer Text

1"use client";
2 
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6type Variant =
7  | "default"
8  | "secondary"
9  | "destructive"
10  | "red"
11  | "blue"
12  | "green"
13  | "yellow"
14  | "purple"
15  | "pink"
16  | "orange"
17  | "cyan"
18  | "indigo"
19  | "violet"
20  | "rose"
21  | "amber"
22  | "lime"
23  | "emerald"
24  | "sky"
25  | "slate"
26  | "fuchsia";
27 
28interface ShimmerTextProps {
29  children: React.ReactNode;
30  className?: string;
31  variant?: Variant;
32  duration?: number;
33  delay?: number;
34  spread?: number;
35}
36 
37const variantMap: Record<Variant, string> = {
38  default: "",
39  secondary: "text-secondary-foreground",
40  destructive: "text-destructive dark:text-destructive-foreground",
41  red: "text-red-600 dark:text-red-400",
42  blue: "text-blue-600 dark:text-blue-400",
43  green: "text-green-600 dark:text-green-400",
44  yellow: "text-yellow-600 dark:text-yellow-400",
45  purple: "text-purple-600 dark:text-purple-400",
46  pink: "text-pink-600 dark:text-pink-400",
47  orange: "text-orange-600 dark:text-orange-400",
48  cyan: "text-cyan-600 dark:text-cyan-400",
49  indigo: "text-indigo-600 dark:text-indigo-400",
50  violet: "text-violet-600 dark:text-violet-400",
51  rose: "text-rose-600 dark:text-rose-400",
52  amber: "text-amber-600 dark:text-amber-400",
53  lime: "text-lime-600 dark:text-lime-400",
54  emerald: "text-emerald-600 dark:text-emerald-400",
55  sky: "text-sky-600 dark:text-sky-400",
56  slate: "text-slate-600 dark:text-slate-400",
57  fuchsia: "text-fuchsia-600 dark:text-fuchsia-400",
58};
59 
60export function ShimmerText({
61  children,
62  className,
63  variant = "default",
64  duration = 1.5,
65  delay = 1.5,
66}: ShimmerTextProps) {
67  return (
68    <div className="group overflow-hidden">
69      <div>
70        <motion.div
71          className={cn(
72            "inline-block [--shimmer-contrast:rgba(255,255,255,0.6)] dark:[--shimmer-contrast:rgba(0,0,0,0.5)]",
73            variantMap[variant],
74            className,
75          )}
76          style={{
77            WebkitTextFillColor: "transparent",
78            background:
79              "currentColor linear-gradient(to right, currentColor 0%, var(--shimmer-contrast) 40%, var(--shimmer-contrast) 60%, currentColor 100%)",
80            WebkitBackgroundClip: "text",
81            backgroundClip: "text",
82            backgroundRepeat: "no-repeat",
83            backgroundSize: "50% 200%",
84          } as React.CSSProperties}
85          initial={{
86            backgroundPositionX: "250%",
87          }}
88          animate={{
89// … truncated