∞ forever components

Constructivist

Red Wedge

Red wedge drives into a recoiling black disc, scattering shards; bold slab type fades in after impact. Looping Constructivist poster animation.

svgmedium 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

Hero backgrounds or loading screens for art, design, or cultural contexts; constructivist/avant-garde themed projects needing ambient tension.

When not to

Contexts requiring legible content overlays or conservative UIs where the political art reference is unwanted.

Working with an AI agent

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

Change the wedge color to deep orange by setting --cv02-red to #e65c00 and --cv02-red-deep to #a83f00, then slow the cycle to 6s by updating the animation duration on all cv02-* keyframe rules. 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

  • wedge color (--cv02-red, --cv02-red-deep)
  • animation cycle duration (4.6s on all classes)
  • shard displacement (--cv02-dx/dy/r per shard)
  • paper background color (--cv02-paper)
  • slab type content (SVG text elements)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • prefers-reduced-motion guard (static fallback shows fully-set composition)
  • visibilitychange pause in IIFE
  • role=img + aria-label on frame div
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • All timing sync relies on shared 4.6s duration across CSS classes — must update all simultaneously if changed
  • Shard positions are hardcoded in SVG units and may clip on very narrow screens

constructivismsvggeometriclooptypographypolitical-artrussian-avant-garde

More Constructivist components

  • Diagonal ThrustRed and black arrow-tipped slabs sweep along a -28° diagonal axis over a black field; a dark-red disc and a bold type bar anchor the composition.
  • Rotodynamic18 slab bars and word spokes radiate from an off-center hub, rotating at staggered speeds in a Rodchenko red-black-bone palette.
  • Floating FormsSuprematist field: tilted black square anchors red and off-white bars, squares, and a dot drifting in slow staggered CSS cycles on near-black.
  • MegaphoneA Constructivist megaphone emits expanding concentric red and paper-white arc rings across a dark field with bold diagonal bars. Runs autonomously.
  • Gear PosterThree SVG gears spin at different speeds while red diagonal bars slam in and slab-type text assembles — all on a dark constructivist grid.
  • Montage Cut11 Constructivist cut-outs slide in along diagonal angles then hold; a bold MONTAGE type stack and a slashing red diagonal anchor the composition.