Toast de casete sonando
Una cinta de casete gira las bobinas mientras suena la canción; el botón la pausa y la vuelve a poner.
Ajustes
Código
<div class="uvq09-cst"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><span class="cs" aria-hidden="true"><span class="lb"><em>Mix verano 86</em></span><span class="wd"><i class="r r1"></i><i class="r r2"></i></span></span><span class="tx"><small>Ahora suena</small><b>Cara A · Pista 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="Pausar"><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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Un aviso de lo que suena gana carácter cuando se parece a lo que antes ponía la música. Este casete es CSS puro: etiqueta a rayas, título a mano y una ventana donde giran dos bobinas con radios mientras la cinta pasa despacio de una a otra gracias a una propiedad personalizada animada. Un pequeño ecualizador salta junto a la pista. Ideal para música, pódcast y radio.
Los dos colores pintan las rayas de la etiqueta y el principal tiñe también el rótulo y el ecualizador. La pausa congela las bobinas con animation-play-state y actualiza la etiqueta del botón para lectores de pantalla, así que puedes manejarlo desde un audio real.