∞ forever components

De Stijl Neoplastic

Counter Composition

A neoplastic grid of red, blue, and yellow cells divided by black bars rotates from 38° and settles to a gentle 15° resting angle with a slow living drift.

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

Art/design-themed hero backgrounds, editorial layouts evoking modernist abstraction, dark-mode ambient displays.

When not to

Contexts requiring overlaid readable text — the rotating composition competes visually. Light backgrounds without changing the hardcoded dark fill.

Working with an AI agent

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

Change the resting angle from 15 to 30 degrees by setting `rest=30*Math.PI/180`, increase grid size by setting S=Math.min(W,H)*0.80, and swap RED to '#e63946'. 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

  • resting angle (rest=15*Math.PI/180)
  • entry angle (entry=38*Math.PI/180)
  • grid size fraction (0.62 in S=Math.min(W,H)*0.62)
  • palette constants (RED, BLU, YEL)
  • animation cycle duration (8s loop)
  • drift amplitude (0.012 in Math.sin(t*0.6)*0.012)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion static fallback (draw at rest, no rAF)
  • visibilitychange pause/resume
  • DPR-aware canvas sizing
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded to #0e0e10 — must change both CSS and BLK constant together
  • One degenerate cell in CELLS array (index 10) has h=0 and is silently skipped

de-stijlneoplasticcanvasrotationgridgeometricambient

More De Stijl Neoplastic components

  • Grid RecomposeBlack grid lines slide between asymmetric positions with cubic easing, repartitioning red, blue, yellow, and off-white rectangles in neoplastic style.
  • Boogie Pulse26 primary-color blocks travel and blink along a black asymmetric De Stijl grid over static color-field plaques, evoking neoplastic's Broadway Boogie-Woogie.
  • Block FillPrimary-color rectangles wipe and rise in staggered sequence to fill cells of an asymmetric black De Stijl grid on warm white; loops continuously.
  • Line WeaveHorizontal and vertical cream lines thread and interlace over primary-color blocks on a dark field, with bright nodes at crossing points during the weave…
  • Dynamic EquilibriumSix neoplastic-colored rectangles hang from a tilting beam; a spring-damper drives it toward equilibrium while a slow bias keeps it gently alive.
  • Split PlaneA square canvas splits along alternating seams; two halves slide apart and reflow into new De Stijl primary-color compositions every 4.4 s.