No me esperaba que el asesino fuera .
21:47Toca el texto oculto para verlo
Spoiler caché sous la poussière
Une partie du message est couverte de poussière mouvante ; au toucher, elle se dissipe en cercle depuis le point pressé.
Réglages
Code
<div class="uvq15-spl"><div class="msg"><b class="nm">Club de lecture</b><p><span>Je ne m’attendais pas à ce que le tueur soit</span> <button type="button" class="sp" aria-expanded="false" aria-label="Afficher le spoiler"><span class="tx">le narrateur lui-même</span><span class="ns" aria-hidden="true"></span></button><span>.</span></p><small class="tm">21:47</small></div><p class="ht">Touche le texte caché pour le voir</p></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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Clubs de lecture, forums de séries et discussions de groupe ont besoin de cacher un rebondissement sans masquer tout le message. Ici le spoiler se trouve sous une couche de poussière animée faite de dégradés CSS superposés ; un toucher fait grandir un masque circulaire depuis le point exact, les particules s'effacent et les mots apparaissent. Un autre toucher les recouvre.
La couleur principale sert au nom de l'expéditeur et à l'anneau de focus, la secondaire ajoute quelques points colorés à la poussière. Le rayon animé est une propriété CSS enregistrée, la transition reste donc fluide sans minuteur JavaScript. En mouvement réduit, la poussière reste immobile.