Island avatar

Build a Dynamic Island that squeezes out a round loading puck as I scroll UP.

Scroll up, not down. Pulling a surface upward is the gesture that asks for a refresh, so the indicator being drawn out of the Island as you pull is the direction that matches what a loader means.

The goo is an SVG filter: feGaussianBlur stdDeviation 8, then feColorMatrix with an alpha row of 18 gain and -7 bias, so alpha under about 40% snaps to nothing and over it snaps to solid. Two blurred shapes that overlap read as one silhouette, and the neck between them thins and pinches off as they separate. Keep feComposite atop here, which paints the sharp original back over the blur so the spinner inside the puck stays crisp.

The puck is a CIRCLE, not a pill: 8px of padding on every side of a 16px spinner, 32x32 at a 50% radius. A wide lozenge drags the goo into a wedge as it detaches.

The puck is NEVER faded in. The filter thresholds ALPHA, so a translucent shape does not survive it and a puck fading up from 0 cannot fuse with the Island: instead of being squeezed out it materialises in mid air. Keep it at opacity 1 always, parked INSIDE the Island at rest, black on black, hidden because it matches rather than because it is transparent. Every pixel of its travel is then a real goo stretch with a neck that thins and snaps.

Bring the spinner in while the puck is still attached, not after it lands. Held to the end it reads as a second animation starting rather than as one thing becoming a loader.

No CSS blur and no box-shadow inside the goo group. A filter replaces the element's own rendering so a shadow is eaten, and a blurred child has soft edges the colour matrix eats, which shrinks the shape.

Idle Island is 126 x 37, fully rounded. Derive the travel rather than picking it: scale happens about the centre, so fold in half the scaled-away height or the puck's edge peeks out at rest.

Drive it from the scroll GESTURE, not from scroll position: accumulate wheel and touchmove deltas into a 0..1 value with preventDefault (passive: false), and never let the page scroll.