Vault Lock

1"use client";
2 
3import { cn } from "@/lib/utils";
4import React, { useState } from "react";
5import { motion, Variants } from "motion/react";
6 
7type VaultLockProps = {
8  cardTitle?: string;
9  cardDescription?: string;
10};
11 
12const VaultLock = ({
13  cardTitle = "Vault Access",
14  cardDescription = "Smooth and secure login experience, backed by encrypted access and seamless visual transitions",
15}: VaultLockProps) => {
16  const [isHovered, setIsHovered] = useState(false);
17 
18  const vaultVariant: Variants = {
19    open: {
20      transform: "translateY(-20px)",
21      transition: {
22        duration: 0.3,
23        ease: "easeInOut",
24      },
25    },
26    close: {
27      transform: "translateY(0px)",
28      transition: {
29        duration: 0.3,
30        ease: "easeInOut",
31      },
32    },
33  };
34 
35  const inputVariant: Variants = {
36    open: {
37      transform: "translateY(-12px)",
38      transition: {
39        duration: 0.3,
40        ease: "easeInOut",
41      },
42    },
43    close: {
44      transform: "translateY(0px)",
45      transition: {
46        duration: 0.3,
47        ease: "easeInOut",
48      },
49    },
50  };
51 
52  const shineVariant: Variants = {
53    open: {
54      transform: "translateX(-50%) translateY(0%) rotate(45deg)",
55      scale: 1.2,
56      transition: {
57        duration: 0.6,
58        ease: [0.65, 0, 0.35, 1],
59        delay: 2.1,
60      },
61    },
62    close: {
63      transform: "translateX(-125%) translateY(-60%) rotate(45deg)",
64      scale: 1,
65      transition: {
66        duration: 0.4,
67        ease: [0.65, 0, 0.35, 1],
68      },
69    },
70  };
71 
72  const lockVariant: Variants = {
73    open: {
74      transform: "rotate(90deg)",
75      transition: {
76        duration: 0.6,
77        ease: [0.65, 0, 0.35, 1],
78        delay: 2,
79      },
80    },
81    close: {
82      transform: "rotate(0deg)",
83      transition: {
84        duration: 0.4,
85        ease: [0.65, 0, 0.35, 1],
86      },
87    },
88  };
89 
90  const codeVariant: Variants = {
91    open: (index: number) => ({
92      opacity: 1,
93      filter: "blur(0px)",
94      scale: 1,
95      transition: {
96        duration: 0.5,
97        delay: 0.3 + index * 0.15,
98        ease: "easeInOut",
99      },
100    }),
101    close: {
102      opacity: 0,
103      filter: "blur(10px)",
104      scale: 1.02,
105      transition: {
106        duration: 0.2,
107        delay: 0,
108        ease: "easeInOut",
109      },
110    },
111  };
112 
113  return (
114    <motion.div
115      onMouseEnter={() => setIsHovered(true)}
116      onMouseLeave={() => setIsHovered(false)}
117      initial="close"
118      animate={isHovered ? "open" : "close"}
119// … truncated