lucasmarkes/hairline

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/lucasmarkes/hairline.svg?style=card)](https://bestofgithub.dev/repo/lucasmarkes/hairline)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/lucasmarkes/hairline.svg)](https://bestofgithub.dev/repo/lucasmarkes/hairline)

Loading README…

Function	Component	What it is	A stronger `intensity`
`riffle`	`Riffle`	A tray of eight cards. The card under the pointer stands up; the arrow keys walk the cards.	The ripple spreads further from the pulled card.
`terrain`	`Terrain`	Eighty-one pillars on a plinth that rise around the pointer.	A wider area rises.
`exploded`	`Exploded`	An app window in four layers. Moving across opens the gap; moving down picks a layer.	The layers open further.
`phosphor`	`Phosphor`	A dot matrix that plays a loop, and fades like phosphor where the pointer paints it.	The trail lingers longer.
`slow`	`Slow`	Crates riding a belt through a gate. Hovering slows the clock without stopping it.	Time slows down more.
`turntable`	`Turntable`	Blocks on a turntable. A flick spins it; it settles on the nearest quarter turn.	The spin coasts longer.
`keyboard`	`Keyboard`	A sixty-key board. The key under the pointer sinks, and its neighbours follow it down.	A wider patch of keys sinks.
`elevator`	`Elevator`	Four floors beside an open shaft. The pointer's height picks a floor; the car travels there.	The car travels faster between floors.
`phone`	`Phone`	A phone in layers: glass, board, battery, shell. Moving across opens the gap; moving down picks a layer.	The layers open further.
`laptop`	`Laptop`	A thin laptop, open on its hinge. The pointer's height sets the lid; it follows on a spring.	The lid opens wider.
`terminal`	`Terminal`	A terminal window with its history in rows. The pointer's height scrolls back; the line under it lifts and its neighbours follow.	The lift spreads further.
`cabinet`	`Cabinet`	A rack of twelve blades, a few half out. The pointer's height pulls the nearest ones out, the farther the less.	More blades come out.
`branches`	`Branches`	A commit graph with a branch forking off main and merging back. The commit under the pointer rises, and its history rises after it.	More of the history rises.
`vault`	`Vault`	A vault door with a dial and three bolts. The pointer turns the dial; detents catch every ten, and on the combination the bolts draw back.	The dial coasts longer.
`lockers`	`Lockers`	A bank of twelve lockers, one ajar at rest. The locker under the pointer opens; the one at rest closes.	The door opens wider.
`padlock`	`Padlock`	A padlock with its shackle in. As the pointer comes near the shackle lifts out and swings open.	The shackle swings further.
`patch`	`Patch`	A patch panel of twenty-four ports with cables. The cable under the pointer lifts and its neighbours lean away.	The lean spreads further.
`dish`	`Dish`	A parabolic dish on a two-axis gimbal. The pointer aims the dish; it follows on a spring.	The dish swings further.
`router`	`Router`	A router with its antennas up. Each antenna leans toward the pointer, the nearest most.	The lean spreads further.
`loupe`	`Loupe`	A stand loupe on a blank ruled sheet. The pointer drags it across; the rules pass enlarged under the glass, with nothing between them.	The glass magnifies more.
`sieve`	`Sieve`	Three test sieves stacked over a pan. The pointer's height picks one; it rises clear of the stack, and every mesh is bare.	The gap opens further.
`rail`	`Rail`	A garment rail with seven bare hangers. The pointer brushes them; each rocks away, the nearest most, and settles.	The brush reaches more hangers.
`plug`	`Plug`	A wall socket, and a plug lying on the floor at the end of its cord. The pointer draws the plug up toward the socket; it stops short, and falls back.	The plug comes closer to the socket.
`query`	`Query`	A question mark built as a bent bar over a loose ball. The hook turns toward the pointer, and the ball rolls after it.	The hook turns further.
`drawer`	`Drawer`	A cabinet of three drawers. The pointer's height picks one; it slides out and shows two dividers with nothing between them.	The drawer opens further.
`basket`	`Basket`	A wire basket under a bail handle. It tilts toward the pointer and shows its bare floor; the handle swings after it.	The basket tilts further.
`plot`	`Plot`	A bar chart with seven flat tabs where the bars would stand. The pointer brushes them; each lifts a little and drops back to zero.	The tabs lift higher.
`hub`	`Hub`	A hub with eight tiles around it on dashed links. The tile under the pointer rises and its link turns solid.	The tiles rise higher.
`relay`	`Relay`	A hub with four branches of tiles. The path to the leaf under the pointer lights hop by hop.	Each hop waits longer.
`settle`	`Settle`	Twelve tiles lie crooked round a hub. As the pointer nears it, they slide into a tree and the links draw in.	The tree forms from further away.
`format`	`Format`	A file of ten crooked lines. The pointer runs the formatter down it, and every line above snaps square.	The lines start more crooked.
`rebuild`	`Rebuild`	A tree of packages. The one under the pointer rises, and every package that depends on it rises after it.	The packages rise higher.
`stack`	`Stack`	A call stack of five frames. The pointer's height picks one, and the frames above lift away to open it.	The frames above lift further.

Option	Type	Default
`intensity`	`number`	`0.5`	How strongly the figure answers the pointer, from 0 (subtle) to 1 (strong). A number outside 0…1 is clamped; anything that is not a number is 0.5.
`theme`	`"auto" \| "light" \| "dark"`	`"auto"`	`"auto"` follows the page: an ancestor with class `dark` or `data-theme="dark"`, then the page's `color-scheme`.
`label`	`string`	a description in English	The accessible name. In React, `aria-label` does the same.
`onRead`	`(text: string) => void`		The figure's caption, each time it changes: `"03"`, `"gap 28.0"`, `"rate 0.20×"`.
`play`	`boolean`	`false`	Walks the figure through its answer on its own, in a loop, until the pointer or focus arrives; it resumes after they leave.

lucasmarkes/hairline

hairline

Install

Use

React

Anything else

The figures

Options

Theme

Notes

Make your own

More

License