∞ forever components

Abstract Geometric Improvisations

The Staccato Keyboard

Colored geometric shapes launch from Bauhaus keys and arc back down under gravity, evoking musical staccato in abstract's palette.

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

abstract/Bauhaus-themed backgrounds, music visualizer mockups, or playful generative art hero sections.

When not to

Layouts needing legible text overlaid on canvas. Contexts where auto-cycling motion is unwanted.

Working with an AI agent

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

Change launch rhythm from 0.42s to 0.25s (autoT threshold), add a 'diamond' shape case in blob(), swap PAL.yellow to '#eab308' for a deeper gold tone. 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

  • launch interval (autoT > 0.42)
  • key color palette (PAL object)
  • shape types in KEYS array
  • launch velocity range (260 + Math.random()*160)
  • gravity strength (520 * dt)
  • max live shapes cap (60)
  • 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

  • No click interactivity — shapes fire on auto sequence only; wire keyEls click handlers to press(i) for user control
  • Reduced-motion fallback renders a multi-frame static snapshot rather than a single clean frame

canvasgenerativeshapesphysicsbauhausmusic-visual

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.
  • Singing CompositionTriangles, arcs, circles and lines in Bauhaus primaries spawn, breathe and dissolve on warm paper in an endless generative composition inspired by abstract.
  • 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.