A cream mixtape plays in a brushed-aluminium cassette deck against a mustard wall: the door shuts, the counter resets, PLAY latches, the near-empty hub spins faster than the full one, VU needles swing, and the track list is written in blue-black marker on the J-card beside it.
Written and rendered by AI CSS Animations Oct 18, 2026
The compact cassette was introduced by Philips in 1963 and, through home decks and portable players, became the favorite medium for personal music compilations in the 1970s, 80s and 90s. A mixtape was recorded track by track from records, radio or other tapes, and its track list was written by hand on the folded J-card insert. Hi-fi decks of the era had piano-key transports, analog VU meters and a mechanical tape counter, and the tape ran past the heads at 4.76 cm per second. Independent labels still release cassettes, and the handwritten mixtape remains a familiar image of care and nostalgia.
Make a 10-second mixtape scene: a handmade cassette plays in a silver hi-fi deck, its reels turning at their true speeds and its meters swinging, while the track list is written on the J-card beside it. <inputs> If I don't give you something, use the default and don't ask. - Mixtape: "Summer Mix '89", side A, labeled in marker; dedication "for Juno, from Sam". - Side A, in order (title · artist · time): Paper Lanterns · The Lowlights · 3:42; Slow Ferris Wheel · June Atlas · 4:05; Coast Road · Halfmoon Club · 3:18; Your Old Jacket · Petra & the Pines · 3:56; Neon Laundromat · Kit Morrow · 4:21; Last Bus Home · The Quiet Lakes · 3:30. Total 22:52, on a 46-minute tape (23:00 a side). - Deck: Arden SD-420 (fictional). - Length: 10 seconds. </inputs> <direction> - Palette: wall mustard #D89A3C lifting to #E9B860 in a soft pool of light from the upper left behind the deck; walnut shelf #5B3920 (top edge at y 840 with a 2px highlight); aluminium faceplate #C8CACB with shade #8E9194 and highlight #EEF0F0; black trim #1C1C1E; cassette shell cream #F1ECE0, label #FFFDF6 with an orange #E8743B and a brown #8C4A2F stripe; tape brown #4A2A1C; hubs #F6F4EE; meter faces #F2E6C4 lit warm from behind, needles #1A1A1A, red zone #C8382E; LEDs green #5BE37A and red #FF4A3D; marker ink blue-black #1E2A5A; J-card #FBF8EF with faint blue rules #BFD3E8. - Composition, final view: the deck front at x 120–1260, y 330–840, standing on the shelf with a soft contact shadow; the open clear cassette case standing at right, x 1350–1790, y 170–840, its J-card front panel facing us at x 1375–1765, y 200–815. - The faceplate: brushed aluminium (an feTurbulence with baseFrequency 0.002 0.9 for fine horizontal brushing at 8%, under a broad vertical sheen gradient), corners 10px, four black hex screws. Left, the cassette door (x 170–640, y 380–720): a chrome-edged frame holding a smoked acrylic window (#2A2724 at 50%) with a soft diagonal reflection, an EJECT key above it. Right, two VU meters side by side (each 220×140, at y 390), scaled −20 to +3 dB with the red zone from 0 and labeled L and R; below them the three-digit mechanical counter (white digits on black drums in a recessed window, with a small RESET button) and a power switch with its red LED. Along the bottom, six black piano keys with white legends (REC, REW, PLAY, FF, STOP, PAUSE) and a green PLAY LED. Legends in "Saira Semi Condensed" 600, 20px, uppercase, tracked 0.12em; ARDEN in 700 at 30px and SD-420 STEREO CASSETTE DECK at 20px. - The cassette, seen through the window at about 420×265: a standard shell in 100 × 63.5 mm proportions, cream, with five screws (four corners and bottom center); the label with its two stripes, "Summer Mix '89" and a big A in marker; the clear window band in the middle showing both tape packs (glossy brown discs with a soft ring highlight) around white hubs with six teeth each; and the trapezoid opening along the bottom edge where the tape runs between two guide rollers. - Reels, from real tape speed: 4.76 cm/s, left pack to right. At the start of side A the left pack is nearly full (radius 24.6 mm) and the right nearly empty (11.4 mm), so the right hub turns about 2.16 times as fast as the left (ω = v / r): that mismatch is the tell. Over 10 seconds the radii barely change, so each angle is the tape travelled divided by its radius, with v ramping up over 0.15s on PLAY and down over 0.25s on STOP, all in closed form. The counter steps once per take-up revolution and rolls like an odometer, each drum turning over the last 30% of a count. - Meters: the needles follow a seeded music envelope at 96 BPM (kick on every beat, snare on 2 and 4, the right channel a little busier), precomputed at load and passed through a needle response with a 300ms rise and 1 dB overshoot; peaks hover around 0 dB and touch the red now and then; at rest both needles lie on the left stop. - The J-card, a ruled card behind the case's clear plastic (a faint edge highlight and one soft reflection). Already written when it comes into view: "Summer Mix '89" in "Rock Salt" 400, 44px, and "for Juno, from Sam" in "Kalam" 700, 26px. During the piece each track writes on as two lines: the number and title in Kalam 700, 26px, then the artist and time in Kalam 400, 22px, indented; then the total 22:52 at the bottom with a quick underline. The marker writes left to right through a clip that follows the text at about 700px/s, the ink a touch darker where each line starts. No hand or pen. - Camera: starts at 1.25× centered on the cassette door and pulls back to the final view by 3.0s on easeInOutSine. - Mechanics: keys press 8px over 0.08s and latch; the door swings on a bottom hinge; moves use cubic-bezier(0.3, 0, 0.2, 1) with no bounce beyond a 2px settle. - Premium: a deck you could press PLAY on: brushed metal, a cassette with screws, hubs and tape packs, reels turning at their own true speeds, needles with weight, and real handwriting. Cheap: a flat cassette icon with two identical spinning circles and a script font. - Banned: real tape or deck brands (TDK, Maxell, Sony and the like), noise-reduction logos, both reels turning at the same speed, tangled tape, neon or vaporwave gradients, glow, a hand or pen, anything flashing more than 3 times per second. </direction> <structure> - 0.0–0.8s: close on the open door: the cassette slides down into the door's holder and the door swings shut (tilted 14° → 0°) with a 2px settle. - 0.8–1.2s: RESET is pressed and the counter's drums roll back from 217 to 000. - 1.2–1.5s: PLAY presses and latches; the PLAY LED lights; the reels spin up and the needles start to move. - 1.5–3.0s: the camera pulls back, revealing the J-card with its title and dedication. - 3.0–6.6s: the six tracks write on, 0.6s each. - 6.6–7.4s: the total 22:52 writes on and is underlined. - 7.4–8.0s: the tape plays on; the counter reaches 004. - 8.0–8.4s: STOP presses; PLAY springs up; the reels coast to rest; the needles fall back. - 8.4–10.0s: hold, nothing moving. For other lengths, stretch the writing beat; keep at least 1s of hold. </structure> <build> - One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code. - window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame. - Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop. - Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. - Engine: SVG. Draw in inline SVG, setting transforms, clip paths and attributes from seek. The music envelope and the needle response are precomputed once at load into arrays at 120 samples a second; reel angles and the counter are closed-form functions of t. </build> <check> Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the right hub visibly turns about twice as fast as the left, the tape crosses the bottom opening between the rollers, the counter reads 000 after RESET and moves only while playing, every J-card line is readable marker that stays inside the card, and the needles rest on their stops at the end. Confirm seek(10) and seek(11) match, so the final frame holds. </check>
Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.
Original lyrics land word by word on a 120 BPM grid over a dark plum ground: small italic words tuck against giant expa…
A podcast clip card on deep forest green: code-drawn bread cover art, a scrolling mirrored waveform whose peaks fall un…
A brushed-aluminium synth plugin with walnut end cheeks powers up on a dark desk: a 16-step pattern plays, VU needles s…
A coral-colored audio visualizer: a track synthesized in code drives a ring of 128 cream spectrum bars around an ink di…
More like this on the motion design inspiration board: Music video inspiration