Broadcast Glitch

# Visual style: Broadcast Glitch

The motion packaging of a dying broadcast signal. On CRT black, scanlines crawl, RGB channels split into red-cyan jitter, SMPTE color bars sweep, and the picture occasionally jumps like bad tracking. This is the revival of 90s TV idents and VHS glitch art — not a synthwave sunset, but a broken signal itself glowing.

## Philosophy
The glitch creed: treat "signal failure" as an aesthetic. When an old CRT's signal breaks, it leaks scanlines, splits color into red-cyan ghosting, and makes the picture twitch and jump — and those "defects" are the most alive motion language there is. It revives 90s TV idents, test cards and VHS tape texture, not the romantic neon sunset of synthwave.

Core principles:
- The signal is the stage: CRT near-black #0B0B0E, always overlaid with slowly crawling scanlines, as if the picture is emitted from a cathode-ray tube
- Three primary signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000 — drawn from TV primaries and the test card, never synthwave's purple-pink gradients
- Channel splitting is the signature: important type and shapes get RGB red-cyan offset (chromatic aberration) with a slight random jitter, as if the signal is misaligned
- Glitch is the motion: frame jumps (clip + translate with stepped hard cuts), VHS horizontal tearing, signal-bar sweeps, power-on white flash — all the moves of a bad signal
- Hard edges, no radius: this is an electronic signal, not soft-light UI — square corners, flat color, thick rules, monospace type, everything hard
- No sunset: never the purple-pink-orange gradient and horizon grid of outrun/synthwave — that is a different style; this one is a broken broadcast signal

Design principles:
- Performance line: scanlines via CSS gradient overlay + transform scroll, glitch via transform/clip-path, never reflow
- Accessibility line: under prefers-reduced-motion disable jitter, jumps and flicker (anti-vertigo), settling on a clear test-card end-state
- Restraint line: glitch is a highlight, not a screen-wide seizure — small amplitude, low frequency, tearing only at key moments
- Legibility line: body text never gets channel splitting (only titles/decor do), keeping prose crisp

## Do
- CRT near-black #0B0B0E background always overlaid with slowly crawling scanlines (repeating-linear-gradient + transform scroll)
- Only three signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000, from TV/test-card
- Titles get RGB channel splitting: red-cyan double-shadow text-shadow + slight random jitter for signal misalignment
- Glitch motion uses steps() hard cuts: frame jumps, VHS horizontal tearing, signal-bar sweeps — never a smooth transition
- Hard square corners, flat fills, thick borders, monospace / condensed bold type — everything hard
- Use SMPTE color bars as the signature decoration (white yellow cyan green magenta red blue)
- Open with a CRT power-on white flash + collapse (scaleY 0->1)
- Every glitch/flicker/jitter ships a prefers-reduced-motion off-switch, settling on a clear test-card end-state (anti-vertigo)

## Don't
- Never the purple-pink-orange sunset gradient and horizon grid of synthwave/outrun — that is a different style
- Never rounded corners, soft light or gentle shadows — this is a hard electronic signal, not soft UI
- Never a fourth hue, never muddy or desaturate the three signal colors
- Never a screen-wide continuous seizure-like jitter — glitch is a highlight, small amplitude, low frequency
- Never channel-split the body text (titles/decor only) or prose becomes unreadable
- Never animate top/left/width/height — scanlines/glitch use transform/clip-path
- Never skip prefers-reduced-motion (jitter and flicker carry a vertigo risk)

## Rules for the AI
# Broadcast Glitch Design System

You are an expert frontend developer specializing in the broadcast glitch style. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Broadcast Glitch (Retro TV)
- **Essence**: treat an old CRT's "signal failure" as motion aesthetic — scanlines, channel splitting, frame jumps, test cards
- **Mood**: nostalgic, gritty, electronic; 90s TV idents and VHS glitch art
- **Inspiration**: SMPTE color bars, MTV/channel idents, VHS tape glitch, datamosh

> Important distinction: this is NOT synthwave / outrun. Never use the purple-pink-orange sunset gradient or horizon grid. This style is a "broken broadcast signal" — black ground, flat color, hard edges, scanlines.

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Purple-pink-orange sunset gradient / horizon grid | That is synthwave/outrun, a different style; this one is a bad signal |
| Rounded corners / soft light / gentle shadows | Hard electronic signal, not soft UI; square corners, flat color |
| A fourth hue / muddying the three signal colors | Only glitch red / CRT cyan / test-card yellow, from TV primaries |
| Screen-wide continuous seizure jitter | Glitch is a highlight — small amplitude, low frequency, tear only at key moments |
| Channel-splitting the body text | Prose must stay readable; split titles/decor only |
| Animating top/left/width/height | Layout thrash; scanlines/glitch use transform/clip-path |
| Missing prefers-reduced-motion fallback | Jitter and flicker carry a vertigo risk; non-negotiable |

## Required

### Signal Stage
- CRT near-black #0B0B0E background, panel #101014, always overlaid with crawling scanlines
- Phosphor-white #EDEDED text, monospace / condensed bold
- Three signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000

### Scanlines (always present)
```css
.bg-scanlines { background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.7) 3px); }
@keyframes bg-scan { to { transform: translateY(6px); } }
.bg-scan { animation: bg-scan 0.4s steps(3) infinite; }
```
Use a pointer-events-none absolutely-positioned overlay over the whole screen.

### Channel Splitting (signature)
```css
h1 { text-shadow: 3px 0 #00E5D8, -3px 0 #FF2E4C; }
@keyframes bg-split { 0%,100% { text-shadow: 2px 0 #00E5D8, -2px 0 #FF2E4C; } 50% { text-shadow: 3px 0 #00E5D8, -3px 0 #FF2E4C; } }
```
Titles and decor only; body stays single-color and crisp.

### Glitch Frame Jump (stepped hard cut)
```css
@keyframes bg-jitter { 0%,92%,100% { transform: translate(0,0); } 93% { transform: translate(-3px,1px); } 95% { transform: translate(2px,-1px); } }
.bg-jitter { animation: bg-jitter 4s steps(1) infinite; }
```
Still most of the time, an occasional jump — not a continuous shake.

### SMPTE Color Bars
Seven equal bars: white #EDEDED / yellow #F5E000 / cyan #00E5D8 / green #3DFF6E / magenta #FF2E9A / red #FF2E4C / blue #2E6BFF. Use as corner decoration or divider strip.

### CRT Power-On
```css
@keyframes bg-poweron { from { transform: scaleY(0.02); opacity: 0.2; } to { transform: scaleY(1); opacity: 1; } }
```

### Typography
Titles/body in monospace or condensed bold (ui-monospace / "Azeret Mono" / "Unbounded" family), uppercase, wide tracking, hard electronic feel.

### Rhythm
- Scanline crawl 0.4s steps(3) always on; frame jump once per ~4s; split pulse 2s; flicker 1.2s
- Everything uses steps() — hard cut, never smooth

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .bg-scan, .bg-jitter, .bg-split, .bg-flicker, .bg-poweron { animation: none !important; }
}
```
Disable all jitter and flicker, settle on a clear test-card end-state.

## Self-Verification Checklist

- [ ] CRT black ground + always-on crawling scanlines
- [ ] Only glitch red / CRT cyan / test-card yellow, no sunset gradient
- [ ] Titles have RGB channel splitting, body single-color and readable
- [ ] Glitch is an occasional frame jump (stepped hard cut), not a screen-wide shake
- [ ] A SMPTE color-bars element is present
- [ ] Only transform/opacity/clip-path animate
- [ ] prefers-reduced-motion fallback present (anti-vertigo)