∞ forever components

Marketing Sections

Stencil Notice Ticker

A stencilled notice band on worn plaster: a torn mustard 'Offers' label, an ink band with a spray-dot texture, and a strip of coordinate-stamped offers scrolling on a seamless 34 s loop (founding seats left, membership price, one-file components, pro-pack early access). Hover pauses it, a pause button appears, and a hidden list carries every notice for readers.

csslight complexitysubtle motionhover

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

Offer strips, launch notices and status bands on sales pages, community boards and product headers where several short messages share one line.

When not to

Body copy or anything that must be read in full at a glance; stacked under another moving strip.

Working with an AI agent

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

Edit the items array (stamp, text, tone: live / info / warn / fault) and the scroll speed (34s on .st13-strip); the torn label is the view's one break. 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)
  • items array (coordinate stamp, text, tone)
  • scroll speed (34s) and item padding
  • band and label colours (--st13-band, --st13-on-band, --st13-poster)
  • plaster texture on .st13-wall
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • hover and the pause button stop the scroll (aria-pressed); the visually hidden list duplicates every notice
  • IIFE wrapper
  • the strip is doubled so the -50% translate wraps with no seam
  • prefers-reduced-motion guard (no scroll; the hidden list carries the content)
  • 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
  • Offer copy is sample sales copy — replace with real, current offers

salestickermarqueenoticesstencilposterazulejooffersband

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…