Fog Drift
Soft banks of fog sliding sideways, thinning out before they reach the edges.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Fog Drift
*
* Soft banks of fog sliding sideways and thinning out at the edges.
*
* The technique that makes it fog rather than a row of blurry circles:About this effect
Atmosphere for a screen that should feel like a place — a map at dawn, a locked screen, the header of a quiet reading app. No single bank is visible on its own: each is drawn at an opacity low enough to be almost nothing, and the fog exists only where several overlap. Because they drift at different speeds by depth, those overlaps form and part on their own, so density varies continuously without anything animating density directly, and there is never a blob edge to catch the eye. One radial gradient is built and re-used under a scale transform, and the left and right margins are erased afterwards so the fog has no seam where it meets the frame.