Mixtape Nostalgia

One Shot - Build "Cassette & Pencil": one cassette tape with a pencil stuck through its hub. Turn the pencil and the tape winds. You hear the music scrub forwards and backwards, and you see the tape move from one reel to the other. Draw it like a grimy, funky, early-2000s British comic and album cover, and make the tape behave like a real C90.

Write it as an illustrator with an ink brush and a creative technologist who has taken a cassette apart. Every number on screen must be correct. ONE object, ONE gesture: polish beats features.

## Technical rules

- ONE self-contained HTML file. Use no libraries. You may load fonts from Google Fonts: Permanent Marker for everything hand-lettered, and Inter for the tiny labels, each with a system fallback. Make no other network calls, and use no images or audio files: all art and all sound are made in code.
- It runs in a sandboxed iframe that can be 0×0 at load. Size it with a ResizeObserver, never throw on a zero size, and use no alert(). Wrap every localStorage call in try/catch.
- Fill the window from a 360px phone up to a large desktop. Support mouse, touch and keyboard. Hold 60 fps, cap devicePixelRatio at 2, pause when the tab is hidden, and respect prefers-reduced-motion.
- No placeholders, no TODOs and no console errors.

## The look

The look is ink-heavy punk comic art. Thick black brush outlines swell and taper, with a little blob of ink where lines meet. Fills are flat with no gradients. Shadows are halftone dots or scratchy cross-hatching. There are scuffs, a coffee-ring stain, a couple of torn stickers and a few ink splatters. Use a limited, slightly dirty palette:

- ink #141414
- paper cream #EDE4CC
- toxic teal #2F8F83
- signal red-orange #E8432E
- mustard #E3B23C
- tape oxide brown #5A3A22

**Line boil.** Every outline re-jitters slightly at 12 fps, cycling through three variations, like hand-drawn animation shot on twos. Use SVG feTurbulence and feDisplacementMap with the seed swapped every frame, or jittered canvas paths. This is the signature, so keep it subtle. Turn it off for reduced motion.

**The cassette** sits big and centred, tilted a few degrees, seen face-on, with a chunky halftone drop shadow.

- Shell: teal, about 10 × 6.4 cm. Show the five screws, the two hub holes with their six teeth, and the window showing both tape packs.
- Bottom edge: the trapezoid with the head openings.
- Top edge: the two write-protect tabs.
- Label: cream, with a red-orange band, a printed "A" in the corner and "MIXTAPE" scrawled in marker.

**The pencil** is a yellow hexagonal pencil pushed through one hub, drawn in dramatic foreshortening. The eraser end and its metal band come toward the viewer, and the body shrinks into the hub.

- Model it as a real 3D hexagonal prism and project it with a simple perspective camera, so its six flat faces and a printed "HB" visibly roll round as it turns.
- Spin on its own axis only. The pencil never wobbles or swings.

**The tape packs** are drawn to scale: tape 11 µm thick, hubs about 21 mm across, about 129 m of tape. The pack radius follows r = √(r_hub² + length × thickness / π), so one pack grows as the other shrinks. Each reel turns at tape speed ÷ its own radius, so the two reels visibly turn at different speeds. That's true and lovely; show it.

**Leader tape.** The last few seconds at each end are clear leader, which carries no sound. Draw it pale and see-through in the window.

**Light and dark.** Light mode is a mustard wall. Dark mode is a near-black night with one sodium-orange light. In both, the cassette stays the same object.

## The gesture: turn the pencil

Drag in circles anywhere on the stage. The angle you sweep around the pencil's hub turns the pencil one-for-one. Release mid-spin and it keeps spinning, then slows from tape friction, so a good flick gives about ten turns.

- Winding tape ONTO the pencil's hub pulls it past the head opening from the other reel. That moves the tape position, and that is when the music scrubs.
- Turning the other way pays tape OUT. Nothing pulls it, so it goes slack instead.
  - Slack bulges in the window and then droops out of the bottom opening as a growing loop of brown tape.
  - Slack is capped; beyond the cap the pencil resists and won't turn.
  - Winding back takes up the slack first, silently, before the tape moves again.
- Tap the other hub, or press P, to pull the pencil out and push it into that hub.
- Flip the cassette with F or the FLIP button. It turns over in one smooth 3D flip to side B: a new label "B" and new songs. The tape runs the other way, so side B starts where side A ended. That is true of real cassettes.
- PLAY (Space, or tap the label) plays the tape at the real 4.76 cm/s. Whichever reel the pencil is in, the pencil spins along with it. When the tape runs out: clunk, it stops, and a scrawled "FLIP IT." appears.
- Remember the side and tape position in localStorage. A real tape stays where you left it.

**Readouts.** Show these in small Inter caps with hand-lettered numbers:

- PENCIL TURNS
- TAPE: metres on each reel
- SIDE AND TIME, e.g. "A 23:41 / 45:00"
- TURNS TO REWIND, computed from the pack radii and counting down as you wind

Rewinding a whole C90 by pencil takes about 1,200 turns. Let the numbers show it.

## The music: the most important part

Each side is a 45-minute mixtape of ten original instrumental songs, about 4 minutes 20 seconds each, with a 3-second gap between them. Everything is synthesised; nothing is sampled. The vibe is dusty and funky: trip-hop, dub and boom-bap at 82 to 104 BPM.

Instruments:
- a saturated drum machine (kick, crunchy snare, swung hats)
- a fat round bassline
- Rhodes or organ chords
- a reedy melodica lead with breath noise
- dub delay throws on the snare and the lead

Each song comes from its own seed, which sets:
- key and mode
- a four-chord loop from a short curated list
- the bass riff
- the drum pattern (boom-bap, one-drop, funk 16ths or half-time)
- the lead's motif
- an arrangement: filtered intro, groove, hook, breakdown to bass and delay, then outro

Give every song a silly hand-lettered title made from word lists (e.g. "RAT KING DISCO"), shown as "A4 · RAT KING DISCO". Write no lyrics and no vocals, and don't imitate any existing song, riff or band.

**Make the audio a pure function of tape time.** An AudioWorklet receives the tape position and speed every frame. It smooths the speed and evaluates song(t) sample by sample at whatever t the tape is at.

- Notes, envelopes and oscillator phase are computed from t. Noise is a hash of the sample index, and delay taps are song(t − d).
- This makes playing, scrubbing and running backwards exact, and the pitch follows the speed like real cue and review.
- Load the worklet from a Blob URL. If that fails, fall back to a ScriptProcessorNode running the same function.

Tape character:
- soft hiss
- light wow and flutter
- a little saturation

Fast winding:
- Above about 4× speed, cross-fade into filtered tape chatter, the real fast-wind sound, so the audio never aliases or pierces.
- At standstill, fade to silence, with no DC thump.
- Keep the master at about −18 dBFS RMS with a gentle limiter.

Mechanical sounds:
- a wooden creak as the pencil turns
- a soft tick from the hub teeth
- the leader's flutter
- a dead clunk at the end of the tape

Audio starts on the first tap or drag, as browsers require. Show a MUTE toggle (M).

## Facts ("?" panel)

Start with a how-to line, then these facts:
- Philips introduced the compact cassette at the Berlin Radio Show in August 1963. Lou Ottens led the team.
- The tape moves at 4.76 cm a second (1⅞ inches).
- A C90 holds about 129 m of tape, 3.81 mm wide and about 11 µm thick, several times thinner than a hair.
- Rewinding a whole C90 with a pencil takes about 1,200 turns. Show the app's own computed number.
- Side B uses the other half of the tape's width, so flipping it runs the same tape back the other way.
- The first few seconds are clear leader tape, which carries no sound.
- Snap the tab on the top edge and a deck won't record over that side. A bit of sticky tape undoes it.
- A six-sided pencil catches the hub's six teeth.
- Simplified: this tape plays without a deck, because it's a cartoon.

## Tour and first impression

TAKE THE TOUR (T) runs about 45 seconds and is made for screen recording. A caption in marker narrates each step; any interaction stops it. The steps:

1. The tape plays mid-song.
2. The pencil drops into the left hub with a thunk.
3. The pencil winds back with chipmunk reverse scrubbing, then flicks.
4. The pencil pays out a loop of slack, then takes it back up.
5. The tape fast-winds to the end of side A: chatter, then clunk.
6. FLIP IT. The cassette flips.
7. Side B plays.

On load, show the cassette with the pencil in the left hub, side A at 23:41, and the reels mid-wind. Caption: "Wind it back with a pencil." Show the buttons TAKE THE TOUR and PLAY. The first touch starts the sound.

Keys:
- Space: play
- ← →: wind (hold; Shift for faster)
- P: switch hub
- F: flip
- M: mute
- T: tour
- ?: facts

## Do NOT add

Add nothing that isn't on this page. In particular:
- no tape deck, boombox, personal stereo, hands, people, characters or faces
- no band names, logos or real brands
- no VU meters or spectrum bars
- no record button, tape picker or share buttons
- no 3D engine or orbit camera
- no particles, bloom or gradients
- no other objects on the table

The fun comes from the tape, the pencil and the music.

## Output

Think through the architecture briefly, then write the complete file from `<!doctype html>` to `</html>`. If you can run a browser, check these and fix what you see:
- 360px wide and desktop width
- light and dark mode
- a 0×0 frame
- reduced motion
- the full tour
- a whole side played at 8× speed

If you must trade scope, protect things in this order:
1. the music and its scrubbing
2. the pencil gesture
3. the ink look and line boil
4. the reels and slack
5. the flip
6. the tour

---

Process: one Claude Code session with Claude Opus 5.5 at max effort, and no human edits. Its first three attempts to write the whole file in a single reply hit the output-token limit and were resumed. It then wrote the file in ten parts, joined them, and tested it in headless Chrome as the prompt asks: 360 px and desktop widths, light and dark, a 0×0 sandboxed iframe, reduced motion, the full tour and a whole side at 8×. It fixed what it found: outline layering on the pencil, the printed "A" hidden under the pencil (moved to the label's lower-left corner), the slack loop's size, fast-wind chatter that was too bright, and a creak and hiss that were too quiet. The audio was measured rather than listened to: about −18 dBFS RMS at normal speed.