1 / Separate the ideas
Assign every site a different metaphor, interaction model, composition, palette strategy, and type voice. If two ideas can trade styles without changing meaning, they are not different enough.
MASTER REPRODUCTION GUIDE
Design the mechanism first.
Procedural Twenty starts from a strict constraint: imagery must be computed. That makes the rendering technique part of the art direction rather than an interchangeable background.
2 / Build one file
Keep each experience in a single HTML document. Put semantic content first, CSS second, and an isolated procedural renderer last. External ES modules are reserved for techniques where they materially help.
3 / Verify three times
Pass one checks desktop composition and errors. Pass two checks 375px flow and legibility. Pass three checks motion, reduced-motion, interaction, performance, and route integrity.
The twenty signatures
01Chromatic TideRaw WebGL fragment shader + scroll uniforms
02TYPE / ELECTRICVariable font axes + pointer velocity
03VITREOUS 07Three.js transmission material + scroll orbit
04SIGNAL / NOISECanvas ASCII field + brutalist editorial grid
05murmurationParticle morphing between parametric formations
06ORDINALSwiss precision grid + live inspect overlay
07Lumen CloudAnimated Canvas gradient mesh + restrained glass
08PHOSPHOR RELAYInteractive shell + CRT phosphor simulation
09間 — MAVertical writing + scroll-drawn SVG ensō
10FIELD TELEMETRYAccessible live Canvas charts + hover tooltips
11DOUBLE REGISTERDual-layer Canvas moiré and pointer registration
12NOCTURNE FMGenerative Web Audio sequencer and oscilloscope
13ANEMOI ATLASCanvas vector-field streamline cartography
14FOLD HOUSECSS 3D architectural folding controlled by scroll
15CHROMA WORKSInteractive OKLCH mixing laboratory
16SECOND HANDLive CSS horology with timezone complications
17UNDERSTORYRecursive L-system growth garden
18SOFT MACHINEDraggable neo-GUI window composition
19SEED VAULT 44Interactive Voronoi biodiversity map
20HEAVY WORDSCanvas rigid-body typographic gravity
Performance
Cap rendering resolution, avoid allocating inside animation loops, and use passive scroll listeners. Decorative canvases stay out of the accessibility tree.
Accessibility
Motion is enhancement. Maintain semantic headings and landmarks, visible focus, readable scrims, keyboard access, chart labels, and a complete static state.
Deployment
The output is a plain static folder. Any HTTP server can publish it with no framework, build, or server runtime.