AI Unlock Animation

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { useEffect, useState } from "react";
5 
6type AIUnlockAnimationProps = {
7  autoPlay?: boolean;
8};
9 
10export function AIUnlockAnimation({ autoPlay = true }: AIUnlockAnimationProps) {
11  const [isUnlocking, setIsUnlocking] = useState(false);
12  const [isComplete, setIsComplete] = useState(false);
13 
14  // Auto-start if autoplay is enabled
15  useEffect(() => {
16    if (autoPlay) {
17      setIsUnlocking(true);
18      setIsComplete(false);
19      const timer = setTimeout(() => {
20        setIsComplete(true);
21      }, 3000);
22      return () => clearTimeout(timer);
23    }
24  }, [autoPlay]);
25 
26  const triggerUnlock = () => {
27    setIsUnlocking(true);
28    setIsComplete(false);
29    setTimeout(() => {
30      setIsComplete(true);
31    }, 3000);
32  };
33 
34  const resetAnimation = () => {
35    setIsUnlocking(false);
36    setIsComplete(false);
37  };
38 
39  // Generate minimal particles
40  const particles = Array.from({ length: 24 }, (_, i) => ({
41    id: i,
42    angle: (Math.PI * 2 * i) / 24,
43    delay: Math.random() * 0.3,
44    duration: 1.2 + Math.random() * 0.5,
45  }));
46 
47  return (
48    <div className="relative w-full max-w-md">
49      {/* Main content card */}
50      <motion.div
51        className="relative bg-card border border-border rounded-2xl p-16 shadow-sm"
52        animate={
53          isUnlocking
54            ? {
55                boxShadow: [
56                  "0 1px 3px 0 rgb(0 0 0 / 0.1)",
57                  "0 0 0 4px rgb(0 0 0 / 0.05)",
58                  "0 1px 3px 0 rgb(0 0 0 / 0.1)",
59                ],
60              }
61            : {}
62        }
63        transition={{ duration: 1.5, ease: "easeInOut" }}
64      >
65        {/* Ripple effects */}
66        <AnimatePresence>
67          {isUnlocking && (
68            <>
69              {[0, 0.2, 0.4].map((delay, i) => (
70                <motion.div
71                  key={i}
72                  className="absolute inset-0 rounded-2xl border border-foreground z-0"
73                  initial={{ scale: 1, opacity: 0.3 }}
74                  style={{ zIndex: -1 }}
75                  animate={{ scale: 2, opacity: 0 }}
76                  exit={{ opacity: 0 }}
77                  transition={{ duration: 1.5, delay, ease: "easeOut" }}
78                />
79              ))}
80            </>
81          )}
82        </AnimatePresence>
83 
84        {/* Particle system */}
85        <AnimatePresence>
86          {isUnlocking &&
87            particles.map((particle) => (
88              <motion.div
89// … truncated