Lucas Marques published Hairline, a React library of nineteen isometric line drawings that follow the mouse pointer with no dependencies

A React landing page that wants a tasteful interactive illustration usually ends up loading an animation framework several times the size of the illustration itself. Hairline, a library published on 2026-10-01 by Lucas Marques, ships nineteen such illustrations with no runtime dependencies, and the GitHub repository has reached 104 stars in the three days since.

Hairline is an MIT-licensed set of isometric line drawings that react to the mouse pointer. The repository description still says six figures, but the README table lists nineteen named components: Riffle, Terrain, Exploded, Phosphor, Slow, Turntable, Keyboard, Elevator, Phone, Laptop, Terminal, Cabinet, Branches, Vault, Lockers, Padlock, Patch, Dish and Router. Each one fills its parent at a 5:4 aspect ratio and reads a single intensity option that scales how far the figure reacts to the pointer. A live gallery with a slider is at hairline.lucasmarkes.com.

How each figure reacts

The behaviour is specific per figure and spelled out in the README. Riffle is a tray of eight cards: the one under the pointer stands up, and the arrow keys walk the selection. Terrain is a plinth of eighty-one pillars that rise around the pointer. Phosphor is a dot matrix that fades like a cathode-ray phosphor where the pointer paints over it. Vault is a vault door whose dial the pointer turns, with detents every ten and three bolts that draw back on the right combination. Branches is a commit graph with a branch that forks off main and merges back; the commit under the pointer rises and its history rises after it.

The author describes the shared recipe as the figure being a drawing you move the pointer across. A stronger intensity means a wider area reacts, a longer trail, a further swing of the dish, or a longer coast of the turntable, depending on the figure.

How a project installs it

The package is published to npm as @lucasmarkes/hairline. There is a React entry at @lucasmarkes/hairline/react that exports a client component for every figure, and a plain DOM entry whose function signature matches a Svelte action. The React entry is a client module, so a Server Component can render it with no use client directive of its own. The repository also publishes a shadcn registry at hairline.lucasmarkes.com/r/hairline.json, which installs the package and a theme-aware wrapper in a single command.

Hairline is ESM only. React 18 or later is an optional peer, needed only by the React entry. The core library has zero dependencies.

The traction and what it stops short of saying

The star count is the main signal that the library is being noticed. The repository shows 104 stars, 3 forks, and 143 commits as of 2026-10-04, with the first commit on 2026-10-01. The author, Lucas Marques, has not written a public story about building the project, and the README avoids any claim about who is using it in production.

For a team shipping a product site or documentation page, Hairline closes a small gap that usually gets paved over with a heavier dependency. The figures are not a replacement for a motion library once interactions grow past the pointer, so the choice is a specific one about tasteful illustration rather than general animation.

Source

Primary source: lucasmarkes/hairline on GitHub. Live gallery: hairline.lucasmarkes.com.