∞ forever components

Bauhaus Geometric

Triangulate

8x8 grid of triangle pairs flips edge-on in a diagonal wave, cycling through Bauhaus primaries (red, blue, yellow) with facet shading on each half-cell.

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 backgrounds, design portfolio sections, ambient looping displays needing structured color motion.

When not to

Layouts where text overlays the grid — high-contrast color cycling competes with readability. Low-end mobile where 128 canvas paths per frame may stutter.

Working with an AI agent

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

Change COLS and ROWS from 8 to 10 for a denser grid, set wave speed by editing the 0.0011 multiplier in frame(), and add green (#3a7d44) as a fourth FACE entry. 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

  • grid size (COLS=8, ROWS=8)
  • wave speed (0.0011 multiplier in frame())
  • Bauhaus palette (FACE array)
  • diagonal phase offset (0.55 in init)
  • background color (BG='#101012')
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard with drawStatic fallback
  • visibilitychange pause/resume
  • DPR-aware canvas resize
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • 128 filled triangle paths drawn each frame — moderate CPU on very low-end devices
  • Grid always square-cell-based; non-square viewports leave letterbox margins
  • No touch/pointer interactivity by design

bauhausgeometricgridtrianglewavegenerativecolor-cycle

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…