README.TXT · THE HONEST MAKING-OF

HOW THIS SITE WAS MADE

No stock assets, no AI images, no build step. One HTML file per page, one stylesheet, one script — and a lot of gradients.

THE CONCEPT

CHROMEHEART is a fictional Y2K netlabel, and the design brief was a tightrope: maximalism with modern craft. Every kitsch element from 2001 — hit counters, guestbooks, spinning badges, sticker sheets — rebuilt precisely instead of ironically. Nostalgia as a design language, not a mess.

THE ACTUAL TECHNIQUES

CHROME WORDMARK Pure SVG: a stack of seven <text> layers fakes the extrusion, a sky-to-horizon linearGradient makes the chrome face, an animated gradient sweeps a sheen across it, and an feTurbulence + feDisplacementMap filter gives the whole stack a slow liquid wobble.
CURSOR SPARKLES A fixed <canvas> spawns 4-point star particles on pointermove — throttled, capped at 220 particles, twinkling via a sine on their fade. Disabled on touch and for reduced-motion users.
CASSETTES & STICKERS Zero images. The tapes are nested divs with gradient plastic, conic-gradient spoked reels spinning on a CSS animation, and per-release theme colors via custom properties. Each sticker is hand-drawn SVG or clip-path art with a die-cut white edge.
HIT COUNTER A fake odometer: each digit is a masked column of 0–9 that rolls to its value with a staggered spring transition. The count itself persists (and increments) in localStorage.
GUESTBOOK Fully working, localStorage-backed, HTML-escaped, seeded with three period-correct entries. Your entries never leave your browser.

Fonts are Bungee, Silkscreen and VT323 from fonts.bunny.net. No JS libraries at all — the whole site is vanilla.

THREE PASSES OF SELF-CRITIQUE

Built the full structure, then screenshotted desktop and mobile with a headless browser. First look flagged flat hero composition and a sticker collage that collapsed awkwardly on small screens.

Tightened the type hierarchy (section titles got the chrome treatment), rebalanced the sticker field, added the perspective floor-grid under the hero, and fixed contrast on every chip and label.

Polish details: odometer stagger timing, tracklist expand easing, reel spin offsets per tape, guestbook entry-in animation, reduced-motion fallbacks verified in screenshots.

PROMPT AN AGENT TO BUILD THIS

“Build a static one-page site for a fictional Y2K netlabel. Deep purple-black background, aqua #7df9ff and hot pink #ff6ec7. Make an SVG chrome wordmark from layered gradients with an animated sheen, a canvas cursor sparkle trail, a collage of hand-drawn SVG stickers that tilt in 3D on hover, six CSS-only cassette tapes with expandable tracklists, a localStorage guestbook, and a rolling odometer hit counter. No images, no libraries. Screenshot it, critique it harshly, and iterate three times.”

That’s genuinely the whole recipe. The craft is in the iteration loop — screenshot, critique, fix — not in any secret tool.

◀ BACK TO CHROMEHEART