∞ forever components

Pointillist

Stipple Flow

108 colored dots drift along a curling sinusoidal flow field, leaving slow translucent trails that paint a sweeping diagonal arc with divisionist optic-mixing.

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

Dark ambient backgrounds, generative art hero sections, creative portfolio loops where painterly motion suits the brand.

When not to

Light backgrounds (hardcoded dark navy). Contexts requiring legible text overlaid — persistent trails compete with reading.

Working with an AI agent

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

Change the palette array PAL to cool teals and purples (e.g. [0,200,180],[80,180,220],[140,80,200]), reduce N to 72, and slow the tick to t+=0.002. 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

  • dot count (N=108)
  • palette colors (PAL array)
  • flow field shape (curve/swirl coefficients in fieldAng)
  • tick speed (t+=0.0042)
  • fade alpha (ctx.globalAlpha=0.052)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion static drawOne() fallback
  • visibilitychange pause/resume
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in both CSS and paintBG() — must change both
  • No pointer interactivity; dots ignore cursor entirely
  • Static reduced-motion frame uses a separate dense-stipple render path (6500 random dots), not the agent system

pointillismflow-fieldcanvasparticlesgenerativeambientdivisionist

More Pointillist components

  • Dot AssembleThousands of colored dots scatter from off-screen and converge to paint a pointillist sunrise scene — hill, sky, and sun disc — then dissolve and loop.
  • Pointillist ShimmerUp to 2600 colored dots optically mix to paint a pointillist riverbank at dusk — sky, water, and grassy bank zones shimmer via per-dot breathing sine waves.
  • Pointillist SunsetA glowing sun sets over shimmering water rendered as colored dot lattices. Sky baked once offscreen; water dots animate with sinusoidal shimmer and sparkle.
  • Divisionist Tree2600 orange, blue, and magenta dots form a tree canopy using additive pixel-splat blending; dots vibrate with staggered sine-phase for optical color mixing.
  • Density WaveA density wave sweeps left to right revealing a Divisionist sunset — sky, sun disc, and sea rendered as jittered pigment dots that optically mix at distance.
  • Halftone BloomColored dots bloom radially from center, optically mixing amber, magenta, and teal into a glowing flower. Slow ripple breathes through the dot grid.