{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shake-testimonial-card",
  "title": "Shake Testimonial Card",
  "description": "An eye-catching testimonial card with playful animations.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/shake-testimonial-card.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useState, useEffect, useCallback } from \"react\";\r\nimport { motion, AnimatePresence } from \"motion/react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface Testimonial {\r\n  id: number;\r\n  name: string;\r\n  role: string;\r\n  avatar: string;\r\n  content: string;\r\n  color: string;\r\n  textColor: string;\r\n}\r\n\r\n// Change Here\r\nconst testimonials: Testimonial[] = [\r\n  {\r\n    id: 1,\r\n    name: \"Marcus Thorne\",\r\n    role: \"Head of Product, EcoStream\",\r\n    avatar: \"/ui/memoji/1.svg\",\r\n    content:\r\n      \"The interface is so intuitive that our team was up and running in hours. Highly recommended for fast-moving startups.\",\r\n    color: \"#E0F2FE\",\r\n    textColor: \"#1E3A8A\",\r\n  },\r\n  {\r\n    id: 2,\r\n    name: \"Elena Rodriguez\",\r\n    role: \"Director of UX, CreativeFlow\",\r\n    avatar: \"/ui/memoji/6.svg\",\r\n    content:\r\n      \"We've tried dozens of tools, but this one stands out for its elegant design. It's a game-changer for our workflow.\",\r\n    color: \"#F3E8FF\",\r\n    textColor: \"#581C87\",\r\n  },\r\n  {\r\n    id: 3,\r\n    name: \"Sarah Jenkins\",\r\n    role: \"CEO, TechNova\",\r\n    avatar: \"/ui/memoji/4.svg\",\r\n    content:\r\n      \"Scaling our infrastructure used to be a nightmare until we found this platform. Now we can focus on building features.\",\r\n    color: \"#DCFCE7\",\r\n    textColor: \"#064E3B\",\r\n  },\r\n  {\r\n    id: 4,\r\n    name: \"David Kim\",\r\n    role: \"CTO, NextGen Solutions\",\r\n    avatar: \"/ui/memoji/6.svg\",\r\n    content:\r\n      \"The security features alone are worth every penny. Our clients feel safer knowing their data is protected by encryption.\",\r\n    color: \"#FEF9C3\",\r\n    textColor: \"#713F12\",\r\n  },\r\n];\r\n\r\nexport default function ShakeTestimonial() {\r\n  const [cards, setCards] = useState(testimonials);\r\n  const [isAnimating, setIsAnimating] = useState(false);\r\n\r\n  const handleNext = useCallback(() => {\r\n    if (isAnimating) return;\r\n    setIsAnimating(true);\r\n\r\n    setTimeout(() => {\r\n      setCards((prev) => {\r\n        const [first, ...rest] = prev;\r\n        return [...rest, first];\r\n      });\r\n      setIsAnimating(false);\r\n    }, 600);\r\n  }, [isAnimating]);\r\n\r\n  useEffect(() => {\r\n    const interval = setInterval(() => {\r\n      handleNext();\r\n    }, 1500);\r\n    return () => clearInterval(interval);\r\n  }, [handleNext]);\r\n\r\n  return (\r\n    <div className=\"flex items-center justify-center w-full bg-transparent p-4 overflow-hidden py-4 min-h-[650px] max-sm:min-h-[500px]\">\r\n      <div\r\n        className=\"relative w-full max-w-[370px] h-[240px] lg:max-w-[440px] lg:h-[310px] md:h-[320px]\"\r\n        style={{ perspective: \"1200px\" }}\r\n      >\r\n        <AnimatePresence mode=\"popLayout\">\r\n          {cards.map((card, index) => {\r\n            const isTop = index === 0;\r\n\r\n            return (\r\n              <motion.div\r\n                key={card.id}\r\n                layout\r\n                style={{\r\n                  backgroundColor: card.color,\r\n                  zIndex: testimonials.length - index,\r\n                  position: \"absolute\",\r\n                  top: 0,\r\n                  left: 0,\r\n                  transformOrigin: \"center center\",\r\n                  borderColor: `${card.textColor}20`,\r\n                }}\r\n                initial={{\r\n                  scale: 0.7,\r\n                  opacity: 0,\r\n                  y: 40,\r\n                  rotateX: -20,\r\n                }}\r\n                animate={{\r\n                  scale:\r\n                    isTop && isAnimating\r\n                      ? [1, 1.05, 1, 1.05, 1, 1, 0.9]\r\n                      : 1 - index * 0.05,\r\n                  y:\r\n                    isTop && isAnimating\r\n                      ? [0, 0, 0, 0, 0, 0, -300]\r\n                      : index * 15,\r\n                  rotateX:\r\n                    isTop && isAnimating ? [0, 0, 0, 0, 0, 0, 15] : -index * 2,\r\n                  x: isTop && isAnimating ? [0, -12, 12, -12, 12, 0, 0] : 0,\r\n                  rotate: isTop && isAnimating ? [0, -2, 2, -2, 2, 0, -5] : 0,\r\n\r\n                  opacity: index < 4 ? 1 : 0,\r\n\r\n                  transition:\r\n                    isTop && isAnimating\r\n                      ? {\r\n                          duration: 0.6,\r\n                          times: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 1],\r\n                          ease: \"easeOut\",\r\n                        }\r\n                      : {\r\n                          type: \"spring\",\r\n                          stiffness: 400,\r\n                          damping: 30,\r\n                          mass: 0.6,\r\n                        },\r\n                }}\r\n                className={cn(\r\n                  \"w-full h-full rounded-[48px] p-8 md:p-10  shadow-[0_12px_20px_rgba(0,0,0,0.03)]\",\r\n                  \"border flex flex-col justify-between overflow-hidden\",\r\n                  \"cursor-pointer select-none ring-1 ring-black/5 backdrop-blur-3xl\",\r\n                  \"preserve-3d transition-shadow duration-500 hover:shadow-[0_13px_60px_rgba(0,0,0,0.1)]\"\r\n                )}\r\n                onClick={handleNext}\r\n              >\r\n                <div className=\"flex flex-col gap-4 md:gap-6 \">\r\n                  <div className=\"flex items-center gap-3\">\r\n                    <div className=\"flex items-center justify-center w-12 h-12 bg-white/50 rounded-2xl shadow-inner border border-black/5 overflow-hidden shrink-0 lg:w-14 lg:h-14 max-sm:rounded-xl\">\r\n                      <img\r\n                        src={card.avatar}\r\n                        className=\"w-full h-full object-contain\"\r\n                        alt={card.name}\r\n                      />\r\n                    </div>\r\n\r\n                    <div className=\"flex flex-col justify-center\">\r\n                      <h3\r\n                        className=\"font-bold text-lg md:text-xl leading-tight !p-0 !m-0 max-sm:text-base \"\r\n                        style={{ color: card.textColor }}\r\n                      >\r\n                        {card.name}\r\n                      </h3>\r\n                      <p\r\n                        className=\"text-xs lg:text-sm opacity-60  !p-0 !m-0  max-sm:text-xss\"\r\n                        style={{ color: card.textColor }}\r\n                      >\r\n                        {card.role}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n                  <p\r\n                    className=\"text-xl font-serif font-medium leading-[1.3] tracking-tight italic  lg:text-2xl md:text-2xl max-sm:text-lg !p-0 !m-0\"\r\n                    style={{ color: card.textColor }}\r\n                  >\r\n                    \"{card.content}\"\r\n                  </p>\r\n                </div>\r\n              </motion.div>\r\n            );\r\n          })}\r\n        </AnimatePresence>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}