"use client"; import { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, LayoutGroup, motion } from "framer-motion"; import { Check, Loader2, ShieldCheck } from "lucide-react"; import { cn } from "@/lib/utils"; export type OtpStatus = "idle" | "success" | "error"; export interface OtpInputProps { /** Number of digit boxes. */ length?: number; /** Controlled value (digits only). */ value: string; /** Fires with the sanitized value on every keystroke or paste. */ onChange?: (value: string) => void; /** Fires once the value fills every box. */ onComplete?: (value: string) => void; /** Visual status of the field. */ status?: OtpStatus; /** Force the focused visual (used by autoplay previews). */ focused?: boolean; /** Purely presentational: ignores keystrokes, hides the OS keyboard. */ readOnly?: boolean; disabled?: boolean; className?: string; } const EMERALD_BORDER = "rgba(52,211,153,0.55)"; const CORAL_BORDER = "rgba(248,113,113,0.55)"; export function OtpInput({ length = 6, value, onChange, onComplete, status = "idle", focused, readOnly = false, disabled = false, className, }: OtpInputProps) { const groupId = useId(); const inputRef = useRef(null); const [internalFocused, setInternalFocused] = useState(false); const isFocused = (focused ?? internalFocused) && !disabled; function handleChange(e: React.ChangeEvent) { if (readOnly || disabled) return; const next = e.target.value.replace(/\D/g, "").slice(0, length); onChange?.(next); if (next.length === length) onComplete?.(next); } const success = status === "success"; const error = status === "error"; return (

{Array.from({ length }).map((_, i) => { const digit = value[i] ?? ""; const filled = i < value.length; const isNext = status === "idle" && !disabled && value.length < length && i === value.length; const showRing = isNext; const showCaret = isNext && isFocused; const borderColor = success ? EMERALD_BORDER : error ? CORAL_BORDER : filled ? "rgba(255,255,255,0.20)" : "rgba(255,255,255,0.08)"; const boxShadow = success ? "inset 0 0 14px -8px rgba(52,211,153,0.7), 0 0 22px -8px rgba(52,211,153,0.55)" : filled ? "inset 0 1px 0 0 rgba(255,255,255,0.05)" : "none"; return (

{/* Glowing active ring, slides between boxes as you type */} {showRing && ( )} {/* Blinking caret in the active box */} {showCaret && ( )} {/* Digit pops in with a spring */} {filled && ( {digit} )}

); })}

{/* One transparent input captures typing, paste and OTP autofill */} setInternalFocused(true)} onBlur={() => setInternalFocused(false)} readOnly={readOnly} disabled={disabled} inputMode="numeric" autoComplete="one-time-code" aria-label="One-time passcode" maxLength={length} tabIndex={readOnly || disabled ? -1 : 0} className={cn( "absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent opacity-0 outline-none", (readOnly || disabled) && "pointer-events-none" )} style={{ caretColor: "transparent" }} />

); } const DEMO_CODE = "042931"; const TYPE_STEP = 440; export default function Demo() { const [value, setValue] = useState(""); const [status, setStatus] = useState("idle"); useEffect(() => { let timers: ReturnType[] = []; let cancelled = false; function run() { if (cancelled) return; timers = []; setValue(""); setStatus("idle"); for (let i = 1; i <= DEMO_CODE.length; i++) { timers.push( setTimeout(() => setValue(DEMO_CODE.slice(0, i)), i * TYPE_STEP) ); } const typedAt = DEMO_CODE.length * TYPE_STEP; timers.push(setTimeout(() => setStatus("success"), typedAt + 760)); timers.push(setTimeout(run, typedAt + 760 + 2000)); } run(); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, []); const verifying = value.length === DEMO_CODE.length && status === "idle"; return (

Verify it's you

Code sent to a•••n@lumenite.dev

{status === "success" ? ( Code verified ) : verifying ? ( Verifying code ) : ( Didn't get it? Resend in 0:24 )}

); }

OTP Input

Verify it's you