∞ forever components

Neo-Brutalism

Error Manifesto

A neo-brutalist error card with hard shadow and border cycles its text color between white, red, and yellow in stepped CSS keyframe flashes.

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

Error states, 404 pages, or brutalist-themed dashboards needing dramatic status callouts.

When not to

Polished or minimal design systems — the hard-shadow aesthetic and color strobing clash with refined UI. Avoid where flashing colors are an accessibility concern.

Working with an AI agent

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

Change the error code to 'ERR 0x000' and the description to 'FATAL: CONTENT NOT FOUND', then shift the accent shadow color from #ff2d00 to #ffe640. 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

  • error code text (.bru-code content)
  • description text (.bru-desc content)
  • accent/shadow color (#ff2d00)
  • cycle duration (3s in bru-cycle)
  • color stops in @keyframes bru-cycle
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • bru-animate / bru-static class toggle pattern
  • prefers-reduced-motion guard
  • visibilitychange pause handler
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Stepped color cycling may be considered distracting or inaccessible in contexts with photosensitive users even with reduced-motion off
  • No click or hover interaction — purely decorative auto-cycle

brutalismerrortypographycolor-cycleui-cardmonospacemanifesto

More Neo-Brutalism components

  • Newspaper TickerTwo rows of bold uppercase headlines scroll in opposite directions with red accent highlights — pure CSS marquee in neo-brutalist black-and-cream style.
  • 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.