Making the
memory.

An interface
as evidence.The concept

“Side B Forever” treats an October 1994 mixtape as both a player and a found object. The visitor meets a midnight-navy bedroom, a store-bought cassette, a handwritten program, and an unsent note. None of the physical detail is an image: the deck face, dual meters, reels, radio, blind shadows, paper grain, pencil, stains, and thumbprint are HTML and CSS. Industrial labels use exact language; the handwriting is reserved for what Eli could not say aloud.

1. GesturePLAY or a song cue unlocks audio.
2. StateOne elapsed value owns the transport.
3. MotionCounter, packs, reels, and needles agree.
4. StoryTrack names turn mechanics into memory.

The deck tells
the truth.Mechanical CSS + one clock

The nested deck lives in index.html; brushed gradients, inset wells, conic-gradient reel teeth, and real five-pixel button travel live in styles.css. In main.js, renderFrame() advances one elapsed value. It converts that value into the three-digit counter and opposing tape-pack scales. Reel angles use the inverse of each changing pack radius, so the nearly empty reel turns faster than the full one. startLoop() runs only while the transport moves, and visibility changes cancel every animation frame.

Hiss, bass,
then chatter.The sound worth remembering

createAudio() builds the soundtrack after a user gesture. Brown noise becomes warm hiss; a triangle bass and three softly detuned voices pass through a low filter for the blurred keys. Track selection calls seek(). Its companion burstChatter() loops the noise buffer at high speed, gates it into irregular syllables, adds a rising sawtooth chirp, opens the filter, and races the counter. The sound stops at the exact moment the reels settle. Rewind uses a lower, rougher version of the same physical language.

Dust in the
lamp beam.Atmosphere without assets

A fixed inline SVG turbulence field supplies grain without a request. Repeating gradients become ruled paper, blind slats, tuner marks, meter ticks, and label lines. The bedroom radio and lamp use layered borders, clipping, shadows, and radial light. Pressing the shade calls lampClick(): a synthesized switch snap opens the beam and exposes Eli’s hidden pencil note. A single opening curtain orchestrates the load; later IntersectionObserver reveals are deliberately subtle so content never disappears into blank screenshots. flipSide() runs a mechanical shutter, rewrites the program and dedication, and shifts every surface into a darker Side B token set.

Three voices,
five materials.Palette + type tokens

--hand is Caveat for labels and confessions. --body is Archivo for readable liner prose and blunt guide headings. --mono is Space Mono for counters, timestamps, model numbers, and controls. That division makes typography behave like three physical writing tools.

Reproduce the
feeling, not the layout.A useful prompt shape

Ask an AI coding agent for a single interactive artifact, not a marketing page. Specify an era, a real mechanism, an intended recipient, a discovery place, and one secret. Require shared state between sound and motion, code-drawn materials, responsive tactile controls, an intentional reduced-motion mode, and enough invented evidence that the object feels used before the visitor arrived.