On air light toast
A studio's red light box flickers as it switches on while the broadcast clock runs and the viewer count climbs.
Settings
Code
<div class="uvq09-air"><button type="button" class="fire">Go live again</button><div class="tt" role="status"><span class="lt" aria-hidden="true"><span>ON AIR</span></span><span class="tx"><b>Your broadcast has started</b><small aria-hidden="true"><span class="tm">00:00</span> · <span class="vw">0</span> viewers</small></span><button type="button" class="end">End</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
Every studio has that red sign that says you are live, and this toast makes it the hero. The light box starts dim, flickers through a stepped filter animation like a warming bulb, then hums with a soft glow. Next to it the broadcast time and viewer count update every second in a line hidden from screen readers, so the live region stays calm.
The main color is the light and the second the warm glow around the letters. Hook the timer and viewer number to real data, and use the End button to stop your stream; the light dims before the toast leaves. Made for streaming, webinars and live shopping.