Toast mit Glückskeks

Ein Glückskeks wippt wartend hin und her; tippst du ihn an, bricht er auf, Krümel fliegen und der Zettel kommt heraus.

Einstellungen

Hauptfarbe#d97706

Zweitfarbe#b91c1c

Größe16px

Tempo1x

Text

Code

index.html

<div class="uvq09-ftn"><button type="button" class="fire">Noch ein Keks</button><div class="tt" role="status"><small class="lb">Dein Tipp des Tages</small><button type="button" class="ck" aria-label="Keks öffnen" aria-expanded="false"><i class="h1" aria-hidden="true"><svg viewBox="0 0 52 40"><path class="lo" d="M52 6C34 0 10 6 3 26C1 33 8 38 16 34C28 28 40 29 52 37Z"/><path class="fo" d="M52 37C42 30 30 29 19 33C30 24 42 20 52 21Z"/><path class="hl" d="M13 15C21 8 33 6 44 8"/></svg></i><i class="h2" aria-hidden="true"><svg viewBox="0 0 52 40"><path class="lo" d="M52 6C34 0 10 6 3 26C1 33 8 38 16 34C28 28 40 29 52 37Z"/><path class="fo" d="M52 37C42 30 30 29 19 33C30 24 42 20 52 21Z"/><path class="hl" d="M13 15C21 8 33 6 44 8"/></svg></i><span class="cr" aria-hidden="true"><i style="--x:-4.5em;--y:-0.0em"></i><i style="--x:2.7em;--y:-0.2em"></i><i style="--x:2.7em;--y:2.3em"></i><i style="--x:-0.7em;--y:-0.3em"></i><i style="--x:-3.5em;--y:0.6em"></i><i style="--x:-0.4em;--y:1.4em"></i><i style="--x:-0.2em;--y:0.3em"></i><i style="--x:-0.2em;--y:1.7em"></i><i style="--x:-4.1em;--y:-0.4em"></i></span></button><p class="sl"><span>Heute ist ein guter Tag, diese Idee umzusetzen</span><small>Zahlen: 7 · 14 · 23</small></p><small class="hn">Tippe auf den Keks, um ihn zu öffnen</small></div></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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Toasts

Alle ansehen: Toasts

Animierte Toast-Benachrichtigung

ToastsReact + Motion

Elastischer Erfolgs-Toast

ToastsHTML + CSS

Toast mit Rückgängig-Button

ToastsHTML + CSS

Toast mit Upload-Fortschritt

ToastsHTML + CSS

Fehler-Toast mit Wackeln

ToastsHTML + CSS

Toast für neue Nachrichten

ToastsHTML + CSS

Gestapelte Toasts

ToastsHTML + CSS

Insel-Pillen-Toast

ToastsHTML + CSS

Wofür du ihn nutzen kannst

Tagestipps und kleine Belohnungen kommen mit etwas Ritual besser an. Dieser Toast zeigt einen goldenen Keks aus geschichteten radialen Verläufen, der ab und zu wippt; ein Druck zieht die beiden Hälften auseinander, verstreut Krümel und rollt einen Papierzettel mit Botschaft und Glückszahlen aus. Er passt zu Lern-Apps, Tagesserien, Treueprogrammen und verspieltem Onboarding.

Die Hauptfarbe backt den Keks, die zweite färbt die Schrift. Der Zettel bleibt für Screenreader verborgen, bis er sich öffnet, dann liest die Statusregion ihn vor; schreibe kurze Sätze, damit er bei zwei Zeilen bleibt.