Hoe je een browser in een handgedraaid theater verandert.

1. Begin met één fysiek werkwoord

Het concept begon niet met een kleurenpalet of een component library, maar met hand-crank. Een zoetrope maakt beweging door discontinuïteit: losse beelden worden leven omdat de hand gaten overbrugt. Dat werd zowel de interactie als de motion-taal.

2. Bouw diepte zonder WebGL

Vierentwintig smalle panelen staan met CSS rotateY() rond één denkbeeldige cilinder. De container draait naar discrete hoeken via een data-frame-attribuut. Een SVG-mot ervoor deelt dezelfde frame-index en verandert vleugelhouding met steps(). Dat levert echte perspectiefdiepte op zonder shader, canvas dependency of zware 3D-bibliotheek.

.z-frame { transform: rotateY(var(--angle)) translateZ(var(--drum-radius)); }
[data-frame="13"] .zoetrope-drum { transform: rotateX(-5deg) rotateY(-195deg); }

JavaScript doet maar drie dingen: de frame-index begrenzen, knoppen en drag vertalen naar die index, en de toegankelijke status bijwerken. Zonder JavaScript staat frame 12 volledig zichtbaar.

3. Laat typografie en materiaal botsen

Fraunces wordt niet als nette literaire serif gebruikt, maar als enorme, bijgesneden playbill-letter. Hanken Grotesk draagt cues en uitleg. Aubergine houdt het auditorium samen; kobaltblauw en vermiljoen gedragen zich als geschilderde decorstukken; pollengeel bedient de machine.

4. Gebruik AI als materiaalstudie, niet als identiteit

De kernpop, het zoetrope-apparaat, het silhouet en alle beweging zijn originele SVG, CSS en browsercode. Eén gegenereerd macrobeeld brengt cellofaan, gaas, koper en lak fotografisch dichtbij. Het exacte uitgevoerde prompt staat op de prompts-pagina. Het geselecteerde beeld werd na generatie visueel gecontroleerd op compositie, materialen en uitgesloten elementen.

5. Bouw de statische versie eerst mee

• Reduced motion: geen orbit, autoplay of scroll-reactie; frame 12 blijft als volwaardige poster staan.
• No JavaScript: de volledige navigatie, content, CTA en voorste pop blijven bruikbaar.
• No WebGL: de site gebruikt geen WebGL, dus CSS 3D en de statische state zijn de ingebouwde fallback.
• No media: het macrobeeld is aanvullend; de materiaalbetekenis staat ook in tekst en CSS-samples.
• Keyboard: vorige, speel/pauze en volgende zijn echte 48px-knoppen met een live frame-status.

6. Drie iteration passes

Elke pass startte pas nadat homepage, guide en prompts volledig waren gebouwd.

1. Defect + mobiel: gecontroleerd op overflow, focus, 320/390 compositie, console en reduced motion. De gerichte fixes staan in het projectlog.
2. Diepte + tactiliteit: getest waar extra scenische overlap het kernmoment versterkte zonder de copy te verdringen.
3. Cohesie + reductie: tempo, herhaling en finale werden teruggebracht tot één stem; gratuit decor werd verwijderd.

Het volledige technische passrapport leeft in references/review/iteration-log.md.

7. Reproduceer de aanpak

1. Schrijf drie concepten en kies één lichamelijk werkwoord als signature.
2. Lock kleur, type, beweging, fallbacks en payload vóór componentbouw.
3. Bouw de static final state eerst, voeg dan de lichtste techniek toe die de signature draagt.
4. Publiceer elke externe generatieprompt en vermeld AI-assisted beeld duidelijk.
5. Test 320, 390, 768 en 1440px, keyboard, reduced motion, no-JS, CSP en console.
6. Voer drie afzonderlijke screenshot-passes uit en laat een andere reviewer het concept aanvallen.
7. Deploy pas daarna en herhaal de gates op de echte URL.