Toast mit On-Air-Leuchte
Der rote Leuchtkasten eines Studios flackert beim Einschalten, während die Sendezeit läuft und die Zuschauerzahl steigt.
Einstellungen
Code
<div class="uvq09-air"><button type="button" class="fire">Erneut senden</button><div class="tt" role="status"><span class="lt" aria-hidden="true"><span>ON AIR</span></span><span class="tx"><b>Deine Übertragung hat begonnen</b><small aria-hidden="true"><span class="tm">00:00</span> · <span class="vw">0</span> Zuschauer</small></span><button type="button" class="end">Beenden</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
Jedes Studio hat dieses rote Schild, das sagt, dass man live ist, und dieser Toast macht es zur Hauptfigur. Der Leuchtkasten startet dunkel, flackert über eine stufige Filteranimation wie eine warm werdende Glühbirne und brummt dann mit sanftem Schein. Daneben aktualisieren sich Sendezeit und Zuschauer jede Sekunde in einer für Screenreader versteckten Zeile, damit die Live-Region ruhig bleibt.
Die Hauptfarbe ist das Licht, die zweite der warme Schein um die Buchstaben. Verbinde Zeit und Zuschauerzahl mit echten Daten und beende mit dem Button Beenden deinen Stream; das Licht erlischt, bevor der Toast verschwindet. Gemacht für Streaming, Webinare und Live-Shopping.