"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Fingerprint, Terminal as TerminalIcon, Shield, Activity, Cpu, CheckCircle2, Lock } from "lucide-react"; /** * Crimson Biometric Terminal v3 * A large-scale, split-screen enterprise authentication terminal. * Fully responsive using Container Queries (@container) for pristine rendering in previewers. */ type AuthPhase = "idle" | "initializing" | "scanning" | "analyzing" | "granted"; // Helper component for the terminal logs const TerminalLog = ({ logs }: { logs: string[] }) => { return (

{logs.map((log, i) => ( {`[${new Date().getSeconds().toString().padStart(2, '0')}:${new Date().getMilliseconds().toString().padStart(3, '0')}]`} {`> ${log}`} ))}

); }; export default function CrimsonBiometricTerminal() { const [phase, setPhase] = useState("idle"); const [logs, setLogs] = useState(["SYSTEM READY.", "AWAITING USER INTERACTION."]); const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); const addLog = (msg: string) => { setLogs(prev => { const newLogs = [...prev, msg]; return newLogs.slice(-6); // Keep only last 6 logs }); }; const handleAuthSequence = () => { if (phase !== "idle") return; setPhase("initializing"); addLog("WARMING UP BIOMETRIC SENSORS..."); setTimeout(() => { setPhase("scanning"); addLog("CAPTURING NEURAL & DERMAL TOPOGRAPHY..."); setTimeout(() => { setPhase("analyzing"); addLog("DECRYPTING HASH SIGNATURE..."); setTimeout(() => { setPhase("granted"); addLog("ACCESS GRANTED. WELCOME, ADMIN."); }, 2000); }, 2500); }, 1000); }; const resetTerminal = () => { setPhase("idle"); setLogs(["SYSTEM LOCKED.", "AWAITING USER INTERACTION."]); }; if (!mounted) return null; return (

{/* Main Split-Screen Container */}

{/* LEFT COLUMN: The Biometric Visualizer */}

{/* Background Topography (Always visible, fades based on phase) */}

{/* Dynamic Glow Behind Scanner */} {/* Biometric Sensor Ring */}

{/* Outer Decorative Rings */} {/* Core Icon & Scanning FX */}

{phase === "granted" ? ( ) : ( )} {/* Laser Sweep Animation */} {phase === "scanning" && ( )}

{/* Left Column HUD Data - Hidden on small containers */}

Sector AEGIS-09

{/* RIGHT COLUMN: Interface & Controls */}

{/* Header */}

Restricted Protocol

Identity
Verification

Secure endpoint requires physical biometric signature to decrypt the current session node.

{/* Interactive Area */}

{/* Action Button */} {/* Terminal Output */}

Event Log Status: {phase.toUpperCase()}

); }

IdentityVerification

Identity
Verification