∞ forever components

Neo-Brutalism

Newspaper Ticker

Two rows of bold uppercase headlines scroll in opposite directions with red accent highlights — pure CSS marquee in neo-brutalist black-and-cream style.

csslight complexitymoderate motion

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

News tickers, event dashboards, or portfolio hero banners needing scrolling text with editorial urgency.

When not to

Contexts requiring readable static text — continuous scroll makes sustained reading impossible.

Working with an AI agent

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

Change row 1 speed to 12s (edit `.bru-t1` animation duration), swap accent color from #ff2d00 to #0055ff, and add a third ticker row. 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

  • row 1 scroll speed (18s in .bru-t1)
  • row 2 scroll speed (24s in .bru-t2)
  • accent color (#ff2d00 on em)
  • headline text (span elements)
  • background color (#fffbe6)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • duplicate span blocks (required for seamless 50% translate loop)
  • bru-reduced prefers-reduced-motion guard
  • visibilitychange pause/play handler
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Each track requires content duplicated exactly twice for the seamless loop — adding spans must be mirrored
  • Reduced-motion users see static non-scrolling headlines with no animated fallback

tickernewsbrutalismmarqueetypographylooptext-animation

More Neo-Brutalism components

  • Error ManifestoA neo-brutalist error card with hard shadow and border cycles its text color between white, red, and yellow in stepped CSS keyframe flashes.
  • Receipt CardA neo-brutalist receipt card with lime-green monospace text on black; line items fade in one-by-one with a staggered delay, revealing a running total.
  • Warning TapeTwo scrolling yellow-black hazard stripe bands frame a bold "UNDER CONSTRUCTION" label that gently pulses. Pure CSS, zero JS logic.
  • Data GridA neo-brutalist 5-row data grid showing node load % and status; cells flash cyan, lime, or red every 800ms to reflect ERR/WARN/OK states.