An AI Built a Side B Forever — A Working October 1994 Mixtape Website — Here’s the Design Trick That Makes It Work

The ‘Side B Forever’ Experience: An Interactive Time Capsule

This digital installation transforms a static webpage into a tactile, playable cassette deck, capturing the essence of a 1994 mixtape. Its core innovation lies in rendering physical mechanisms—reels, meters, and shadows—entirely through HTML and CSS, creating an authentic, nostalgic interface that responds to user interactions with mechanical precision. The AI-crafted site not only simulates a vintage tape player but also conveys a personal story, blending digital craftsmanship with intimate memory.

Design Components and Signature Techniques

The site employs a carefully curated color palette inspired by analog media, featuring deep navy, muted smoke, and marker-red accents to evoke a vintage feel. Typography is deliberately divided: Caveat for handwritten labels and confessions, Archivo for liner prose, and Space Mono for counters and controls, mimicking the varied tools used in physical tape annotation. The interface’s core is a mechanically animated cassette deck, built with nested HTML structures styled with CSS to include inset wells, conic-gradient reel teeth, and layered shadows, all without images. The animation hinges on JavaScript functions that advance reel angles, synchronize tape counters, and simulate tape movement, closely mimicking real tape mechanics. Audio, crafted with createAudio(), responds to user gestures, blending brown noise, filtered bass, and detuned voices to evoke the warmth of analog sound. Subtle atmosphere—grain, ruler lines, tuner marks—is generated via inline SVG turbulence and CSS gradients, reinforcing the tactile, analog atmosphere. User interactions—pressing the shade, flipping the cassette, or clicking play—trigger CSS transitions and JavaScript functions that reveal hidden notes, shift the interface into ‘Side B,’ and synchronize sound and motion, making the experience feel genuinely used and personal.

The Three-Phase Creation Pipeline

The project was developed through a streamlined three-pass process: initial build focused on translating physical tape mechanisms into HTML and CSS, followed by a critical review to refine animations, interactions, and atmospheric details, ensuring authenticity and responsiveness. Finally, an art director’s approval verified the emotional resonance and mechanical fidelity of the experience, guided by the Fable AI’s comprehensive Field Guide, which emphasizes storytelling through materiality and layered interactions.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 60 of 175, “mixtape”):
SIDE B FOREVER — a bedroom mixtape, October 1994. Aesthetic: teenage bedroom at midnight; handwriting on a store-bought cassette. Palette: ink navy #1c2137, cassette shell smoke grey, marker red, highlighter yellow, paper. Fonts: caveat (handwritten labels), archivo (liner body), space-mono (counter). SIGNATURE: a CASSETTE DECK that plays — press the chunky mechanical PLAY (buttons depress with travel), spools rotate at believable ratios, tape transfers reel to reel over the run, VU needles dance to a lo-fi synthesized loop (Web Audio: warm hiss + bass + soft keys); the track list is handwritten, and selecting a track FAST-FORWARDS with pitch-up chatter and counter spin. Liner notes about who it was for. B-side flips the whole page theme darker. Unforgettable: the fast-forward sound.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/mixtape/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Explore the ‘Side B Forever’ Room and More

Visit the live site to immerse yourself in this handcrafted, AI-built mixtape experience. Curious about other inventive showcases? Browse all 175 projects at the central hub, each crafted with a similar approach to blending hardware-inspired mechanics and storytelling through code.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

• Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
• Room 58: The Atlantic Cable Company — Race the Signal
• Room 59: The Meridian Carousel — After Dusk, Since 1908

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI