Ribbon Fall
Curled ribbons falling with real twist, showing their faces and edges in turn.
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 · Ribbon Fall
*
* Thin curled ribbons falling, turning as they go and showing their
* faces and their edges in turn.
*About this effect
A celebration with weight to it — an order placed, a plan upgraded, a long project closed. One twist phase advances along each ribbon's own length and everything else is read off it. The strip's width at a point is the cosine of the phase there, so it narrows to a line and back several times down its length instead of being a rectangle that rotates. Which face is showing is the sign of that same cosine, so the lit side and the shaded side alternate along the ribbon with no separate lighting pass. And how much air it catches is the magnitude of the cosine at its head, so a ribbon lying flat drags and slows while one turning edge-on drops through, which is what makes the descent flutter rather than glide. A twist that varies only with time gives a rotating rectangle; it has to vary along the arc for the strip to be a helix, and that is the whole difference between a curled ribbon and a strip of paper. At edge-on the strip keeps its own thickness rather than vanishing, so it reads as seen edgewise instead of blinking out twice a turn. One fall, finite: emission follows a decaying envelope so it ends by running out, and the loop cancels itself once the last ribbon is past the bottom.