Shimmer Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Shimmer Text
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { cn } from "@/lib/utils";
15 
16interface Text_01Props {
17  text: string;
18  className?: string;
19}
20 
21export default function ShimmerText({
22  text = "Text Shimmer",
23  className,
24}: Text_01Props) {
25  return (
26    <div className="flex items-center justify-center p-8">
27      <motion.div
28        animate={{ opacity: 1, y: 0 }}
29        className="relative overflow-hidden px-4 py-2"
30        initial={{ opacity: 0, y: 20 }}
31        transition={{ duration: 0.5 }}
32      >
33        <motion.h1
34          animate={{
35            backgroundPosition: ["200% center", "-200% center"],
36          }}
37          className={cn(
38            "bg-[length:200%_100%] bg-gradient-to-r from-neutral-950 via-neutral-400 to-neutral-950 bg-clip-text font-bold text-3xl text-transparent dark:from-white dark:via-neutral-600 dark:to-white",
39            className
40          )}
41          transition={{
42            duration: 2.5,
43            ease: "linear",
44            repeat: Number.POSITIVE_INFINITY,
45          }}
46        >
47          {text}
48        </motion.h1>
49      </motion.div>
50    </div>
51  );
52}