Glitch Art

故障艺术风组件配方

组件变体

font-mono font-bold uppercase tracking-widest rounded-none border border-[#00ffff]/30 transition-all duration-100 ease-in-out relative overflow-hidden bg-[#00ffff] text-[#0a0a0a] shadow-[3px_0_#ff00ff,-3px_0_#ffff00] hover:shadow-[6px_0_#ff00ff,-6px_0_#ffff00] active:translate-x-[1px] active:translate-y-[1px]

button

按钮

Glitch-style button with RGB channel split shadow and scan line texture

基础骨架: font-mono font-bold uppercase tracking-widest rounded-none border border-[#00ffff]/30 transition-all duration-100 ease-in-out relative overflow-hidden
变体: 主要、次要、品红、轮廓
状态: hover、active、disabled

card

卡片

Corrupted data panel with displacement band border and scan line texture

基础骨架: bg-[#0a0a0a] rounded-none border-2 border-[#00ffff]/40 transition-all duration-100 ease-in-out relative overflow-hidden
变体: 默认、青色、品红、黄色
状态: hover

input

输入框

Terminal-style input with RGB split focus glow and scan line texture

基础骨架: w-full rounded-none border border-[#00ffff]/30 bg-[#0a0a0a] text-[#00ffff] placeholder:text-[#00ffff]/20 font-mono focus:outline-none transition-all duration-100 ease-in-out
变体: 默认、品红
状态: focus、disabled

corruptedImage

损坏图像框

Image frame with RGB shift and corruption effect classes

基础骨架: relative bg-[#0a0a0a] rounded-none border border-[#00ffff]/20 overflow-hidden shadow-[3px_0_#ff00ff20,-3px_0_#ffff0020]
变体: 默认、重度、轻微
状态: 静态

staticNoise

静态噪声面板

Panel with static noise texture overlay

基础骨架: relative bg-[#0a0a0a] rounded-none p-6 overflow-hidden bg-[repeating-linear-gradient(0deg,transparent,transparent_1px,rgba(255,255,255,0.02)_1px,rgba(255,255,255,0.02)_2px)]
变体: 默认、密集、稀疏
状态: 静态

glitchText

故障文字

Text container with glitch animation classes and RGB channel split

基础骨架: relative font-mono font-bold uppercase tracking-widest
变体: 青色、品红、黄色
状态: 静态

brokenGrid

破碎网格

Container with intentionally misaligned grid aesthetic

基础骨架: relative bg-[#0a0a0a] rounded-none border border-[#ffffff]/10 overflow-hidden
变体: 默认、偏移、碎片
状态: 静态

signalMeter

信号强度计

Signal strength meter with segmented bars

基础骨架: inline-flex items-end gap-1 h-6
变体: 默认、弱、强
状态: 静态