The Cassette Tape Deck Animation, Built on Real Tape Physics

Tunerva — Thu, 12 Nov 2026 16:48:05 +0000

Originally published on tunerva.app.

Tunerva's Deck face hides a twin-well stereo cassette deck under its display. It would have been easy to fake — a looping GIF, a CSS spin, a video file. Instead the tape animation runs the same math a real Compact Cassette obeys: a constant tape speed of 47.6 mm/s, tape packs that conserve area as they transfer from one reel to the other, reel speeds that follow from v = ωr, and a mechanical counter geared to the take-up hub. This post is the geek-level tour of how it works.

A real capture, not a mockup: Tunerva Deck playing a station in the browser — watch the 15-second capture (mp4). The playing deck's reels turn at pack-dependent rpm, the level meters ride the actual audio, and the counter integrates the take-up hub's rotation.

The tape pack is area, not a timer

Most tape animations cheat the same way: the left reel's radius shrinks linearly while the right one's grows linearly. Play one for a simulated hour and the two packs' areas drift apart — tape appears from nowhere, or vanishes. Real tape can't do that. A C90's tape is a fixed length of material wound between two hubs, so at every instant the two pack cross-sections sum to a constant:

rL² + rR² = rhub² + rfull²

Tunerva's deck model uses true C90 geometry in millimetres — hub radius 11 mm, full-pack radius 24.7 mm. Given a side's progress p (0 at the leader, 1 at the end), the take-up radius is rR = √(11² + (24.7² − 11²) · (0.06 + 0.94p)) and the supply radius falls out of the conservation law above. The 0.06 offset is the leader: a real cassette starts with a few percent of its wind already on the take-up side. Because radius grows with the square root of progress, the pack visibly slows its growth as it fills — exactly the way a real deck's packs behave, fast at first, then settling.

Reel speed is v over r — nothing is keyframed

The capstan pulls tape at a constant 47.6 mm/s (1⅞ inches per second, the Compact Cassette standard). The hubs are slaves to that: each reel's angular speed is simply tape speed divided by its current pack radius. With a full pack that's about 19 rpm; run the same reel down to the bare hub and it spins at about 41 rpm. So over one 45-minute side, the supply reel accelerates more than twofold while the take-up reel lazes slower and slower — and in the animation you can watch it happen, because no angle is ever scripted. Every frame, each deck integrates dθ = (47.6 / r) · dt from the pack radii the conservation law produced a moment earlier.

A full side is a real C90 side: 45 minutes of playback to run the counter out, at which point the deck rewinds and starts the side again — the same loop a real auto-reverse-era deck owner would recognize, minus the wait.

Spec	Value
Tape speed	47.6 mm/s (1⅞ ips), constant, capstan-true
Tape format	C90 — 45 minutes per side
Hub radius	11 mm
Full pack radius	24.7 mm
Reel speed	≈19 rpm at full pack → ≈41 rpm at the hub (ω = v/r)
Counter	Belt-driven off the take-up hub; 0.129413 counts per radian; a full side lands on exactly 900
Toy FF / REW	540× wind — a full side in about 5 seconds, still integrated through the same pack physics
Rendering	Canvas 2D, drawn every frame — no video, no sprites, no image assets in the deck itself

The counter is belt-driven, so it lies like a real one

On a real deck the tape counter isn't a clock — a belt off the take-up hub drives it, so its rate depends on how much tape is wound on that hub. Tunerva copies the mechanism, not the look: the counter integrates the take-up hub's rotation at 0.129413 counts per radian, a gear ratio chosen so a full C90 side lands on exactly 900 counts. Early in a side, with the take-up pack small and spinning fast, the counter gallops; late in the side it crawls. RESET zeroes it (from the playing deck only — counters were always a playing-deck affair), and switching decks carries progress, angles and counts through a visible rewind before the incoming tape starts, the way you'd rewind a played tape before filing it back in the well.

Deck A cued, Deck B playing. The center column carries the deck selector and the tape-type rail — NORMAL, CrO2, METAL — which re-skins the cassette shell the way the real formulations changed it. The twin level meters under Deck A ride the live audio analyser.

Two decks, because dubbing decks were the good ones

The Wide face's deck is a twin-well unit in the dubbing-deck tradition. One deck plays; the other is the cue — it holds what's coming next (the next preset in the bank), its label carrying that station's name in the same handwriting as the playing tape's. Each well has its own working transport row: the toy keys aren't decoration. FF and REW wind the tape at 540× through the same pack physics — you can watch the packs swap mass in about five seconds — and EJECT runs the full sequence: stop, door, cassette lift. The DENSHI column plate between the wells cycles bare chassis → steel → glass, and there's a DNR switch in the furniture band because no late-80s deck was complete without one to argue about.

The whole instrument. The deck unit sits under the clock display on Tunerva's Deck face; on the Pocket (phone) face, the same dual-deck animation lives inside the display's analyzer area instead.

Drawn, not played back

Everything you see in the deck — shells, screws, capstans, pinch rollers, the head block, label typography, the tape path threading down through the head gap and back up — is drawn on a 2D canvas each frame from the physics state. There is no video file and no sprite sheet inside the app; the only video linked from this post is a screen capture recorded from the real app running in a browser. That's also why the deck reacts like an instrument rather than a screensaver: eject mid-song and the spools stop the way a stopped deck stops; pause and the packs freeze mid-transfer, radii intact, ready to resume at the right ω.

Questions people ask about tape decks

How fast does a cassette tape actually move?

1⅞ inches per second — 4.76 cm/s, or 47.6 mm/s. It's the slowest tape format that ever went mainstream, which is exactly why the reel choreography is so visible: at that speed, pack geometry dominates everything.

Why does one reel speed up as the other slows down?

The tape itself moves at a constant speed, but each reel's rpm is tape speed divided by its pack radius. The supply pack shrinks toward the 11 mm hub, so its reel must spin faster to feed the same 47.6 mm/s; the take-up pack grows toward 24.7 mm and slows. Tunerva's animation gets this for free because it never animates rpm directly — only tape position.

How long is a C90 side, really?

45 minutes — about 128 metres of tape. In Tunerva the side length is the real 45 minutes at real speed; the FF and REW keys are the only sanctioned time travel, at 540×.

The deck is live now, on both faces of Tunerva. Tap the display to cycle the views — spectrum bars, dots, waveform, VU meters — and the last stop is the tape deck. Or pick Tape deck in Settings → Analyzer.

Open Tunerva and find the deck →

Tunerva™ — a 90s clock radio rebuilt as a web app. Free, no account, nothing to install.

DEV Community: Tunerva