Informe de campo
El día 14 el equipo llegó a a las . El contacto, conocido como , entregó y se marchó en un .
HTML + CSSText & Scroll
Geschwärzter Bericht aus der Schreibmaschine
Eine getippte Akte mit schwarzen Zensurbalken, die sich per Klick einzeln oder alle auf einmal zurückziehen.
Einstellungen
16px
1x
Code
<article class="uvq14-red"><header><span class="cl">Vertraulich</span><span>Akte 27/B</span></header><h3>Einsatzbericht</h3><p>Am 14. erreichte das Team <button type="button" class="rd" aria-pressed="false">Valdeluz</button> um <button type="button" class="rd" aria-pressed="false">06:40</button>. Der Kontakt, bekannt als <button type="button" class="rd" aria-pressed="false">die Bibliothekarin</button>, übergab <button type="button" class="rd" aria-pressed="false">drei versiegelte Umschläge</button> und verschwand in einem <button type="button" class="rd" aria-pressed="false">blauen Seat 600</button>.</p><footer><button type="button" class="all" aria-pressed="false">Alles freigeben</button><span class="sg">Unterschrift: unleserlich</span></footer></article>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 Text & Scroll
Alle ansehen: Text & ScrollWofür du ihn nutzen kannst
Schwarze Schwärzungsbalken lassen jeden Text wie ein Geheimnis wirken, das man unbedingt lesen will. In diesem Bericht ist jeder Balken ein echter Button über den verborgenen Wörtern, Tastatur und Screenreader erreichen sie also, und ein unregelmäßiger Clip-Path gibt den Strichen Markerkanten. Er passt zu Mystery-Kampagnen, Fallstudien, Produktenthüllungen oder einer verspielten Über-uns-Seite.
Tausche die verborgenen Stellen gegen deine eigenen, färbe den Stempel über die Hauptfarbe und die Balken über die Zweitfarbe. Der Freigabe-Button deckt alles nacheinander auf und wieder zu, jeder Balken behält dabei seinen eigenen Zustand.