eyedropper

A palette picker micro-animation on a dark stage with a faint dot grid: a rounded artwork card of soft colour blobs (coral, gold, teal, violet, pink, orange) that drift for as long as the page is open, and five empty palette slots under it. A ~12.7-second story plays once on load. An eyedropper glides in from below and turns into a white-rimmed loupe: an 11 × 11 pixel grid of the artwork around its tip, the centre cell framed, and a pill with the live HEX of the real pixel under it. Five times it glides, rests and squeezes, and a glowing drop of the picked colour flies on an arc into the next slot, trailing a fading tail; the slot squashes and springs back, fills from the bottom like liquid with a settling wave, ripples, throws eight tiny splashes and gets its hex label. Then the loupe turns back into the eyedropper, which glides away, the swatches merge into one gradient bar with a soft coloured glow, a light sweeps across it and the CSS rises in underneath: linear-gradient( 90deg, … ). Everything is drawn on one canvas with the Canvas 2D API, moved by tweens and damped springs; the blobs, the pick points and the palette are a few constants to change. The square stage scales to fit any window, window.__SP sets the speed, and reduced motion shows the finished palette still.