How the Chaos Works

An anti-design zine with a spine

MAXIMAL is issue #001 of a fictional design zine arguing — loudly — against minimalism. Four essays, two fake ads, one escalation button. The aesthetic school is controlled chaos: the punk-zine and anti-design lineage of David Carson's Ray Gun, Emigre, GeoCities, and the ransom-note flyer on a phone pole — but built on modern CSS with the readability rules of a broadsheet.

The trick the whole site demonstrates: maximalism only reads as confident when there's a system underneath. Clashing colors, four typefaces, rotated overlapping blocks — and yet line lengths never pass 68 characters, body contrast stays AA, and every block snaps to the same 12-column grid. The chaos is a costume. The skeleton is Swiss.

• #ff2e88 hot pink
• #b6ff2e acid green
• #2ee6ff cyan
• #7b2eff purple
• #ffe62e yellow
• #0d0d0d ink
• #ffffff paper

Five loud values plus black and white — never more. Rainbow soup is what happens when maximalism has no palette; this is clashing on purpose, with the same five crayons every time.

The MORE!! escalation state machine

The signature interaction is one integer. The current chaos level lives in a tiny state object; rendering it is just toggling body classes, so CSS owns every visual change and JS owns only the side effects that spawn things.

var chaos = { level: 0 };
var onEnter = { 1: rainStickers, 3: startTrail, 5: finale };

function applyLevelClasses() {
  for (var i = 1; i <= 5; i++)
    body.classList.toggle('chaos-' + i, chaos.level >= i);
}

• LV 1 a dozen stickers rain in (Web Animations API drop) and stick where they land, in a fixed pointer-events-none layer
• LV 2 pure CSS: body.chaos-2 hardens headline shadows and sets --marquee-dur from 22s to 7s
• LV 3 a throttled pointermove listener spawns a trailing echo of tiny shapes (max 18 alive at once)
• LV 4 pure CSS again: one section gets --r-add: 1deg; one ad gets scale: 1.06 — polite, specific, ridiculous
• LV 5 a capped 64-piece confetti burst; the button, exhausted, becomes “ENOUGH.” and offers undo everything

Because levels are cumulative body classes, reset is honest: set the integer to 0, re-toggle classes (CSS transitions ease every rotation and shadow back — the “deflate”), remove the trail listener, and fade-and-remove() every spawned node. Nothing leaks. Pressing the button five times and undoing leaves the DOM exactly as it started.

// reset: one integer down, everything else follows
chaos.level = 0;
applyLevelClasses();          // CSS transitions = the deflate
stopTrail();                  // removeEventListener + clear layer
stickers.forEach(fadeOutThenRemove);

Keeping type readable inside maximalism

• Contrast is non-negotiable. Body text is only ever ink-on-paper or near-white-on-ink. The five loud colors live on chips, borders, shadows, and display type. Every ransom-note chip pairing was checked: black text on pink/acid/cyan/yellow, white text only on purple and ink.
• Jitter one word at a time. Headlines are split into per-word spans; the shear animation runs on :hover of a single word, wrapped in @media (hover:hover) and (prefers-reduced-motion: no-preference). The line you're reading never moves — only the word you're poking.
• Rotation has a budget. −3° to 5°, scaled to 35% on phones. Past ~5°, line starts stop aligning with the reading eye's sweep and comprehension drops. The chaos is in the composition, not the sentences.
• Reduced motion = same page, zero motion. The composition survives intact — all rotations, colors, and stickers — but marquees freeze, reveals render instantly, hover jitter is off, and the MORE button skips rain/trail/confetti animations while still applying every level's static styling.

Take it. We insist. That's the whole point.

1. Rotate blocks, not layouts. Place everything on a boring grid, then apply transform: rotate() to the finished block through a CSS variable. You get zine energy with none of the layout debt — and one media query calms it on mobile.
2. Make state an integer, render it as classes. Any “escalating” UI — onboarding steps, celebration tiers, theme intensities — is easiest as one number mapped to cumulative body classes. CSS does the styling; JS only handles spawn/despawn side effects.
3. Give every particle a cap and an onfinish. If a decoration can't tell you its maximum live count and who deletes it, it will eventually eat a phone. WAAPI's onfinish makes the animation itself the janitor.
4. Loud colors on chips, calm colors on paragraphs. You can clash five neons all day if body text never sits on one that fails AA. Decorative maximalism and accessible reading are not in conflict — they're different layers.
5. Confess your grid. A “show the grid” toggle costs 15 lines and turns your flashiest choices into demonstrated skill. If the chaos is deliberate, prove it.