{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-testimonials",
  "title": "Animated Testimonials",
  "description": "Stacked card testimonial carousel with word-by-word blur reveal animation.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/animated-testimonials.tsx",
      "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useState } from \"react\"\nimport { AnimatePresence, motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface Testimonial {\n  quote: string\n  name: string\n  designation: string\n  src: string\n}\n\nexport interface AnimatedTestimonialsProps {\n  testimonials: Testimonial[]\n  autoplay?: boolean\n  className?: string\n}\n\nfunction ArrowLeft() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n  )\n}\n\nfunction ArrowRight() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  )\n}\n\nfunction randomRotate(seed: number) {\n  // Deterministic rotation offset based on index so stacked images fan out\n  const offsets = [-8, -4, 4, 8, -6, 6, -2, 2]\n  return offsets[seed % offsets.length]\n}\n\nexport function AnimatedTestimonials({\n  testimonials,\n  autoplay = true,\n  className,\n}: AnimatedTestimonialsProps) {\n  const [active, setActive] = useState(0)\n\n  const handleNext = useCallback(() => {\n    setActive((prev) => (prev + 1) % testimonials.length)\n  }, [testimonials.length])\n\n  const handlePrev = () => {\n    setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length)\n  }\n\n  const isActive = (index: number) => index === active\n\n  useEffect(() => {\n    if (!autoplay) return\n    const interval = setInterval(handleNext, 5000)\n    return () => clearInterval(interval)\n  }, [autoplay, handleNext])\n\n  const words = testimonials[active].quote.split(\" \")\n\n  return (\n    <div className={cn(\"mx-auto max-w-sm px-4 py-12 font-sans md:max-w-4xl md:px-8 lg:px-12\", className)}>\n      <div className=\"relative grid grid-cols-1 gap-12 md:grid-cols-2\">\n        {/* Stacked Images */}\n        <div>\n          <div className=\"relative h-72 w-full\">\n            <AnimatePresence>\n              {testimonials.map((testimonial, index) => (\n                <motion.div\n                  key={testimonial.src}\n                  initial={{\n                    opacity: 0,\n                    scale: 0.9,\n                    z: -100,\n                    rotate: randomRotate(index),\n                  }}\n                  animate={{\n                    opacity: isActive(index) ? 1 : 0.7,\n                    scale: isActive(index) ? 1 : 0.95,\n                    z: isActive(index) ? 0 : -100,\n                    rotate: isActive(index) ? 0 : randomRotate(index),\n                    zIndex: isActive(index)\n                      ? 40\n                      : testimonials.length + 2 - Math.abs(active - index),\n                    y: isActive(index) ? [0, -40, 0] : 0,\n                  }}\n                  exit={{\n                    opacity: 0,\n                    scale: 0.9,\n                    z: 100,\n                    rotate: randomRotate(index),\n                  }}\n                  transition={{\n                    duration: 0.4,\n                    ease: \"easeInOut\",\n                  }}\n                  className=\"absolute inset-0 origin-bottom\"\n                >\n                  <img\n                    src={testimonial.src}\n                    alt={testimonial.name}\n                    className=\"h-full w-full rounded-3xl object-cover object-center\"\n                    draggable={false}\n                  />\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n\n        {/* Quote + Controls */}\n        <div className=\"flex flex-col justify-between py-4\">\n          <motion.div\n            key={active}\n            initial={{ y: 20, opacity: 0 }}\n            animate={{ y: 0, opacity: 1 }}\n            exit={{ y: -20, opacity: 0 }}\n            transition={{ duration: 0.2, ease: \"easeInOut\" }}\n          >\n            <h3 className=\"text-2xl font-bold text-foreground\">\n              {testimonials[active].name}\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {testimonials[active].designation}\n            </p>\n            <motion.p className=\"mt-6 text-base text-foreground/80\">\n              {words.map((word, index) => (\n                <motion.span\n                  key={index}\n                  initial={{ filter: \"blur(10px)\", opacity: 0, y: 5 }}\n                  animate={{ filter: \"blur(0px)\", opacity: 1, y: 0 }}\n                  transition={{\n                    duration: 0.2,\n                    ease: \"easeInOut\",\n                    delay: 0.02 * index,\n                  }}\n                  className=\"inline-block\"\n                >\n                  {word}&nbsp;\n                </motion.span>\n              ))}\n            </motion.p>\n          </motion.div>\n\n          <div className=\"mt-8 flex gap-3\">\n            <button\n              onClick={handlePrev}\n              className=\"group flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:bg-muted\"\n              aria-label=\"Previous testimonial\"\n            >\n              <span className=\"block transition-transform group-hover:-translate-x-0.5\">\n                <ArrowLeft />\n              </span>\n            </button>\n            <button\n              onClick={handleNext}\n              className=\"group flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:bg-muted\"\n              aria-label=\"Next testimonial\"\n            >\n              <span className=\"block transition-transform group-hover:translate-x-0.5\">\n                <ArrowRight />\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/animated-testimonials.tsx"
    }
  ],
  "type": "registry:ui"
}