hairline

Hairline is a library of animated isometric line drawings that react to the mouse: a keyboard whose keys sink under the pointer, a vault dial that turns, a commit graph that lifts. Each is a React component or a plain function for any page, Svelte and vanilla included. More than thirty figures, MIT licensed, free, zero dependencies.

Setup is npm i @lucasmarkes/hairline, or one shadcn command that also wires in your theme colors. Figures respect reduced-motion settings, render an empty box on the server so the page doesn't jump, and share one animation loop that stops when nothing moves. Theming is six CSS variables. Nothing to host.

Two coding agent skills come with it: hairline-create draws a new figure from a prompt, and hairline-adopt rebuilds an SVG icon as one. Solo builders and small teams: free, and a fast way to dress up a landing page hero or empty state. Larger teams with a design system: free, but your designers will want a say.

The catch: it's two weeks old and pre-1.0, with new figures in almost every release, so pin the version. It's also one fixed look. For animation your designer drew, use Rive or Lottie.