Toast mit laufender Kassette
Eine Kassette dreht ihre Spulen, solange der Song läuft; der Button pausiert sie und startet sie wieder.
Einstellungen
Code
<div class="uvq09-cst"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><span class="cs" aria-hidden="true"><span class="lb"><em>Sommermix 86</em></span><span class="wd"><i class="r r1"></i><i class="r r2"></i></span></span><span class="tx"><small>Läuft gerade</small><b>Seite A · Titel 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="Pausieren"><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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Ein Hinweis auf den aktuellen Titel bekommt mehr Charakter, wenn er aussieht wie das Gerät, auf dem früher Musik lief. Diese Kassette ist reines CSS: gestreiftes Etikett, handgeschriebener Titel und ein Fenster, in dem zwei Speichenspulen drehen, während das Band über eine animierte Custom Property langsam von einer zur anderen wandert. Daneben hüpft ein kleiner Equalizer. Ideal für Musik-, Podcast- und Radio-Apps.
Die beiden Farben bemalen die Streifen des Etiketts, die Hauptfarbe färbt außerdem Beschriftung und Equalizer. Die Pause friert die Spulen per animation-play-state ein und aktualisiert das Label des Buttons für Screenreader, so lässt er sich von einem echten Audio-Element steuern.