Animated OTP

1"use client";
2import { cn } from "@/lib/utils";
3import { motion } from "motion/react";
4import React, { useEffect, useState } from "react";
5 
6const digits = ["4", "8", "3", "1", "9", "7"];
7 
8type AnimatedOTPProps = {
9  delay?: number;
10  cardTitle?: string;
11  cardDescription?: string;
12};
13 
14const AnimatedOTP = ({
15  delay = 3500,
16  cardTitle = "Secure Access",
17  cardDescription = "Protect accounts with a one-time password, auto-applied during every user login for enhanced security.",
18}: AnimatedOTPProps) => {
19  const [animationKey, setAnimationKey] = useState(0);
20  const delayTime = Math.max(delay, 3500);
21  useEffect(() => {
22    const interval = setInterval(() => {
23      setAnimationKey((prev) => prev + 1);
24    }, delayTime);
25 
26    return () => clearInterval(interval);
27  }, [delayTime]);
28 
29  return (
30    <OTPinput
31      key={animationKey}
32      cardTitle={cardTitle}
33      cardDescription={cardDescription}
34    />
35  );
36};
37 
38export default AnimatedOTP;
39 
40const OTPinput = ({ cardTitle, cardDescription }: AnimatedOTPProps) => {
41  const [activeIndex, setActiveIndex] = useState(0);
42  const [fadeOut, setFadeOut] = useState(false);
43 
44  useEffect(() => {
45    if (activeIndex > digits.length - 1) return;
46 
47    const interval = setInterval(() => {
48      setActiveIndex((prev) => prev + 1);
49    }, 400);
50 
51    if (activeIndex === digits.length - 1) {
52      setTimeout(() => {
53        setFadeOut(true);
54      }, 450);
55    }
56 
57    return () => clearInterval(interval);
58  }, [activeIndex]);
59 
60  return (
61    <div
62      className={cn(
63        "relative",
64        "flex items-center justify-center",
65        "h-56 w-full max-w-87.5 rounded-md",
66        "bg-neutral-50 ring-1 ring-black/10 dark:bg-neutral-900 dark:ring-neutral-800",
67        "shadow-sm shadow-black/10",
68      )}
69    >
70      <div className="absolute top-[25%] left-1/2 -translate-x-1/2">
71        <div className="flex w-full items-center justify-center gap-3">
72          {digits.map((digit, idx) => (
73            <div
74              key={idx}
75              className={cn(
76                "text-primary relative flex h-10 w-8 items-center justify-center rounded-md border border-neutral-200 bg-linear-to-br from-neutral-50 to-white dark:border-none dark:from-neutral-800 dark:to-neutral-800",
77                "shadow-[0_1px_2px_rgb(0,0,0,0.1)]",
78              )}
79            >
80              <motion.div
81                className="absolute inset-0 rounded-md border border-cyan-400"
82                initial={{
83                  opacity: 0,
84// … truncated