∞ forever components

Marketing Sections

Paste Reveal CTA

A ceramic notice card (generated quatrefoil motif at 14%, mono kicker, display title, body, meta and a cobalt action) under a flat coral poster with a torn bottom edge and paper grain. The poster peels up and away in 500 ms on click or on its own, revealing the notice; a RE-PASTE stamp puts it back.

csslight complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Announcements, launches and reveal moments on civic, community or editorial pages — one interruption that hands over to the real message.

When not to

Pages that already carry a torn or pasted overlay (one break per view), or copy that must be readable before interaction.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the notice copy (.pr11-body), the poster copy, the demo cadence PASTED=2600 / OPEN=3200, and the interruption colour via --pr11-coral (mustard for editorial). Re-theme to light by setting --pro-bg:#ded9cf; --pro-surface:#f6f1e7; --pro-border:#c7bfb0; --pro-text:#17263b; --pro-muted:#616b72; --pro-accent:#1d5295 (the light glaze), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • notice copy (.pr11-body) and poster copy (.pr11-poster)
  • demo cadence (PASTED, OPEN) and peel duration (500ms)
  • motif recipe and opacity (.pr11-motif, 14%)
  • interruption colour (--pr11-coral) and its ink (--pr11-on-coral)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • aria-expanded on the poster button; the notice is real DOM beneath, always readable by assistive tech
  • IIFE wrapper
  • the torn edge is the only non-rectilinear shape and lives on the overlay only
  • prefers-reduced-motion guard (pasted poster, still; peel and re-paste switch instantly)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • Archivo Black / Source Sans 3 / Recursive Mono fall back to Arial Black, the system sans and ui-monospace
  • The demo peels by itself for the wall; set demo=false in a product

ctaposterpeeltornazulejoceramicnoticeinterruptioncard

More Marketing Sections components

  • Logo Wall MarqueeA 'Trusted by teams at' social-proof section: two rows of invented, purely geometric company marks on chips, marqueeing in opposite directions on a…
  • CTA BannerA centered call-to-action band on a slowly shifting amber-to-tan gradient, with a rotating eyebrow tag, a bold headline, a subline, a white primary button…
  • Hairline CTAA calm call-to-action card: a hairline frame traced by one slow running dash, a mono eyebrow with a heartbeat dot cycling quiet facts, a lowercase…
  • Agent Handoff CTAA two-register call to action: the human side carries a lowercase headline, a subline and one accent button; the machine side is a mono bundle (id,…
  • Pricing StackA membership pricing card: a segmented monthly/annual switch whose pill thumb slides, a price that rolls between £5 a month and £50 a year (with 'two…
  • Founding OfferA founding-member offer card: '£399, once', a short subline, a seat meter (hairline track, accent fill with a slow travelling highlight, ten ticks, a…