Bubble Rise
Bubbles climbing with a wobble, swelling a little as the pressure above them drops.
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 · Bubble Rise
*
* Bubbles climbing with a wobble, swelling a little as the pressure
* above them drops.
*About this effect
Water behind a screen — a drinks order, a hydration tracker, a soft loading state that should feel light. Wobble frequency is tied inversely to radius, so small bubbles shiver fast and tight while large ones sway slowly and wide; because rise speed grows with radius too, the biggest bubbles are at once the fastest climbers and the laziest wobblers. Size and motion are locked to each other, which is what stops the field looking like snow running backwards. Each bubble is drawn as a rim with one specular highlight up and to the left rather than as a filled disc, and it swells on the way up as the water above it thins.