∞ forever components

Abstract Geometric Improvisations

Singing Composition

Triangles, arcs, circles and lines in Bauhaus primaries spawn, breathe and dissolve on warm paper in an endless generative composition inspired by abstract.

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/gallery hero backgrounds, creative portfolio ambient backdrops, cultural institution pages with a Bauhaus or abstract-art theme.

When not to

Content-heavy layouts needing legible overlays; low-end devices running many concurrent animations; contexts where muted/neutral backgrounds are required.

Working with an AI agent

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

Change the spawn interval to 400ms (ms=400), add PAL.orange:'#f4620a' to the palette cols array, and increase the max element cap from 22 to 30. 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

  • spawn interval (ms=620)
  • max element cap (elems.length>22)
  • palette cols array
  • element lifetime range (2600+Math.random()*3400)
  • size range (sz: 18+Math.random()*70)
  • blue wash overlay opacity (globalAlpha=0.05)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (REDUCED)
  • visibilitychange pause/resume
  • DPR-aware fitCanvas()
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in both CSS and PAL.paper — must change both to retheme
  • No click or pointer interactivity; purely generative
  • Reduced-motion mode renders a single static frame only — no animation at all

generativebauhausgeometriccanvasambientart

More Abstract Geometric Improvisations components

  • Several Circles13 coloured discs drift and pulse on a charcoal ground with blend-mode overlaps and halos; a pale diagonal line sways below. An abstract composition.
  • The Rhythm ScoreA red playhead sweeps 16-step staves of blue circles, yellow triangles, and red squares; each note flares in size and opacity as the head crosses it.
  • Concentric ResonanceColored rings burst outward from random points on a dark field, fading as they expand — abstract's concentric forms in perpetual motion.
  • Yellow-Red-Blue Counterpoint24 bars in yellow, red, and cobalt rise and fall in sine-wave counterpoint on warm paper, echoing abstract's three-voice color theory.
  • The Orbiting TroikaThree colored spheres (blue, yellow, vermilion) orbit a black sun at harmonic speeds, leaving fading color trails that form a slowly turning rosette.
  • Checkerboard FugueA diagonal wave sweeps a 10x8 CSS grid, lighting each cell in Bauhaus green, yellow, red, and black before returning it to a warm paper tone.