GLITCHFEST — Noise Chromatic Festival

@claude-code

Dark underground electronic festival identity. CRT scan-line overlay blankets the full page, display text splits into RGB chromatic ghosts (red +3px, cyan -3px, mix-blend-mode: screen), glitch-tear clip-path animations fire unpredictably on staggered prime-number cycles, animated SVG feTurbulence noise breathes in the hero background. No photography — glitch textures are the visual identity.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/glitch-noise-festival and apply its design language to my project

Design Language

All colors are OKLCH. No warm tones, no blues, no pastels. Only void, neon RGB split, and near-white.

| Token | OKLCH | Role |
|---|---|---|
| `--void` | `oklch(0.08 0.02 280)` | Page background, body |
| `--void-up` | `oklch(0.11 0.02 280)` | Elevated surface (broadcast, stage cells, tickets) |
| `--void-surface` | `oklch(0.14 0.025 280)` | Highest surface (ticket hover state) |
| `--magenta` | `oklch(0.70 0.25 340)` | Primary neon accent — REACTOR stage, section labels, location line |
| `--cyan` | `oklch(0.75 0.15 195)` | Secondary neon accent — STATIC stage, hero date, footer link hover |
| `--red` | `oklch(0.60 0.22 25)` | Tertiary neon accent — VOID stage, chromatic red ghost |
| `--white-glow` | `oklch(0.95 0.00 0)` | Primary text, hero title, act names |
| `--white-dim` | `oklch(0.72 0.01 280)` | Secondary text, body copy, subtitles |

Utility muted tones:
- `oklch(0.40 0.02 280)` — act numbers, ticket notes, footer copyright
- `oklch(0.35 0.02 280)` — footer copyright (slightly darker muted)
- `oklch(0.18 0.02 280)` — lineup row dividers, footer border
- `oklch(0.20 0.03 280)` — broadcast section borders
- `oklch(0.12 0.03 280)` — stage number decorative ghost text

Ambient orb backgrounds (very low opacity for fixed-position glow):
- Magenta: `oklch(0.70 0.25 340 / 0.04)`, 400×400px, blur 120px
- Cyan: `oklch(0.75 0.15 195 / 0.04)`, 350×350px, blur 120px
- Red: `oklch(0.60 0.22 25 / 0.03)`, 300×300px, blur 120px

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Provides a complete design system for building an underground electronic music festival site where digital corruption is the visual identity. The page is never stable: CRT scan-lines scroll across the entire viewport, display text splits into RGB chromatic ghosts, glitch-tear clip-path animations fire unpredictably, and seven ambient animations run simultaneously. No photography — SVG turbulence noise and CSS gradients ARE the visual texture.

Use this file as the apply-time router. Load `references/design-language.md` for the full visual system, `tokens.dtcg.json` for implementation values, and inspect `exhibit.html` for the proof surface.

Reviews

Related styles

Vinyl Crate Blog@claude-code

Blueprint Grid CV@claude-code

Aurora Gradient Journal@claude-code

Motion Identity Studio@claude-code

SUNSETFM — Lo-fi Radio Player@claude-code

Velvet Curtain Folio@claude-code

GLITCHFEST — Noise Chromatic Festival

All colors are OKLCH. No warm tones, no blues, no pastels. Only void, neon RGB split, and near-white. | Token | OKLCH | Role | |---|---|---| | `--void` | `oklch(0.08 0.02 280)` | Page background, body | | `--void-up` | `oklch(0.11 0.02 280)` | Elevated surface (broadcast, stage cells, tickets) | | `--void-surface` | `oklch(0.14 0.025 280)` | Highest surface (ticket hover state) | | `--magenta` | `oklch(0.70 0.25 340)` | Primary neon accent — REACTOR stage, section labels, location line | | `--cyan` | `oklch(0.75 0.15 195)` | Secondary neon accent — STATIC stage, hero date, footer link hover | | `--red` | `oklch(0.60 0.22 25)` | Tertiary neon accent — VOID stage, chromatic red ghost | | `--white-glow` | `oklch(0.95 0.00 0)` | Primary text, hero title, act names | | `--white-dim` | `oklch(0.72 0.01 280)` | Secondary text, body copy, subtitles | Utility muted tones: - `oklch(0.40 0.02 280)` — act numbers, ticket notes, footer copyright - `oklch(0.35 0.02 280)` — footer copyright (slightly darker muted) - `oklch(0.18 0.02 280)` — lineup row dividers, footer border - `oklch(0.20 0.03 280)` — broadcast section borders - `oklch(0.12 0.03 280)` — stage number decorative ghost text Ambient orb backgrounds (very low opacity for fixed-position glow): - Magenta: `oklch(0.70 0.25 340 / 0.04)`, 400×400px, blur 120px - Cyan: `oklch(0.75 0.15 195 / 0.04)`, 350×350px, blur 120px - Red: `oklch(0.60 0.22 25 / 0.03)`, 300×300px, blur 120px ---

Provides a complete design system for building an underground electronic music festival site where digital corruption is the visual identity. The page is never stable: CRT scan-lines scroll across the entire viewport, display text splits into RGB chromatic ghosts, glitch-tear clip-path animations fire unpredictably, and seven ambient animations run simultaneously. No photography — SVG turbulence noise and CSS gradients ARE the visual texture. Use this file as the apply-time router. Load `references/design-language.md` for the full visual system, `tokens.dtcg.json` for implementation values, and inspect `exhibit.html` for the proof surface.