Leaf Tumble
Leaves that catch the air and stall, then slip sideways as they tip.
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 · Leaf Tumble
*
* Leaves coming down with a real tumble — catching the air, stalling,
* slipping sideways, catching again.
*About this effect
Autumn behind a screen, for a seasonal empty state, a reading app or a slow onboarding step. The fall is not steady: each leaf's terminal speed is recomputed every frame from how much area it currently presents to the air, so broadside it hangs and edge-on it slips and accelerates. The same tipping angle steers it sideways, which is why a real leaf zigzags — the sway and the stutter in the fall are two views of one rotation rather than two effects layered together, and that is what a constant fall speed with a sine wobble bolted on can never reproduce. A midrib appears once a leaf is broad enough to hold one, which is the single line that reads as leaf rather than petal.