Experiments/Hairline Figures Lab
Experiment / demo
An exploration of the Hairline skill.
Controls
Intensity, theme, and the accessible name are options on every figure. Stroke is the --hairline-stroke custom property, in CSS pixels at any size. On this dark page the lit stroke is the accent. On paper it is the ink, because a thin accent line fails there. Auto follows the page, so it matches dark.
The card under the pointer stands up. A stronger intensity spreads the ripple further. Arrow keys walk the cards.
rest
Pillars rise around the pointer. A stronger intensity widens the area that rises.
rest
Moving across opens the window. Moving down picks a layer. A stronger intensity opens the gap further.
rest
The key under the pointer sinks, and its neighbors follow. A stronger intensity widens the patch.
rest
The pointer's height sets the lid, and the lid follows on a spring. A stronger intensity lets it open wider.
rest
The matrix plays a loop and fades where the pointer paints. A stronger intensity makes the trail linger. It holds still if you prefer reduced motion.
rest
07 / Stack ยท drawn with hairline-create
Five interface cards on a plinth, already stepped, the top card's corner square bright. The pointer picks a card from where it rests. That card slides out and rises, and the cards near it loosen, less the farther they sit. The read-out names the card. Intensity is how far the chosen card travels: 6, 16, and 34 at the slider's three marks. It leans on rules 01, 02, 05, and 08.
rest
Open the skill page