No me esperaba que el asesino fuera .
21:47Toca el texto oculto para verlo
Spoiler tapado con partículas
Un trozo del mensaje está cubierto de polvo que se mueve; al tocarlo, se disuelve en círculo desde el punto pulsado.
Ajustes
Código
<div class="uvq15-spl"><div class="msg"><b class="nm">Club de lectura</b><p><span>No me esperaba que el asesino fuera</span> <button type="button" class="sp" aria-expanded="false" aria-label="Mostrar spoiler"><span class="tx">el propio narrador</span><span class="ns" aria-hidden="true"></span></button><span>.</span></p><small class="tm">21:47</small></div><p class="ht">Toca el texto oculto para verlo</p></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 Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Clubes de lectura, foros de series y grupos de chat necesitan ocultar giros de guion sin esconder todo el mensaje. Aquí el spoiler queda bajo una capa de polvo en movimiento hecha con degradados CSS superpuestos; al tocarlo, una máscara circular crece desde el punto exacto, las partículas se apartan y aparecen las palabras. Otro toque las vuelve a tapar.
El color principal es el nombre del remitente y el anillo de foco, y el secundario añade algunas motas de color al polvo. El radio animado es una propiedad CSS registrada, así que la transición es suave sin temporizadores de JavaScript. Con movimiento reducido, el polvo queda quieto.