Atmospheric Fog

About Atmospheric Fog

Weather in a section. Layers of vapour drifting at different speeds, each with its own size, height and opacity, so the near air moves past the far air. The cursor opens a hole that closes behind it, the scroll thickens the room, and every layer is built from a seed so the same fog comes back every time. One 2D canvas, no WebGL, no images — it draws below screen resolution behind a blur, stops when it leaves the viewport, and holds a single still frame when motion is reduced.

Features

• Layered procedural fog on one 2D canvas, no libraries and no images.

• Real depth: near and far bands differ in size, speed, opacity and spread.

• Wrapped drift in five directions, with no seam and no gap, ever.

• The cursor burns a hole through every layer, with its own radius, depth and lag.

• Scroll thickens or thins the air as the section crosses the viewport.

• Fog Color, Secondary, Background, Opacity and four blend modes.

• Seeded: the same seed always brings back the same fog.

• Half the layers and a smaller canvas on a phone; touch never opens a hole.

• Stops completely off screen; one still frame under reduced motion.

• Takes your section's content in a slot and stays behind it.

• One standalone React + TypeScript file.

• 19 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.