forever components

Post-Impressionist Night Studies

Starry Flow

Up to 420 cream and cobalt particle trails stream through curl-noise flow fields past glowing stars and a crescent moon, evoking a turbulent night sky.

canvasheavy complexityintense 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-themed hero backgrounds, gallery landing pages, ambient screensavers referencing impressionist or painterly aesthetics.

When not to

Contexts requiring legible text overlays or low-end mobile — continuous particle trail redraw is CPU-intensive.

Working with an AI agent

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

Change particle palette to warm terracotta by replacing 'rgba(173,196,235,' with 'rgba(210,120,80,' and reduce particle count cap from 420 to 250.

Safe to edit

  • particle count cap (N=420)
  • flow field scale (SCALE=0.0042)
  • particle color palette (rgba strings in build())
  • moon position (moon.x, moon.y)
  • noise time speed (tt*0.15 and tt*0.18)
  • trail alpha range (0.05+Math.random()*0.16)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (REDUCED flag and static fallback draw loop)
  • DPR-aware fitCanvas with setTransform
  • visibilitychange stop/start

Known limitations

  • Background color hardcoded in CSS (#0a1628) — must edit to change dark navy
  • Particle count auto-scales with viewport area but caps at 420 — small screens get far fewer trails
  • Custom value-noise (not Perlin) — flow field has visible tiling artifacts at large scales

flow-fieldparticlescanvasnoiseambientgenerative

More Post-Impressionist Night Studies components

  • Impasto StrokesThick elliptical brushstrokes accumulate along a Perlin noise flow field in cobalt, cadmium, and ochre; after ~1100 strokes the canvas fades and repaints.
  • Cypress FlameA dark green cypress silhouette writhes and twists upward like a flame against a cobalt evening sky, rendered in canvas with painterly swaying strokes.
  • Sunflower RadialTwo rings of ochre and cadmium petals rotate slowly around a phyllotactic seed-head spiral; a CSS-animated DOM core pulses at center.
  • Wheatfield WindGolden wheat stalks bend in a roving autonomous breeze via spring physics; crows scatter and arc overhead on a cobalt-to-amber gradient sky.
  • Stir the SkyCobalt, cream, and navy particles follow a noise flow field stirred by a drifting vortex, accumulating into swirling, post-impressionist brushstroke trails.
  • Brushstroke Frame58 cobalt, teal and ochre brushstrokes ring the canvas edge, each wiggling; the whole frame slow-rotates while a cadmium glow breathes at center.