赛博 HUD（移动）Cyberpunk Mobile HUD
45° 切角、HUD 角标、扫描线与霓虹脉冲，终端式输入框。信息以仪表读数的形式呈现，氛围优先。
典型场景游戏伴侣 · 加密应用 · 潮流工具
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现（数据标注：浅色 不建议，深色 支持）。
风格描述
45° 切角、HUD 角标、扫描线与霓虹脉冲，终端式输入框。信息以仪表读数的形式呈现，氛围优先。
关键词
效果与动效
Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels
设计系统变量
--bg#0A0A0F--card#12121A--fg#E0E0E0--muted#1C1C2E--accent#00FF88--accent2#FF00FF--accent3#00D4FF--border#2A2A3A--destructive#FF3366--radius0px--font-headingOrbitron--font-bodyJetBrains Mono配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Void #0A0A0F, Card #12121A
辅色 / Secondary
Neon Green #00FF88, Neon Magenta #FF00FF, Cyber Cyan #00D4FF, Neutral Text #E0E0E0, Alert Red #FF3366, Border #2A2A3A
强调色在页面底色上的对比度约 14.7:1，可用于正文与图标。
适用场景
适合 / Best For
- Gaming dashboards
- crypto/cyberpunk apps
- sci-fi companion tools
- hacker OS skins
- data-heavy monitoring HUDs
避开 / Do Not Use For
- Serious enterprise
- health/finance requiring calm trust
- minimal editorial apps
框架兼容
能力矩阵
实现要点
落地清单
- Chamfered corners used instead of radius,
- Scanline & CRT flicker implemented,
- Orbitron + JetBrains Mono typography,
- Neon glow shadows on primary buttons,
- Glitch animation on active states,
- Prompt-style inputs with custom cursor,
- HUD corner brackets implemented,
- Safe-area system status bar styled,
- Reduced motion disables glitch/flicker,
- Icons configured with Lucide accent color
CSS / 技术关键词
backgroundColor: '#0A0A0F', cardBg: '#12121A', accent: '#00FF88', accent2: '#FF00FF', accent3: '#00D4FF', borderColor: '#2A2A3A', destructive: '#FF3366', borderRadius: 0, chamfer via SVG path, shadowColor accent with animated radius, scanline overlay View pointerEvents='none', withRepeat glitch translateX [-2,2,0], Easing.steps(2)
AI 提示词
Design a Cyberpunk Mobile HUD mobile interface using cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.