∞ forever components

Bauhaus Geometric

Wire Scaffold

Faux-3D wire lattice of stacked square rings rotates slowly, carrying Bauhaus red, yellow, and blue flat solids (circle, square, triangle) at its vertices.

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

Bauhaus or geometric-themed hero sections, design-tool splash screens, architectural concept displays.

When not to

Contexts requiring legible text overlays or low-end mobile — the continuous canvas redraw may compete with foreground content.

Working with an AI agent

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

Slow the rotation by changing `t += 0.0045` to `t += 0.002`, swap the red circle for white by changing `RED` to `'#ffffff'` in the SH array entry at index 1. 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

  • rotation speed (t += 0.0045)
  • palette constants (RED, BLUE, YEL)
  • pitch oscillation amplitude (Math.sin(t*0.6)*0.16)
  • solid shapes array (SH — kind, color, size, vertex)
  • lattice scale (r=0.78)
  • perspective field of view (fov=3.0)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • Float32Array projection scratch buffers (no per-frame alloc)
  • IIFE wrapper with 'use strict'
  • visibilitychange pause/resume
  • prefers-reduced-motion static fallback
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Solids drawn after edges in a flat pass — no true depth sorting, so solids can appear in front of nearer edges
  • Background color hardcoded in both CSS and fillRect — must change in two places to retheme

bauhaus3dwireframegeometricrotationcanvasperspective

More Bauhaus Geometric components

  • Grid Construction16 primary-colored geometric shapes scatter then snap into a 4x4 modular grid, hold, dissolve, and recompose in a new Bauhaus arrangement.
  • Orbiting ArcsConcentric red, blue, and yellow arcs counter-rotate around a breathing core; scattered dots and a tilted segmented bar orbit in abstract Bauhaus style.
  • Form TrioRed circle, blue square, and yellow triangle orbit a slow-rotating armature while each shape independently spins, pulses, or tilts on a dark field.
  • Mobile BalanceA Calder-style kinetic mobile of Bauhaus primary-colored circles, squares, and triangles hang from swaying black balance arms in slow counterpoint.
  • Dot Rhythm8x8 grid of red, blue, yellow, and white dots pulsing in diagonal travelling waves; two interfering sines modulate scale and opacity for a rhythmic beat.
  • Diagonal CounterpointRed and blue diagonal bars sweep in opposing directions and cross at center; a pulsing yellow square node and slow-spinning dashed ring anchor the…