De Stijl Neoplastic

Block Fill

Primary-color rectangles wipe and rise in staggered sequence to fill cells of an asymmetric black De Stijl grid on warm white; loops continuously.

cssmedium 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 backgrounds, gallery intros, or hero sections needing bold geometric ambient motion.

When not to

Contexts needing legible text overlays — large color blocks dominate the canvas. Avoid if brand palette conflicts with primary red/blue/yellow.

Working with an AI agent

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

Change the cycle duration from 5200ms to 3500ms by editing `--d:5200ms` in `.ds03-fill`, and shift red to a warmer tone by updating `--ds03-red` to `#e03030`. 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

animation duration (--d:5200ms)
grid line positions (x=.34, .66; y=.40, .72 in C array)
bar weight (BW=2.6)
cell colors (--ds03-red, --ds03-blu, --ds03-yel)
per-cell delay values (6th element in C rows)
fill direction per cell (y/x/x-r)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

visibilitychange pause/resume logic
grid bars rendered last (above fills)
prefers-reduced-motion guard with static fill fallback
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Grid proportions are hardcoded as percentages — changing composition requires recalculating all cell x/y/w/h values
No JS-driven sequencing; stagger relies on CSS delay, so reordering requires editing delay values manually

de-stijlgeometriccolor-blocksgridfillloopneoplastic

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.
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.
Counter CompositionA 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.
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.