How this was made, honestly.

The concept

This is the 25th site in a 25-site collection, and it was assigned one job: be the finale that misbehaves. The thesis came from the brief itself — knowing the rules is the price of breaking them — so the site is built as a zine that argues that thesis while demonstrating it. Colliding type scales, tilted cards, a word that dodges your cursor, a button labeled DO NOT PRESS that shatters the page and then puts it back. The reassembly is the point. Destruction without reassembly is vandalism; reassembly is taste.

The actual techniques

• GSAP 3.12 + ScrollTrigger (jsDelivr CDN) — the shatter/reassemble timeline (a power4.in fling, then an elastic.out return, staggered from:"random"), the one pinned scroll-jack, and section reveals.
• The CSS rotate property — every tilt uses the independent rotate: property, not transform, so GSAP's x/y/rotation composes with it instead of clobbering it. This is the whole trick that lets tilted things shatter and return home.
• Cursor dodging — a mousemove listener computes the vector from cursor to the TASTE chip and pushes it away via gsap.quickTo, clamped to the arena. After 12 attempts it surrenders, because the joke has to land somewhere.
• Idle marginalia — a 14-second inactivity timer (mousemove/scroll/keydown resets it) fades in margin notes that comment on your stillness.
• Konami code — a keydown sequence matcher toggles body.behave, which zeroes every rotation with one CSS rule and desaturates the page. Obedience mode.
• Four fonts, on purpose — Bodoni Moda (didone), Space Grotesk (grotesk), IBM Plex Mono (mono), Archivo Black (display), served by fonts.bunny.net.
• Zero images — barcode, crop marks, grid, tape marquees, halftone grain: all CSS gradients and repeating patterns. Plus a view-source love letter in an HTML comment, as promised.

The three-pass process

The site was built by an AI agent in an enforced loop: build, screenshot at desktop and 390px mobile, read the screenshots, fix everything, repeat.

Pass 1 — full structure and copy shipped first. Screenshots caught the cover stamp colliding with the tape marquee and footnote margins overflowing at laptop widths.

Pass 2 — spacing rhythm and color tension: the dark field-notes section earned its own footnote style, the button got its dashed hazard frame, mobile got a rebuilt cover stack.

Pass 3 — motion polish and honesty checks: elastic reassembly timing, reduced-motion fallbacks for every trick (the shatter becomes a polite toast), contrast verified everywhere, this guide typeset.

How to prompt an AI to build this

That last sentence is the one that matters.