Cyber Anime

赛博动漫风组件配方

组件变体

relative overflow-hidden font-sans font-bold uppercase tracking-widest border border-[#06d6a0]/50 transition-all duration-300 ease-out bg-[#7c3aed] text-white shadow-[0_0_10px_rgba(124,58,237,0.3),0_0_20px_rgba(124,58,237,0.15)] hover:shadow-[0_0_20px_rgba(124,58,237,0.5),0_0_40px_rgba(124,58,237,0.2)] hover:border-[#06d6a0] active:scale-95

button

全息按钮

Cockpit control button with vertical scan line texture overlay, multi-layer neon glow, and HUD-style border

基础骨架: relative overflow-hidden font-sans font-bold uppercase tracking-widest border border-[#06d6a0]/50 transition-all duration-300 ease-out
变体: 主要、次要、强调、全息
状态: hover、active、disabled

card

HUD面板

Mecha cockpit data panel with angled clip-path corners, HUD corner frame decorations, scan line overlay, and multi-layer neon glow

基础骨架: relative overflow-hidden bg-[#0f0f1a]/90 border border-[#7c3aed]/30 backdrop-blur-sm transition-all duration-300 ease-out
变体: 默认、青色、粉色、全息
状态: hover

input

终端输入框

Terminal-style command input with blinking cursor, monospace font, and neon focus glow. Includes a > prompt prefix indicator

基础骨架: w-full bg-[#0f0f1a]/80 border border-[#7c3aed]/30 text-[#e0e0ff] placeholder:text-[#e0e0ff]/30 font-mono caret-[#06d6a0] focus:outline-none transition-all duration-300 ease-out
变体: 默认、青色、粉色
状态: focus、disabled

hudStatusBar

HUD状态栏

Horizontal status bar with segmented indicators and neon glow

基础骨架: relative flex items-center gap-2 bg-[#0f0f1a]/90 border border-[#7c3aed]/30 px-4 py-2 font-mono text-xs uppercase tracking-wider
变体: 默认、警报、成功
状态: 静态

hologramPanel

全息面板

Translucent panel with holographic shimmer border effect

基础骨架: relative bg-[#0f0f1a]/60 backdrop-blur-md border border-[#7c3aed]/20 overflow-hidden bg-[repeating-linear-gradient(0deg,transparent_0px,transparent_2px,rgba(124,58,237,0.03)_2px,rgba(124,58,237,0.03)_4px)] transition-all duration-300 ease-out
变体: 默认、青色、粉色
状态: hover

cockpitNav

驾驶舱导航

Navigation bar styled like mecha cockpit controls

基础骨架: flex items-center gap-1 bg-[#0f0f1a]/95 border border-[#7c3aed]/30 px-4 py-2 font-mono text-xs uppercase tracking-widest text-[#e0e0ff]/70
变体: 默认、紧凑
状态: 静态

dataStream

数据流

Vertical data stream display with monospace scrolling text feel

基础骨架: relative bg-[#0f0f1a] border-2 border-[#7c3aed]/40 p-4 font-mono text-xs leading-relaxed overflow-hidden bg-[linear-gradient(180deg,rgba(124,58,237,0.08)_0%,transparent_15%,transparent_85%,rgba(124,58,237,0.08)_100%)]
变体: 默认、青色、粉色
状态: 静态

missionBriefing

任务简报

Alert/notification panel with military briefing aesthetic

基础骨架: relative bg-[#0f0f1a]/90 border border-[#7c3aed]/30 p-4 font-mono text-sm [clip-path:polygon(0_0,calc(100%-8px)_0,100%_8px,100%_100%,8px_100%,0_calc(100%-8px))]
变体: 信息、警告、紧急
状态: 静态