Fog fluid

A hero that behaves like weather. A generated plate is bent by a pointer-driven fluid sim, two enormous cloud plates crawl across it on a hundred-second loop, and the whole cloud layer lags behind the scroll. Three presets: hero-fog runs the whole stack, drift keeps only the conveyors and costs almost nothing, warp keeps only the fluid.

01 hero-fog — move across it: the smoke stirs and the plate bends

The weather arrives before you do.

Scroll · the clouds lag behind

Move to stir · the panel drives this one

keep scrolling — the cloud layer trails the section

02 drift — conveyors and parallax only; no simulation, no render loop

Cheap enough for a long page

03 warp — fluid only: no clouds, no parallax

All of the distortion, none of the DOM

The plate and both cloud plates are painted on canvases at runtime from a seeded noise field — no images, no network, works from file://. H toggles the panel.

Give anything that must read over the fog its own position: relative; z-index — the cloud layer is an absolutely positioned sibling. Under prefers-reduced-motion — or without WebGL2 — the stack paints one still frame, the conveyors stay parked and no loop starts.