∞ forever components

Suprematist Geometric Forms

Red Wedge

A bold red CSS triangle slowly sweeps across a cream field past faint black and grey rectangles, evoking Suprematist's Suprematist diagonal.

csslight complexitysubtle 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

Art/design portfolio heroes, constructivist or avant-garde themes, ambient background loops that reference Suprematist aesthetics.

When not to

Contexts requiring legible text overlays (wedge sweeps over the layout). Audiences sensitive to slow diagonal motion.

Working with an AI agent

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

Change the wedge color from #d8261c to #0033cc (blue wedge variant), slow the cycle to 14s, and increase the wedge tip height from 130px to 180px. 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 (border-left: 220px solid #d8261c)
  • wedge height (border-top/bottom: 130px)
  • animation duration (9s)
  • sweep range in @keyframes mal07-cleave (translateX values)
  • background color (#f0ece2)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (static translateX fallback)
  • visibilitychange pause/start logic
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background blocks use Math.random() — layout shifts on every page load
  • Wedge is pure CSS border trick; resizing viewport may distort proportions at extreme aspect ratios

suprematismgeometriccss-animationdiagonalredambient

More Suprematist Geometric Forms components

  • The Black Square, BreathingA near-black square barely scales and rotates on a warm white ground; a faint red ghost square offsets behind it. Suprematist stillness in motion.
  • Suprematist Drift9 colored bars in black, red, blue, yellow rotate at random angles and drift slowly across a cream field via alternating CSS keyframes.
  • Dynamic CompositionSuprematist shapes fly in from edges, hold in a white void, then depart — bars, circles, crosses in black, red, blue, yellow; never repeating.
  • The Aviator's FieldSuprematist bars in black, red, blue, and yellow launch diagonally across an off-white field at steady tempo; reduced-motion shows a static arrangement.
  • Cross & CircleSuprematist shapes — cross, circle, bar, square — fling in from the nearest edge with cubic ease and a settling wobble, auto-composing on a warm white field.
  • Weightless7 Suprematist shapes — squares, circles, bars, crosses in red/blue/yellow/white — orbit and self-spin around an invisible centre on a dark field.