HOW IT'S MADE
RIOT PRESS is a fake zine collective's landing page for a fake issue — but the printshop mess it imitates is real CSS, real canvas, and real restraint hiding underneath. Here's how the chaos was assembled, on purpose.
Punk zine culture runs on constraint: a photocopier, a stapler, scissors, and a deadline. The whole site borrows that production logic — ransom-note headlines built from "cut" letters, gaffer-taped photos, a tilted table of contents, and a manifesto that looks hand-corrected with a pen. The rule that keeps it from turning into noise: every rotation lives inside a controlled range (0.5°–3°) and every element still sits on an invisible 34px grid. Chaos with craft, not chaos instead of it.
The hero headline and logo aren't styled as strings — each letter is
its own <span>. Rather than hand-assign a class to
every glyph, six letter "variants" (background, border, font, rotation,
size) are defined once and applied automatically with
:nth-of-type(6n+1) through :nth-of-type(6n)
selectors scoped per word. Add or remove letters and the cutout pattern
keeps cycling correctly with zero markup changes. A visually-hidden
plain-text duplicate keeps it readable to screen readers.
The signature piece: a fixed full-viewport <canvas>
tracks pointermove and drops clustered lime dots along the
travel path — density and dot-count scale with pointer speed, like a
real nozzle needs distance to build up paint. A
requestAnimationFrame loop fades the whole canvas every
frame using globalCompositeOperation = 'destination-out'
with a low-alpha fill, which erases old paint faster than new paint
accumulates — that's the trail. The canvas sits on
mix-blend-mode: multiply so it tints the newsprint instead
of flattening it. A ring cursor replaces the system pointer as the
"nozzle." All of it is gated behind
matchMedia('(pointer: fine)') and disabled entirely under
reduced motion or on touch — no canvas, no listeners, no cost.
radial-gradient dot tile clipped by a second radial
mask-image to fake a vignette; the barcode is 30
JS-generated bars from a tiny seeded PRNG (deterministic, not
Math.random(), so it never reflows oddly on reload); the
manifesto's underlines are an inline SVG squiggle path baked into a
background-image data URI, repeated with
repeat-x.
Two marquees (top and bottom, opposite directions, different speeds)
keep the page visibly alive even when nothing else moves — a
requirement for something meant to be screen-recorded. A slow
diagonal-tinted "scanbar" sweeps down the page on a 9s loop to suggest
a scanner glass. The issue counter flickers on a randomized interval,
briefly swapping digits for glitch characters like a copier miscounting
— pure setInterval and textContent swaps, no
library. Every one of these pauses via document.hidden
and drops to a static frame under prefers-reduced-motion.