"use client" import { useRef, useState } from "react" // shadcn import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/components/ui/input-otp" // third-party import { AnimatePresence, motion, type Variants } from "framer-motion" const filledAnimate = { scale: [1, 1.15, 0.9, 1.04, 1] as number[], } const filledTransition = { duration: 0.45, ease: [0.34, 1.56, 0.64, 1] as [number, number, number, number], times: [0, 0.3, 0.55, 0.75, 1] as number[], } const emptyAnimate = { scale: 1, boxShadow: "0 0 0px 0px rgba(99,102,241, 0)", } const statusVariants: Variants = { hidden: { opacity: 0, y: 6, filter: "blur(4px)" }, visible: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.3, ease: "easeOut" }, }, exit: { opacity: 0, y: -6, filter: "blur(4px)", transition: { duration: 0.2, ease: "easeIn" }, }, } // ------------------------------ | INPUT OTP - ANIMATED | ------------------------------ // export function InputOTPAnimated() { const [value, setValue] = useState("") const prevLength = useRef(0) const handleChange = (val: string) => { prevLength.current = value.length setValue(val) } const remaining = 6 - value.length const isDone = value.length === 6 return (

{[0, 1, 2, 3, 4, 5].map((i) => { const isFilled = value[i] !== undefined return ( ) })} {/* Status text with AnimatePresence */}

{isDone ? ( ✓ Code entered ) : ( Enter{" "} {remaining} {" "} more digit{remaining !== 1 ? "s" : ""} )}

) }