Toast d'émission en direct
Le caisson lumineux rouge d'un studio vacille en s'allumant pendant que le temps d'antenne défile et que les spectateurs augmentent.
Réglages
Code
<div class="uvq09-air"><button type="button" class="fire">Relancer le direct</button><div class="tt" role="status"><span class="lt" aria-hidden="true"><span>EN DIRECT</span></span><span class="tx"><b>Ta diffusion a commencé</b><small aria-hidden="true"><span class="tm">00:00</span> · <span class="vw">0</span> spectateurs</small></span><button type="button" class="end">Terminer</button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Notifications
Voir tout : NotificationsOù l’utiliser
Chaque studio a ce panneau rouge qui signale qu'on est en direct, et ce toast en fait la vedette. Le caisson démarre éteint, vacille grâce à une animation de filtre par paliers comme une ampoule qui chauffe, puis bourdonne avec une lueur douce. À côté, le temps d'antenne et les spectateurs changent chaque seconde dans une ligne masquée aux lecteurs d'écran, pour que la zone live reste calme.
La couleur principale est la lumière et la secondaire la lueur chaude autour des lettres. Branche le chrono et le nombre de spectateurs sur des données réelles et utilise le bouton Terminer pour couper ton direct ; la lumière s'éteint avant que le toast parte. Pensé pour le streaming et les webinaires.