∞ forever components

Constructivist

Rotodynamic

18 slab bars and word spokes radiate from an off-center hub, rotating at staggered speeds in a Rodchenko red-black-bone palette.

canvasmedium 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

Dark-mode hero backgrounds, editorial/art-direction contexts, motion posters, or any canvas needing bold geometric ambient animation.

When not to

Light backgrounds (hardcoded dark palette). Contexts where constant rotational motion competes with primary content or text legibility.

Working with an AI agent

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

Change spoke count from N=18 to N=12, replace WORDS entries with English words like 'POWER','BUILD','MOVE', and halve all spokeRate values to slow rotation. 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

  • spoke count (N=18)
  • rotation rates (spokeRate, 0.10 base + i%4 * 0.045)
  • palette constants (RED, BONE, INK, WHT)
  • WORDS array (text on type-1 spokes)
  • hub offset (cx=W*0.40, cy=H*0.46)
  • slab width fractions (spokeW)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (static frame fallback)
  • visibilitychange pause/play
  • DPR-aware canvas sizing
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background and palette are hardcoded — must edit constants to change from dark constructivist scheme
  • Text on spokes flips on the left half but readability still degrades at acute angles

constructivismcanvasrotationtypographypropagandaradialambient

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.
  • Red WedgeRed wedge drives into a recoiling black disc, scattering shards; bold slab type fades in after impact. Looping Constructivist poster animation.
  • 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.