Cassette Player
A mixtape with real reel physics: tape moves between reels and the full reel spins slower.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Linear tape speed stays constant, so each reel's angular speed is inverse to its radius, like a real deck. Fast-forward and rewind whizz. Use it as a progress bar or a retro audio player via `progress`.
Installation
$ npx shadcn@latest add https://guetix.com/r/cassette-player.json
Uses the shadcn CLI. It creates components/guetix/cassette-player.tsx and installs nothing else.
Usage
example.tsx
import { CassettePlayer } from "@/components/guetix/cassette-player";
export default function Example() {
return <CassettePlayer />;
}
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Angular speed ∝ 1 / radius: the small reel visibly races the big one.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Label text. |
| length | number | 180 | Seconds. |
| progress | number | — | Controlled 0–1. |
| onProgress | (p) => void | — | Position updates. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Transport buttons are labelled toggles; position is a progressbar.