{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-unlock-animation-shadcnui",
  "type": "registry:ui",
  "title": "AI Unlock Animation",
  "description": "Premium unlock animation with particles, ripples, and loading states",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/ai-unlock-animation.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ntype AIUnlockAnimationProps = {\n  autoPlay?: boolean;\n};\n\nexport function AIUnlockAnimation({ autoPlay = true }: AIUnlockAnimationProps) {\n  const [isUnlocking, setIsUnlocking] = useState(false);\n  const [isComplete, setIsComplete] = useState(false);\n\n  // Auto-start if autoplay is enabled\n  useEffect(() => {\n    if (autoPlay) {\n      setIsUnlocking(true);\n      setIsComplete(false);\n      const timer = setTimeout(() => {\n        setIsComplete(true);\n      }, 3000);\n      return () => clearTimeout(timer);\n    }\n  }, [autoPlay]);\n\n  const triggerUnlock = () => {\n    setIsUnlocking(true);\n    setIsComplete(false);\n    setTimeout(() => {\n      setIsComplete(true);\n    }, 3000);\n  };\n\n  const resetAnimation = () => {\n    setIsUnlocking(false);\n    setIsComplete(false);\n  };\n\n  // Generate minimal particles\n  const particles = Array.from({ length: 24 }, (_, i) => ({\n    id: i,\n    angle: (Math.PI * 2 * i) / 24,\n    delay: Math.random() * 0.3,\n    duration: 1.2 + Math.random() * 0.5,\n  }));\n\n  return (\n    <div className=\"relative w-full max-w-md\">\n      {/* Main content card */}\n      <motion.div\n        className=\"relative bg-card border border-border rounded-2xl p-16 shadow-sm\"\n        animate={\n          isUnlocking\n            ? {\n                boxShadow: [\n                  \"0 1px 3px 0 rgb(0 0 0 / 0.1)\",\n                  \"0 0 0 4px rgb(0 0 0 / 0.05)\",\n                  \"0 1px 3px 0 rgb(0 0 0 / 0.1)\",\n                ],\n              }\n            : {}\n        }\n        transition={{ duration: 1.5, ease: \"easeInOut\" }}\n      >\n        {/* Ripple effects */}\n        <AnimatePresence>\n          {isUnlocking && (\n            <>\n              {[0, 0.2, 0.4].map((delay, i) => (\n                <motion.div\n                  key={i}\n                  className=\"absolute inset-0 rounded-2xl border border-foreground z-0\"\n                  initial={{ scale: 1, opacity: 0.3 }}\n                  style={{ zIndex: -1 }}\n                  animate={{ scale: 2, opacity: 0 }}\n                  exit={{ opacity: 0 }}\n                  transition={{ duration: 1.5, delay, ease: \"easeOut\" }}\n                />\n              ))}\n            </>\n          )}\n        </AnimatePresence>\n\n        {/* Particle system */}\n        <AnimatePresence>\n          {isUnlocking &&\n            particles.map((particle) => (\n              <motion.div\n                key={particle.id}\n                className=\"absolute w-0.5 h-0.5 bg-foreground rounded-full\"\n                style={{\n                  left: \"50%\",\n                  top: \"50%\",\n                }}\n                initial={{ scale: 0, x: 0, y: 0, opacity: 0 }}\n                animate={{\n                  scale: [0, 1, 0],\n                  x: Math.cos(particle.angle) * 200,\n                  y: Math.sin(particle.angle) * 200,\n                  opacity: [0, 0.6, 0],\n                }}\n                transition={{\n                  duration: particle.duration,\n                  delay: particle.delay,\n                  ease: \"easeOut\",\n                }}\n              />\n            ))}\n        </AnimatePresence>\n\n        {/* AI Icon */}\n        <div className=\"relative z-10 flex flex-col items-center space-y-8\">\n          <motion.div\n            className=\"relative\"\n            animate={\n              isUnlocking\n                ? {\n                    scale: [1, 1.1, 1],\n                  }\n                : {}\n            }\n            transition={{ duration: 1.5, ease: \"easeInOut\" }}\n          >\n            {/* Minimal rings */}\n            <AnimatePresence>\n              {isUnlocking && (\n                <>\n                  <motion.div\n                    className=\"absolute inset-0 rounded-full border border-foreground\"\n                    initial={{ scale: 1, opacity: 0.4 }}\n                    animate={{ scale: 1.8, opacity: 0 }}\n                    transition={{ duration: 1.2, repeat: Infinity }}\n                  />\n                  <motion.div\n                    className=\"absolute inset-0 rounded-full border border-border\"\n                    initial={{ scale: 1, opacity: 0.3 }}\n                    animate={{ scale: 1.8, opacity: 0 }}\n                    transition={{ duration: 1.2, delay: 0.4, repeat: Infinity }}\n                  />\n                </>\n              )}\n            </AnimatePresence>\n\n            {/* AI Icon - Simple circle with sparkle */}\n            <motion.div\n              className=\"relative w-20 h-20 rounded-full border-2 border-foreground bg-card flex items-center justify-center\"\n              animate={\n                isUnlocking\n                  ? {\n                      borderColor: [\n                        \"hsl(var(--foreground))\",\n                        \"hsl(var(--muted-foreground))\",\n                        \"hsl(var(--foreground))\",\n                      ],\n                    }\n                  : {}\n              }\n              transition={{ duration: 1.5, repeat: isUnlocking ? Infinity : 0 }}\n            >\n              <svg\n                className=\"w-9 h-9 text-foreground\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n                />\n              </svg>\n            </motion.div>\n          </motion.div>\n\n          {/* Text animations */}\n          <div className=\"text-center space-y-4\">\n            <AnimatePresence mode=\"wait\">\n              {!isUnlocking && !isComplete && (\n                <motion.h2\n                  initial={{ opacity: 0, y: 10 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  exit={{ opacity: 0, y: -10 }}\n                  className=\"text-2xl font-semibold text-foreground\"\n                >\n                  Unlock Lifetime Access\n                </motion.h2>\n              )}\n\n              {isUnlocking && !isComplete && (\n                <motion.h2\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  className=\"text-2xl font-semibold text-foreground\"\n                >\n                  Activating...\n                </motion.h2>\n              )}\n\n              {isComplete && (\n                <motion.div\n                  initial={{ opacity: 0, y: 10 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  className=\"space-y-2\"\n                >\n                  <motion.h2\n                    className=\"text-2xl font-semibold text-foreground\"\n                    animate={{ scale: [1, 1.02, 1] }}\n                    transition={{ duration: 0.4 }}\n                  >\n                    Unlocked\n                  </motion.h2>\n                  <motion.p\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    transition={{ delay: 0.2 }}\n                    className=\"text-sm text-muted-foreground\"\n                  >\n                    Premium features activated\n                  </motion.p>\n                </motion.div>\n              )}\n            </AnimatePresence>\n\n            {/* Minimal loading bar */}\n            {isUnlocking && !isComplete && (\n              <motion.div\n                className=\"w-48 h-px bg-border overflow-hidden\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n              >\n                <motion.div\n                  className=\"h-full bg-foreground\"\n                  initial={{ width: \"0%\" }}\n                  animate={{ width: \"100%\" }}\n                  transition={{ duration: 2.8, ease: \"easeInOut\" }}\n                />\n              </motion.div>\n            )}\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex gap-3 pt-2\">\n            {!isUnlocking && !isComplete && (\n              <motion.button\n                onClick={triggerUnlock}\n                className=\"px-6 py-2 bg-foreground text-background text-sm font-medium rounded-md hover:opacity-90 transition-opacity\"\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n              >\n                Activate\n              </motion.button>\n            )}\n\n            {isComplete && (\n              <motion.button\n                onClick={resetAnimation}\n                className=\"px-6 py-2 border border-border text-foreground text-sm font-medium rounded-md hover:bg-accent transition-colors\"\n                initial={{ opacity: 0, y: 10 }}\n                animate={{ opacity: 1, y: 0 }}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n              >\n                Replay\n              </motion.button>\n            )}\n          </div>\n        </div>\n\n        {/* Corner accents - minimal */}\n        <AnimatePresence>\n          {isUnlocking && (\n            <>\n              {[\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"].map(\n                (corner, i) => (\n                  <motion.div\n                    key={corner}\n                    className={`absolute w-8 h-8 border-foreground ${\n                      corner === \"top-left\"\n                        ? \"top-0 left-0 border-t border-l\"\n                        : corner === \"top-right\"\n                          ? \"top-0 right-0 border-t border-r\"\n                          : corner === \"bottom-left\"\n                            ? \"bottom-0 left-0 border-b border-l\"\n                            : \"bottom-0 right-0 border-b border-r\"\n                    }`}\n                    initial={{ opacity: 0, scale: 0.8 }}\n                    animate={{ opacity: [0, 0.4, 0], scale: [0.8, 1, 1] }}\n                    transition={{ duration: 0.8, delay: i * 0.05 }}\n                  />\n                )\n              )}\n            </>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/ai-unlock-animation-shadcnui.tsx"
    }
  ]
}