No me esperaba que el asesino fuera .
21:47Toca el texto oculto para verlo
Spoiler unter Staubschicht
Ein Teil der Nachricht liegt unter wanderndem Staub; beim Antippen löst sich der Staub kreisförmig ab dem berührten Punkt auf.
Einstellungen
Code
<div class="uvq15-spl"><div class="msg"><b class="nm">Buchclub</b><p><span>Ich hätte nie gedacht, dass der Mörder</span> <button type="button" class="sp" aria-expanded="false" aria-label="Spoiler anzeigen"><span class="tx">der Erzähler selbst ist</span><span class="ns" aria-hidden="true"></span></button><span>.</span></p><small class="tm">21:47</small></div><p class="ht">Tippe auf den verdeckten Text, um ihn zu sehen</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Buchclubs, Serienforen und Gruppenchats brauchen eine Möglichkeit, Wendungen zu verbergen, ohne die ganze Nachricht zu verstecken. Hier liegt der Spoiler unter einer Schicht aus bewegtem Staub aus überlagerten CSS-Verläufen; ein Tipp lässt eine kreisförmige Maske genau ab dem Berührungspunkt wachsen, die Partikel verschwinden und die Wörter erscheinen. Ein weiterer Tipp deckt sie wieder ab.
Die Hauptfarbe gilt für Absendernamen und Fokusring, die Zweitfarbe mischt dem Staub ein paar farbige Punkte bei. Der animierte Radius ist eine registrierte CSS-Eigenschaft und läuft deshalb ohne JavaScript-Timer weich. Bei reduzierter Bewegung bleibt der Staub still.