Neon Error State
A cyberpunk 404 error page built for developer tools and tech platforms.
Features
- Neon cyberpunk theme — Electric green (#39FF14) and hot pink (#FF1493) on black
- Google Fonts: Orbitron + Share Tech Mono — Futuristic heading + monospace terminal text
- Glitch text effect — CSS animation that triggers periodically on the 404 heading
- Terminal error log — Card styled as a terminal with color-coded log entries (ERR, WARN, INFO, FATAL)
- Scan lines overlay — Retro CRT monitor effect via CSS repeating gradient
- Grid background — Subtle cyberpunk grid pattern
- Neon glow buttons — Retry and Go Back actions with neon box-shadow
- Blinking cursor — Animated terminal cursor in the log
- Dark-first design — Designed primarily for dark mode
Dependencies
@/components/vue-ui/button — Button for retry/back actions@/components/vue-ui/card — Card, CardContent for terminal log@/components/vue-ui/badge — Badge for error status label@/components/vue-ui/separator — Separator between sectionslucide-vue-next — RefreshCcw, ArrowLeft, Terminal, AlertTriangle, Skull
Customization
- Error code: Change 404 to any HTTP error code
- Log entries: Replace with real error messages from your app
- Glitch timing: Adjust the setInterval duration for more/less frequent glitching
- Colors: Swap green/pink for your preferred neon palette
