'use client'; import { useState, useEffect } from 'react'; const STATS = [ { label: 'POWER', value: 94, color: '#00ffe7' }, { label: 'SPEED', value: 78, color: '#ff4ecd' }, { label: 'INTEL', value: 88, color: '#ffe600' }, ] const COMMANDS = ['SCAN AREA', 'DEPLOY', 'ANALYZE', 'SYNC AI'] function MechCore({ tick }: { tick: number }) { const pulse = 0.72 + Math.abs(Math.sin(tick * 0.45)) * 0.28 return (

{[0, 1].map(side => (

))}

{['TARGET LOCK', 'MECH CORE', 'ARMOR SYNC', 'AI LINK'].map((label, i) => (

= 2 ? 52 : 'auto', left: i % 2 === 0 ? 8 : 'auto', right: i % 2 === 1 ? 8 : 'auto', minWidth: 118, padding: '7px 10px', border: '1px solid #00ffe72e', background: '#03070ddd', color: i === 1 ? '#ff4ecd' : '#00ffe7', fontSize: 10, letterSpacing: 2, textAlign: i % 2 === 0 ? 'left' : 'right', boxShadow: '0 0 20px #00ffe70f' }}> {label}

))}

) } export default function SplineSceneNeon() { const [activeCmd, setActiveCmd] = useState(null) const [tick, setTick] = useState(0) const [log, setLog] = useState(['SYS BOOT OK', 'AI CORE ONLINE']) useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1200) return () => clearInterval(id) }, []) const handleCmd = (cmd: string) => { setActiveCmd(cmd) setLog(prev => [`> ${cmd}... DONE`, ...prev].slice(0, 5)) setTimeout(() => setActiveCmd(null), 1500) } return (

{/* Animated grid background */} {/* Grid overlay */}

{/* Scanline */}

{/* LEFT PANEL */}

{/* Title */}

◈ UNIT-7X ONLINE

NEO
MECH
RELOADED

{/* Stats */}

{STATS.map(s => (

{s.label} {s.value}%

))}

{/* Commands */}

── COMMANDS

{COMMANDS.map(cmd => ( ))}

{/* Log */}

LOG

{log.map((l, i) => (

{i === 0 && ▌} {l}

))}

{/* CENTER: 3D Robot */}

{/* Corner decorations */} {['0 0', '0 auto', 'auto 0', 'auto auto'].map((pos, i) => (

= 2 ? 20 : 'auto', left: i % 2 === 0 ? 20 : 'auto', right: i % 2 === 1 ? 20 : 'auto', width: 24, height: 24, zIndex: 10, borderTop: i < 2 ? '2px solid #00ffe7' : 'none', borderBottom: i >= 2 ? '2px solid #00ffe7' : 'none', borderLeft: i % 2 === 0 ? '2px solid #00ffe7' : 'none', borderRight: i % 2 === 1 ? '2px solid #00ffe7' : 'none', opacity: 0.6, animation: 'pulseBorder 2s ease-in-out infinite', animationDelay: `${i * 0.4}s`, }} /> ))} {/* Center HUD ring */}

{['◀', '●', '▶'].map((sym, i) => (

{sym}

))}

{/* RIGHT PANEL */}

{/* Status indicators */}

STATUS

{[ { label: 'CORE', status: 'ACTIVE', color: '#00ffe7' }, { label: 'SHIELD', status: 'ARMED', color: '#ff4ecd' }, { label: 'COMMS', status: 'LIVE', color: '#ffe600' }, { label: 'SYNC', status: `${(tick % 100).toString().padStart(2, '0')}%`, color: '#00ffe7' }, ].map(item => (

{item.label} {item.status}

))}

{/* Frequency visualizer */}

SIGNAL

{Array.from({ length: 14 }).map((_, i) => { const h = 20 + Math.abs(Math.sin((tick + i) * 0.7)) * 20 return (

) })}

{/* Timestamp */}

UPTIME

00:{String(tick % 60).padStart(2, '0')}:{String((tick * 17) % 60).padStart(2, '0')}

) }

NEO MECH RELOADED

NEO
MECH
RELOADED

Neo Mech HUD Interface