∞ forever components

Playful Geometric Notation

Geometric Face

Abstract Bauhaus-style face built from interlocking color planes that slowly cross-fade hues; eyes blink and mouth curves shift expression in a gentle loop.

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/museum contexts, generative portrait hero sections, dark-background ambient displays inspired by early modernism.

When not to

Light backgrounds (hardcoded dark canvas fill). Contexts where constant subtle motion is distracting alongside dense content.

Working with an AI agent

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

Change the palette's accent from terra (#c96f4a) to crimson (#b53030) and slow the region color transitions by setting speed to 0.06+Math.random()*0.10. 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

  • PAL color palette object (all named colors)
  • region wobble amplitude (2.2 in Math.sin)
  • blink threshold (0.96)
  • mouth expression range (m = Math.sin(t*0.5)*6)
  • face aspect ratio (fw*1.18)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware fitCanvas with setTransform
  • visibilitychange start/stop guard
  • REDUCED prefers-reduced-motion branch
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background fill is hardcoded #23201b — must edit CSS and canvas fillRect to change
  • No click/hover interactivity; expression changes are purely time-driven

portraitgeometriccolor-planesblinkcanvasgenerative

More Playful Geometric Notation components

  • Magic Square7x5 grid of color blocks in terracotta, teal, mustard, slate, and plum that slowly breathe — scaling and shifting saturation — evoking a Bauhaus…
  • A Line Goes WalkingA single ink line wanders the warm paper canvas step by step, tracing a random path from a teal start-dot to a terracotta head; fades and resets on a loop.
  • Arrow FieldA grid of colored arrows rotates and pulses in a slow flow-field current, each pointing direction driven by sine waves and radial angle from center.
  • Glyph GardenChildlike pictographs — fish, moon, arrow, face, tree, star, boat — drawn stroke-by-stroke on warm paper, held, then erased and reseeded in a cycling grid.
  • Polyphony GridA 16x6 color grid swept by a column playhead; active cells flash with scale and glow on each pass, voices re-seeded each lap for evolving compositions.
  • Twittering ContraptionFour Bauhaus-style wire birds bob on a horizontal wire and chirp musical notes while a hand-crank below spins. Inspired by Bauhaus's 1922 painting.