Telegram tape toast

Paper strips on a telegram form type out the message letter by letter in capitals, each line closing with STOP.

Settings

Main color#b91c1c

Secondary color#efe4c8

Size16px

Speed1x

Text

Code

index.html

<div class="uvq09-tlg"><button type="button" class="fire">Receive another</button><div class="tt" role="status"><div class="hd"><b>TELEGRAM</b><span class="sp" aria-hidden="true">URGENT</span></div><span class="sr">Arriving tomorrow at 10:40</span><span class="sr">Platform 3, North station</span><div class="strips" aria-hidden="true"><span class="s1"></span><span class="s2"></span></div><small>Madrid Central · 09:12</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

Before chat there were telegrams: printed strips of capital letters glued onto a form, every sentence ending in STOP. This toast brings that format back with a cream paper card, a red header, a stamp that thumps in and two strips typed by a short script. The full message sits in hidden text so screen readers hear it at once.

Use the main color for the header and stamp and the second for the paper. The typing speed lives in the interval value; keep both lines short so each strip fits on one row, or let them wrap. Nice for travel plans, invitations and retro brands.