The room has
weather in it.
Move the cursor across the section. The fog opens where you are and closes behind you.
Fog with
a floor plan.
Up to eight layers of cached vapour sprites, each with its own size, speed, height and opacity, wrapped so the drift never shows a seam. The cursor burns a hole straight through all of them; the scroll thickens the air. It draws at a fraction of the screen resolution behind a blur, stops when it leaves the viewport, and holds a single still frame when motion is reduced.
Six projects,
one way of working.
Set thin enough, it reads as depth rather than as an effect.
Give the section
some air.
Layered procedural fog on a single 2D canvas: cached soft sprites placed once from a seed, wrapped across a moving strip so a layer can drift forever without a seam, and a radial punch-through that follows the cursor with an easing of its own. Density answers to the scroll, resolution drops behind the blur, the loop stops the moment the section leaves the screen, and reduced motion leaves one still frame in place.
Download the componentOne Code File. React and Framer only.
Reduced motion and static preview included.