hairline trained
Calm motion comes from numbers you can name. This page distils the hairline package (v0.2.0, read 2026-10-05) and the rules its author wrote down while building it with Claude.
mental model
A figure is one object a hand would recognise, one variable handed to the pointer, and one bright stroke that says where to look. Position is continuous, so it gets a spring (k 100, c 18, m 1). Choice is discrete, so it gets a 700 ms ease-out on cubic-bezier(.32, .72, 0, 1). Motion spreads from the pointer by distance, 30 to 60 ms a step, and the reach falls to a floor: 1, then 0.31 at 42% of the radius, then 0.09 beyond.
examples
The package ships nineteen figures with the same four options: intensity, theme, label, and onRead. Map the theme once in the app's global stylesheet; never ship the registry's wrapper file.
[data-hairline] {--hairline-plate: var(--background);--hairline-hi: var(--foreground);--hairline-edge: var(--muted-foreground);--hairline-mid: color-mix(in oklab, var(--muted-foreground) 55%, var(--background));--hairline-lo: var(--border);}
best practices
Design the rest pose first: it is the thumbnail. Keep one highlight, a stroke and never a fill. Draw a solid as a rounded silhouette with one dim crease, and no vertical corners. Paint opaque plates back to front. Keep words out of the drawing; a short read-out names the choice. Run one shared frame loop that sleeps offscreen.
strengths
There are no dependencies, all nineteen figures weigh 39.9 kB gzipped, and the server renders an empty 5:4 box so nothing shifts. Touch works: a tap counts as hover, vertical scroll passes through, and the figure holds for 1.4 s before returning to rest. Reduced motion still answers the pointer.
weaknesses / pain points
The 700 ms tween is illustration timing; controls stay under 300 ms. Padlock and Vault sit near the icon trap the author warns about. Plates hide what is behind them, so a wrong plate colour shows as patches on cards.
gotchas
Hit-testing the pose on screen makes a flicker loop: the part lifts away, the hover drops, the part falls back, and the hover returns. Test the rest or target pose instead. With parts at different heights, one fixed ground plane picks the part behind a raised one.
practiced cases
The making-of process transfers to any motion built with AI. Ask for numbers, not adjectives. Make the model build the slider you judge with. Turn every correction into a numbered rule, so it cannot return two figures later.