"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, type Transition, } from "framer-motion"; import { Delete, Fingerprint, LockKeyhole, ShieldCheck } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: Transition["ease"] = [0.16, 1, 0.3, 1]; type Status = "typing" | "success"; interface Ripple { id: number; keyId: string; x: number; y: number; } const DIGITS: { d: string; sub: string }[] = [ { d: "1", sub: "" }, { d: "2", sub: "ABC" }, { d: "3", sub: "DEF" }, { d: "4", sub: "GHI" }, { d: "5", sub: "JKL" }, { d: "6", sub: "MNO" }, { d: "7", sub: "PQRS" }, { d: "8", sub: "TUV" }, { d: "9", sub: "WXYZ" }, ]; export interface OtpKeypadProps { /** Number of passcode dots. */ length?: number; /** The code the demo types on loop. Sanitized to digits, clamped to `length`. */ code?: string; /** Autoplay the type-fill-unlock loop when idle. */ autoplay?: boolean; /** Fires once a full code is entered (autoplay or manual). */ onComplete?: (code: string) => void; className?: string; } export function OtpKeypad({ length = 4, code = "4827", autoplay = true, onComplete, className, }: OtpKeypadProps) { const sequence = code.replace(/\D/g, "").slice(0, length); const [entered, setEntered] = useState(""); const [status, setStatus] = useState("typing"); const [pressedKey, setPressedKey] = useState(null); const [ripples, setRipples] = useState([]); const [interacting, setInteracting] = useState(false); const rippleId = useRef(0); const enteredRef = useRef(""); const interactingRef = useRef(false); const resumeTimer = useRef(null); const successTimer = useRef(null); const success = status === "success"; const triggerRipple = useCallback((keyId: string, x = 50, y = 50) => { const id = rippleId.current++; setRipples((prev) => [...prev, { id, keyId, x: Math.round(x), y: Math.round(y) }]); }, []); const removeRipple = useCallback((id: number) => { setRipples((prev) => prev.filter((r) => r.id !== id)); }, []); // Autoplay engine: type the code, fill the dots, flash unlock, repeat. useEffect(() => { if (interacting || !autoplay || sequence.length === 0) return; let alive = true; const timers: number[] = []; const wait = (ms: number) => new Promise((resolve) => { timers.push(window.setTimeout(resolve, ms)); }); async function run() { while (alive) { setStatus("typing"); setEntered(""); enteredRef.current = ""; await wait(720); if (!alive) return; for (let i = 0; i < sequence.length; i++) { if (!alive) return; const digit = sequence[i]; setPressedKey(digit); triggerRipple(digit); setEntered((prev) => prev + digit); await wait(150); if (!alive) return; setPressedKey(null); await wait(300); } if (!alive) return; await wait(440); setStatus("success"); onComplete?.(sequence); await wait(1600); } } run(); return () => { alive = false; timers.forEach((t) => window.clearTimeout(t)); }; }, [interacting, autoplay, sequence, triggerRipple, onComplete]); useEffect(() => { return () => { if (resumeTimer.current) window.clearTimeout(resumeTimer.current); if (successTimer.current) window.clearTimeout(successTimer.current); }; }, []); function scheduleResume(ms: number) { if (resumeTimer.current) window.clearTimeout(resumeTimer.current); resumeTimer.current = window.setTimeout(() => { interactingRef.current = false; setInteracting(false); }, ms); } function beginInteractive() { if (!interactingRef.current) { interactingRef.current = true; setInteracting(true); enteredRef.current = ""; setEntered(""); setStatus("typing"); setPressedKey(null); } scheduleResume(5000); } function pressDigit(digit: string, e: React.MouseEvent) { beginInteractive(); const rect = e.currentTarget.getBoundingClientRect(); triggerRipple( digit, ((e.clientX - rect.left) / rect.width) * 100, ((e.clientY - rect.top) / rect.height) * 100 ); if (enteredRef.current.length >= length) return; const next = enteredRef.current + digit; enteredRef.current = next; setEntered(next); if (next.length === length) { if (successTimer.current) window.clearTimeout(successTimer.current); successTimer.current = window.setTimeout(() => { setStatus("success"); onComplete?.(next); }, 320); scheduleResume(2000); } } function pressDelete(e: React.MouseEvent) { beginInteractive(); const rect = e.currentTarget.getBoundingClientRect(); triggerRipple( "del", ((e.clientX - rect.left) / rect.width) * 100, ((e.clientY - rect.top) / rect.height) * 100 ); const next = enteredRef.current.slice(0, -1); enteredRef.current = next; setEntered(next); } return (

{/* thin bright top edge */}

{/* ambient top glow, brand at rest, emerald on unlock */}

{/* lock badge */}

{success ? ( ) : ( )}

{/* label */}

{success ? ( Passcode accepted ) : (

Enter passcode

Autoplaying · tap the keys to try

)}

{/* dots */}

{Array.from({ length }).map((_, i) => { const filled = i < entered.length; return ( ); })}

{/* keypad */}

{DIGITS.map((k) => ( pressDigit(k.d, e)} > {k.d} {k.sub ? ( {k.sub} ) : null} ))} {/* fingerprint (decorative, non-interactive) */}

pressDigit("0", e)} > 0 +

); } function Key({ keyId, children, ripples, onRippleDone, onPress, pressed = false, variant = "digit", }: { keyId: string; children: React.ReactNode; ripples: Ripple[]; onRippleDone: (id: number) => void; onPress: (e: React.MouseEvent) => void; pressed?: boolean; variant?: "digit" | "action"; }) { const mine = ripples.filter((r) => r.keyId === keyId); return ( {/* press glow */} {/* ripples */} {mine.map((r) => ( onRippleDone(r.id)} /> ))} {children} ); } export default function Demo() { return (

); }

OTP Keypad