# Telegram tape toast

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

- Category: [Toasts](https://library.aimran.es/components/toasts)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-toast-telegram-tape
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## 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.

## Code

### HTML

```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>
```

### CSS

```css
.uvq09-tlg {
  --c1: #b91c1c;
  --c2: #efe4c8;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq09-tlg {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 21em;
  height: 15em;
}

.uvq09-tlg .fire {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: 1.2em;
  translate: -50% 0;
  padding: .6em 1.1em;
  border-radius: 2em;
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tlg .fire:hover {
  color: var(--fg);
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq09-tlg .fire:active {
  scale: .96;
}

.uvq09-tlg .fire:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tlg .tt {
  position: absolute;
  left: 50%;
  bottom: 1em;
  width: 19em;
  translate: -50% 0;
  border-radius: 1.1em;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1.2em 2.4em -1em rgba(0,0,0,.45);
  width: 18.5em;
  padding: .85em 1em .8em;
  border-radius: .3em;
  color: #3b2a14;
  background: linear-gradient(90deg,transparent 1.05em,color-mix(in srgb,var(--c1) 18%,transparent) 1.05em 1.15em,transparent 1.15em),var(--c2);
  box-shadow: 0 .1em .2em rgba(0,0,0,.15),0 1.2em 2.2em -1em rgba(0,0,0,.45);
  font-family: Georgia,"Times New Roman",serif;
  transform: translateY(130%) scale(.92);
  opacity: 0;
  transition: transform calc(0.55s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tlg .tt.in {
  transform: none;
  opacity: 1;
}

.uvq09-tlg .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 .45em .5em;
  margin-bottom: .6em;
  border-bottom: 1.5px solid color-mix(in srgb,var(--c1) 55%,transparent);
}

.uvq09-tlg .hd b {
  font-size: .92em;
  letter-spacing: .3em;
  color: var(--c1);
}

.uvq09-tlg .sp {
  padding: .25em .45em;
  border: 2px solid var(--c1);
  border-radius: .2em;
  font: 800 .6em/1 system-ui,sans-serif;
  letter-spacing: .14em;
  color: var(--c1);
  rotate: -8deg;
  opacity: .85;
}

.uvq09-tlg .tt.in .sp {
  animation: uvq09-tlg-s calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1) calc(0.25s / var(--k)) both;
}

.uvq09-tlg .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uvq09-tlg .strips {
  display: grid;
  gap: .4em;
  justify-items: start;
  min-height: 3.6em;
  padding-left: .5em;
}

.uvq09-tlg .strips span {
  max-width: 100%;
  min-height: 1.6em;
  padding: .3em .55em;
  background: #fbf7ea;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.2);
  font: 700 .76em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing: .05em;
  color: #1f1a14;
  overflow-wrap: anywhere;
}

.uvq09-tlg .strips span:empty {
  visibility: hidden;
}

.uvq09-tlg .s1 {
  rotate: -.6deg;
}

.uvq09-tlg .s2 {
  rotate: .5deg;
  margin-left: .5em;
}

.uvq09-tlg .strips .cur::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1em;
  margin-left: .1em;
  vertical-align: -.15em;
  background: currentColor;
  animation: uvq09-tlg-c calc(0.8s / var(--k)) steps(1) infinite;
}

.uvq09-tlg small {
  display: block;
  margin: .6em 0 0 .65em;
  font: italic .72em/1 Georgia,serif;
  opacity: .7;
}

@keyframes uvq09-tlg-s {
  from {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes uvq09-tlg-c {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq09-tlg,.uvq09-tlg *,.uvq09-tlg *::before,.uvq09-tlg *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### JavaScript

```js
document.querySelectorAll(".uvq09-tlg").forEach(el => {
  const ss=[...el.querySelectorAll(".strips span")],src=[...el.querySelectorAll(".sr")];let iv=0;
const type=()=>{clearInterval(iv);const L=src.map(s=>s.textContent.trim().toUpperCase()+" STOP");ss.forEach(s=>{s.textContent="";s.classList.remove("cur")});
if(matchMedia("(prefers-reduced-motion: reduce)").matches){ss.forEach((s,i)=>s.textContent=L[i]);return}
let li=0,ci=0;iv=setInterval(()=>{const s=ss[li];if(!s){clearInterval(iv);return}s.classList.add("cur");ci++;s.textContent=L[li].slice(0,ci);if(ci>=L[li].length){s.classList.remove("cur");li++;ci=0}},55)};
const t=el.querySelector(".tt"),f=el.querySelector(".fire");let tm=[];const clr=()=>{tm.forEach(clearTimeout);tm=[]};const later=(fn,ms)=>tm.push(setTimeout(fn,ms));
const show=()=>{clr();t.classList.remove("in","out");void t.offsetWidth;later(()=>{t.classList.add("in");type()},60)};
const hide=()=>{t.classList.remove("in");t.classList.add("out")};f.addEventListener("click",show);show();return()=>{clr();clearInterval(iv)}
});
```

### React

```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq09-tlg {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 21em;
  height: 15em;
}

.uvq09-tlg .fire {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: 1.2em;
  translate: -50% 0;
  padding: .6em 1.1em;
  border-radius: 2em;
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tlg .fire:hover {
  color: var(--fg);
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq09-tlg .fire:active {
  scale: .96;
}

.uvq09-tlg .fire:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tlg .tt {
  position: absolute;
  left: 50%;
  bottom: 1em;
  width: 19em;
  translate: -50% 0;
  border-radius: 1.1em;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1.2em 2.4em -1em rgba(0,0,0,.45);
  width: 18.5em;
  padding: .85em 1em .8em;
  border-radius: .3em;
  color: #3b2a14;
  background: linear-gradient(90deg,transparent 1.05em,color-mix(in srgb,var(--c1) 18%,transparent) 1.05em 1.15em,transparent 1.15em),var(--c2);
  box-shadow: 0 .1em .2em rgba(0,0,0,.15),0 1.2em 2.2em -1em rgba(0,0,0,.45);
  font-family: Georgia,"Times New Roman",serif;
  transform: translateY(130%) scale(.92);
  opacity: 0;
  transition: transform calc(0.55s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tlg .tt.in {
  transform: none;
  opacity: 1;
}

.uvq09-tlg .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 .45em .5em;
  margin-bottom: .6em;
  border-bottom: 1.5px solid color-mix(in srgb,var(--c1) 55%,transparent);
}

.uvq09-tlg .hd b {
  font-size: .92em;
  letter-spacing: .3em;
  color: var(--c1);
}

.uvq09-tlg .sp {
  padding: .25em .45em;
  border: 2px solid var(--c1);
  border-radius: .2em;
  font: 800 .6em/1 system-ui,sans-serif;
  letter-spacing: .14em;
  color: var(--c1);
  rotate: -8deg;
  opacity: .85;
}

.uvq09-tlg .tt.in .sp {
  animation: uvq09-tlg-s calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1) calc(0.25s / var(--k)) both;
}

.uvq09-tlg .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uvq09-tlg .strips {
  display: grid;
  gap: .4em;
  justify-items: start;
  min-height: 3.6em;
  padding-left: .5em;
}

.uvq09-tlg .strips span {
  max-width: 100%;
  min-height: 1.6em;
  padding: .3em .55em;
  background: #fbf7ea;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.2);
  font: 700 .76em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing: .05em;
  color: #1f1a14;
  overflow-wrap: anywhere;
}

.uvq09-tlg .strips span:empty {
  visibility: hidden;
}

.uvq09-tlg .s1 {
  rotate: -.6deg;
}

.uvq09-tlg .s2 {
  rotate: .5deg;
  margin-left: .5em;
}

.uvq09-tlg .strips .cur::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1em;
  margin-left: .1em;
  vertical-align: -.15em;
  background: currentColor;
  animation: uvq09-tlg-c calc(0.8s / var(--k)) steps(1) infinite;
}

.uvq09-tlg small {
  display: block;
  margin: .6em 0 0 .65em;
  font: italic .72em/1 Georgia,serif;
  opacity: .7;
}

@keyframes uvq09-tlg-s {
  from {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes uvq09-tlg-c {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq09-tlg,.uvq09-tlg *,.uvq09-tlg *::before,.uvq09-tlg *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const ss=[...el.querySelectorAll(".strips span")],src=[...el.querySelectorAll(".sr")];let iv=0;
const type=()=>{clearInterval(iv);const L=src.map(s=>s.textContent.trim().toUpperCase()+" STOP");ss.forEach(s=>{s.textContent="";s.classList.remove("cur")});
if(matchMedia("(prefers-reduced-motion: reduce)").matches){ss.forEach((s,i)=>s.textContent=L[i]);return}
let li=0,ci=0;iv=setInterval(()=>{const s=ss[li];if(!s){clearInterval(iv);return}s.classList.add("cur");ci++;s.textContent=L[li].slice(0,ci);if(ci>=L[li].length){s.classList.remove("cur");li++;ci=0}},55)};
const t=el.querySelector(".tt"),f=el.querySelector(".fire");let tm=[];const clr=()=>{tm.forEach(clearTimeout);tm=[]};const later=(fn,ms)=>tm.push(setTimeout(fn,ms));
const show=()=>{clr();t.classList.remove("in","out");void t.offsetWidth;later(()=>{t.classList.add("in");type()},60)};
const hide=()=>{t.classList.remove("in");t.classList.add("out")};f.addEventListener("click",show);show();return()=>{clr();clearInterval(iv)}
}

export default function ToastTelegramTape() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#b91c1c",
          "--c2": "#efe4c8",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq09-tlg"><button type="button" className="fire">Receive another</button><div className="tt" role="status"><div className="hd"><b>TELEGRAM</b><span className="sp" aria-hidden="true">URGENT</span></div><span className="sr">Arriving tomorrow at 10:40</span><span className="sr">Platform 3, North station</span><div className="strips" aria-hidden="true"><span className="s1"></span><span className="s2"></span></div><small>Madrid Central · 09:12</small></div></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Telegram tape toast” block (Toasts) from AIMRAN Library to my project.

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

## Chosen settings
- Main color: #b91c1c
- Secondary color: #efe4c8
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Text: "Llego mañana a las 10:40"

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq09-tlg {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 21em;
  height: 15em;
}

.uvq09-tlg .fire {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: 1.2em;
  translate: -50% 0;
  padding: .6em 1.1em;
  border-radius: 2em;
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tlg .fire:hover {
  color: var(--fg);
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq09-tlg .fire:active {
  scale: .96;
}

.uvq09-tlg .fire:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tlg .tt {
  position: absolute;
  left: 50%;
  bottom: 1em;
  width: 19em;
  translate: -50% 0;
  border-radius: 1.1em;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1.2em 2.4em -1em rgba(0,0,0,.45);
  width: 18.5em;
  padding: .85em 1em .8em;
  border-radius: .3em;
  color: #3b2a14;
  background: linear-gradient(90deg,transparent 1.05em,color-mix(in srgb,var(--c1) 18%,transparent) 1.05em 1.15em,transparent 1.15em),var(--c2);
  box-shadow: 0 .1em .2em rgba(0,0,0,.15),0 1.2em 2.2em -1em rgba(0,0,0,.45);
  font-family: Georgia,"Times New Roman",serif;
  transform: translateY(130%) scale(.92);
  opacity: 0;
  transition: transform calc(0.55s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tlg .tt.in {
  transform: none;
  opacity: 1;
}

.uvq09-tlg .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 .45em .5em;
  margin-bottom: .6em;
  border-bottom: 1.5px solid color-mix(in srgb,var(--c1) 55%,transparent);
}

.uvq09-tlg .hd b {
  font-size: .92em;
  letter-spacing: .3em;
  color: var(--c1);
}

.uvq09-tlg .sp {
  padding: .25em .45em;
  border: 2px solid var(--c1);
  border-radius: .2em;
  font: 800 .6em/1 system-ui,sans-serif;
  letter-spacing: .14em;
  color: var(--c1);
  rotate: -8deg;
  opacity: .85;
}

.uvq09-tlg .tt.in .sp {
  animation: uvq09-tlg-s calc(0.35s / var(--k)) cubic-bezier(.34,1.56,.64,1) calc(0.25s / var(--k)) both;
}

.uvq09-tlg .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uvq09-tlg .strips {
  display: grid;
  gap: .4em;
  justify-items: start;
  min-height: 3.6em;
  padding-left: .5em;
}

.uvq09-tlg .strips span {
  max-width: 100%;
  min-height: 1.6em;
  padding: .3em .55em;
  background: #fbf7ea;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.2);
  font: 700 .76em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing: .05em;
  color: #1f1a14;
  overflow-wrap: anywhere;
}

.uvq09-tlg .strips span:empty {
  visibility: hidden;
}

.uvq09-tlg .s1 {
  rotate: -.6deg;
}

.uvq09-tlg .s2 {
  rotate: .5deg;
  margin-left: .5em;
}

.uvq09-tlg .strips .cur::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1em;
  margin-left: .1em;
  vertical-align: -.15em;
  background: currentColor;
  animation: uvq09-tlg-c calc(0.8s / var(--k)) steps(1) infinite;
}

.uvq09-tlg small {
  display: block;
  margin: .6em 0 0 .65em;
  font: italic .72em/1 Georgia,serif;
  opacity: .7;
}

@keyframes uvq09-tlg-s {
  from {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes uvq09-tlg-c {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq09-tlg,.uvq09-tlg *,.uvq09-tlg *::before,.uvq09-tlg *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const ss=[...el.querySelectorAll(".strips span")],src=[...el.querySelectorAll(".sr")];let iv=0;
const type=()=>{clearInterval(iv);const L=src.map(s=>s.textContent.trim().toUpperCase()+" STOP");ss.forEach(s=>{s.textContent="";s.classList.remove("cur")});
if(matchMedia("(prefers-reduced-motion: reduce)").matches){ss.forEach((s,i)=>s.textContent=L[i]);return}
let li=0,ci=0;iv=setInterval(()=>{const s=ss[li];if(!s){clearInterval(iv);return}s.classList.add("cur");ci++;s.textContent=L[li].slice(0,ci);if(ci>=L[li].length){s.classList.remove("cur");li++;ci=0}},55)};
const t=el.querySelector(".tt"),f=el.querySelector(".fire");let tm=[];const clr=()=>{tm.forEach(clearTimeout);tm=[]};const later=(fn,ms)=>tm.push(setTimeout(fn,ms));
const show=()=>{clr();t.classList.remove("in","out");void t.offsetWidth;later(()=>{t.classList.add("in");type()},60)};
const hide=()=>{t.classList.remove("in");t.classList.add("out")};f.addEventListener("click",show);show();return()=>{clr();clearInterval(iv)}
}

export default function ToastTelegramTape() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#b91c1c",
          "--c2": "#efe4c8",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq09-tlg"><button type="button" className="fire">Receive another</button><div className="tt" role="status"><div className="hd"><b>TELEGRAM</b><span className="sp" aria-hidden="true">URGENT</span></div><span className="sr">Arriving tomorrow at 10:40</span><span className="sr">Platform 3, North station</span><div className="strips" aria-hidden="true"><span className="s1"></span><span className="s2"></span></div><small>Madrid Central · 09:12</small></div></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````