"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { cn } from "@/lib/utils"; export interface Testimonial { quote: string; name: string; title: string; gradient: string; } function Avatar({ initials, gradient, size = 44, ring = false, }: { initials: string; gradient: string; size?: number; ring?: boolean; }) { return (

{initials}

); } export function AnimatedTestimonials({ testimonials, interval = 4000, className, }: { testimonials: Testimonial[]; interval?: number; className?: string; }) { const [index, setIndex] = useState(0); useEffect(() => { const id = setInterval(() => { setIndex((i) => (i + 1) % testimonials.length); }, interval); return () => clearInterval(id); }, [testimonials.length, interval]); const active = testimonials[index]; const words = active.quote.split(" "); return (

{testimonials.map((t, i) => ( ))}

{words.map((word, i) => ( {word} ))}

{active.name}

{active.title}

); } const demoTestimonials: Testimonial[] = [ { quote: "Lumenite cut our build time in half, every component just works, out of the box.", name: "Ava Chen", title: "Product Lead, Northstar", gradient: "linear-gradient(135deg, #7c6cff, #5b8cff)", }, { quote: "The polish here is genuinely Aceternity-level. Our designers stopped filing tickets.", name: "Marcus Reed", title: "Design Director, Fluent", gradient: "linear-gradient(135deg, #ff8a5b, #ff5b9c)", }, { quote: "We shipped a marketing site in a weekend. The motion defaults sell themselves.", name: "Priya Nair", title: "Founder, Kindred", gradient: "linear-gradient(135deg, #5bffb0, #5b8cff)", }, ]; export default function Demo() { return (

); }

Animated Testimonials