Spring Photo

A photo carried along by the pointer. It lags behind, leans into the swing, catches the light and wobbles to a stop.

Hover the name, then click it

Usage

import { SpringPhoto } from '@wdzyi/ui';

<SpringPhoto label='Connor Woods' src='/connor.webp' alt='Connor in the snow' />

Part of @wdzyi/ui. See setup to install it, or copy the code above.

labelstring: The text on the squiggle.
srcstring: The photo.
altstring: What the photo shows.
width, heightnumber = 504, 630: The photo’s real size, so it can’t shift as it loads.
notestring: Said on the photo after three quick clicks.

Everything is a spring in one frame loop, so it can change direction at any moment without a jump. The loop only runs while the photo is up.
Hover, keyboard focus and a tap all open it. Escape or a press anywhere else closes it.
The foil band sits off the edge of the photo until it moves, so it never tints a face at rest.
SpringCard is the same thing with anything on it: the What I care about cards in the home page’s intro use it. It stays on screen, and opens below the word if there’s no room above.
Set --photo-width to change its size.
While it moves, it fires a springmove event every frame, which bubbles, with its speed in px a second as the detail. This site turns that into the sound of the air it moves.
With reduced motion, it appears in its resting pose.