Cassette tape toast
A cassette spins its reels while the song plays; the button pauses it and starts it again.
Settings
Code
<div class="uvq09-cst"><button type="button" class="fire">Show again</button><div class="tt" role="status"><span class="cs" aria-hidden="true"><span class="lb"><em>Summer mix 86</em></span><span class="wd"><i class="r r1"></i><i class="r r2"></i></span></span><span class="tx"><small>Now playing</small><b>Side A · Track 3</b><span class="eq" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span></span><button type="button" class="pl" aria-label="Pause"><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="5" width="4" height="14" rx="1.2"/><rect x="14" y="5" width="4" height="14" rx="1.2"/></svg><svg class="py" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.5 4.8v14.4a.8.8 0 0 0 1.2.7l11.3-7.2a.8.8 0 0 0 0-1.4L8.7 4.1a.8.8 0 0 0-1.2.7z"/></svg></button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
A now playing notice gets more character when it looks like the thing that used to play music. This cassette is pure CSS: striped label, handwritten title, a window where two spoked reels turn while the tape slowly moves from one to the other through an animated custom property. A small equaliser bounces beside the track name. Perfect for music apps, podcasts and radio players.
The two colors paint the label stripes and the main one also tints the label and equaliser. Pausing freezes the reels with animation-play-state and updates the button label for screen readers, so you can drive it from a real audio element.