No me esperaba que el asesino fuera .
21:47Toca el texto oculto para verlo
Spoiler hidden under dust
Part of the message is covered with moving dust; tap it and the dust dissolves in a circle from the point you pressed.
Settings
Code
<div class="uvq15-spl"><div class="msg"><b class="nm">Book club</b><p><span>I didn’t expect the killer to be</span> <button type="button" class="sp" aria-expanded="false" aria-label="Show spoiler"><span class="tx">the narrator himself</span><span class="ns" aria-hidden="true"></span></button><span>.</span></p><small class="tm">21:47</small></div><p class="ht">Tap the hidden text to see it</p></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 Microinteractions
See all MicrointeractionsWhere to use it
Book clubs, series forums and group chats need a way to hide plot twists without hiding the whole message. Here the spoiler sits under a layer of moving dust made with stacked CSS gradients; tapping it grows a circular mask from the exact tap point, so the particles clear away and the words appear. Tapping again covers them back.
The main color is the sender name and focus ring, the secondary one adds a few colored specks to the dust. The animated radius is a registered CSS property, so it transitions smoothly without JavaScript timers. With reduced motion the dust stays still.