Fortune cookie toast

A fortune cookie rocks while it waits; tap it and it splits in two, crumbs fly and the paper slip slides out.

Settings

Main color#d97706

Secondary color#b91c1c

Size16px

Speed1x

Text

Code

index.html

<div class="uvq09-ftn"><button type="button" class="fire">Another cookie</button><div class="tt" role="status"><small class="lb">Your tip of the day</small><button type="button" class="ck" aria-label="Open the cookie" 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>Today is a good day to launch that idea</span><small>Numbers: 7 · 14 · 23</small></p><small class="hn">Tap the cookie to open it</small></div></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.

Markdown version with all the code, for AI assistants

More in Toasts

See all Toasts

Animated toast notification

ToastsReact + Motion

Elastic success toast

ToastsHTML + CSS

Undo toast with timer

ToastsHTML + CSS

Upload progress toast

ToastsHTML + CSS

Shake error toast

ToastsHTML + CSS

Incoming message toast

ToastsHTML + CSS

Stacked toasts

ToastsHTML + CSS

Island pill toast

ToastsHTML + CSS

Where to use it

Daily tips and small rewards land better with a little ritual. This toast shows a golden cookie drawn with layered radial gradients that rocks now and then; pressing it pulls the two halves apart, scatters crumbs and unrolls a paper slip with the message and lucky numbers. It suits learning apps, daily streaks, restaurant loyalty programs and playful onboarding.

The main color bakes the cookie and the second inks the message. The slip stays hidden from screen readers until it opens, then the status region reads it; write short sentences so the slip keeps to two lines.