Starry Night Flow
Van Gogh's Starry Night as a painting that sleeps until you wake it. At rest it hangs dim and desaturated, Floyd-Steinberg dithered into a WebGL point cloud pinned to its own pixels. Click any part (the cypress, the village, the swirls, the stars) and light spreads outward from the exact pixel you hit: color comes back, and as the front passes, those brushstrokes lift off and travel along the direction a structure tensor recovered from the paint. Click again to put that part back to sleep. Inspired by Joshua Garcia's Still Night.
npx shadcn@latest add https://ui.aryank.space/r/starry-night-flow.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | hosted Starry Night webp | CORS-readable image URL sampled into the particle field. |
| background | string | "#0b0b0d" | Canvas clear color. |
| resolution / density | number | 640 / 1 | Sampling width in pixels and the fraction of dithered points kept. |
| cyclePeriod / driftFrac / maxDrift | number | 6 / 0.9 / 0.02 | Drift lifecycle: seconds per cycle, drifting fraction of the cycle, and max UV displacement. |
| flowThreshold | number | 0.25 | Minimum stroke coherence required for a particle to join the flow. |
| gustAmplitude / gustPeriod | number | 0.75 / 10 | Wind surge intensity and cycle length in seconds. |
| colorBoost / pointScale | number | 0.35 / 1 | Blend toward peak-normalized luminous color, and particle size multiplier. |
| regionMap | string | null | hosted region png | Lossless map whose five flat colors mark the clickable parts. Pass null to treat the whole painting as one region. |
| dormantDim / wakeGain | number | 0.5 / 1.18 | Brightness of a sleeping region and of a woken one, as fractions of the painted color. |
| revealDuration | number | 1.1 | Seconds for the bloom to travel from the click to the far edge of its region. |
| hoverLift / interactive | number / boolean | 0.09 / true | Brightness lift on the region under the cursor, and whether clicking and hovering are enabled. |
| hint | string | null | "Click a part of the painting to wake it" | Caption shown until the first region is woken. Pass null to hide it. |
srcasset-urlThe painting sampled into the particle field.
backgroundcolorCanvas clear color behind the particles.
cyclePeriod / maxDrift / gustAmplitudetextMotion energy: lifecycle length, drift distance, wind surge strength.