Scroll Drop
I wanted a scroll cue that does not nag. A spark falls down an invisible line, and the instant it lands it blooms into a single oval ripple, a small physical beat that quietly says there is more below.
Falling, not floating
The drop uses an ease-in timing function, so it accelerates the whole way down like something under gravity. It never eases out, so there is no soft landing, and that is exactly what makes the ripple that follows feel earned.
A clipped track
The drop travels inside a one-pixel-wide element with overflow hidden, so it is cleanly cut off at the top and bottom. There is no visible guide line, only the spark and the space it moves through.
The ripple
When the drop reaches the bottom, an oval ring scales up and fades out with its own ease-out curve, decelerating as it spreads, the way a real ripple loses energy across a surface. The oval shape reads as a ring seen on a receding plane.
One clock
The fall and the ripple are separate animations on the same duration, with the keyframe percentages tuned so the ripple fires exactly when the drop lands. Shared --cue-* custom properties mean retiming the whole cue is a one-line change.