shimmering-text-demo

1"use client"
2 
3import { useEffect, useState } from "react"
4import { AnimatePresence, motion } from "motion/react"
5 
6import { ShimmeringText } from "@/components/ui/shimmering-text"
7 
8const phrases = [
9  "Agent is thinking...",
10  "Processing your request...",
11  "Analyzing the data...",
12  "Generating response...",
13  "Almost there...",
14]
15 
16export default function TextShimmerDemo() {
17  const [currentIndex, setCurrentIndex] = useState(0)
18 
19  useEffect(() => {
20    const interval = setInterval(() => {
21      setCurrentIndex((prev) => (prev + 1) % phrases.length)
22    }, 3000)
23 
24    return () => clearInterval(interval)
25  }, [])
26 
27  return (
28    <div className="bg-card w-full rounded-lg border p-6">
29      <div className="mb-4">
30        <h3 className="text-lg font-semibold">Text Shimmer Effect</h3>
31        <p className="text-muted-foreground text-sm">
32          Animated gradient text with automatic cycling
33        </p>
34      </div>
35 
36      <div className="space-y-4">
37        <div className="bg-muted/10 flex items-center justify-center rounded-lg py-8">
38          <AnimatePresence mode="wait">
39            <motion.div
40              key={currentIndex}
41              initial={{ opacity: 0, y: 10 }}
42              animate={{ opacity: 1, y: 0 }}
43              exit={{ opacity: 0, y: -10 }}
44              transition={{ duration: 0.3 }}
45            >
46              <ShimmeringText text={phrases[currentIndex]} />
47            </motion.div>
48          </AnimatePresence>
49        </div>
50      </div>
51    </div>
52  )
53}