Nineteen figures, one set of options.

Install the package, then import a figure wherever your interface runs.

Click the command to switch package manager. ESM only, no dependencies, 39.9 kB gzipped for all nineteen; a bundle that imports one carries one.

Paste a figure. It fills its parent’s width at a 5:4 aspect ratio.

import { Terrain } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Terrain />;
}

Every figure takes the same four options, all optional.

<Terrain
  intensity?: number
  theme?: "auto" | "light" | "dark"
  label?: string
  onRead?: (text: string) => void
  {...divProps}
/>

Import any of the nineteen from @lucasmarkes/hairline/react. Each renders a <div>, takes any <div> attribute and forwards its ref. The entry is a client module, so a Server Component renders it without writing "use client".

import { Terrain } from "@lucasmarkes/hairline/react";

export default function Page() {
  return <Terrain />;
}

terrain(element: HTMLElement, options?: HairlineOptions): {
  update(options: HairlineOptions): void
  destroy(): void
}

One function per figure, named in lower case: riffle, terrain, exploded, phosphor, slow, turntable, keyboard, elevator, phone, laptop, terminal, cabinet, branches, vault, lockers, padlock, patch, dish, router. In update, a key set to undefined goes back to its default and a key left out stays as it is. destroy removes the drawing and its listeners.

import { terrain } from "@lucasmarkes/hairline";

const figure = terrain(document.getElementById("figure")!);

figure.update({ intensity: 0.8 });
figure.destroy();

Without a bundler, import from esm.sh in a module script.

<div id="figure" style="width: 400px"></div>

<script type="module">
  import { terrain } from "https://esm.sh/@lucasmarkes/hairline";

  terrain(document.getElementById("figure"));
</script>

Every figure takes intensity, from 0 to 1. Here is what it turns up.

• Riffle

  Higher intensity: The ripple spreads further from the pulled card.

  A tray of eight cards. The card under the pointer stands up and its neighbours lean after it. The arrow keys walk the cards.

• Terrain

  Higher intensity: A wider area rises.

  Eighty-one pillars on a plinth. They rise around the pointer and settle back into a dune with two rises.

• Exploded

  Higher intensity: The layers open further.

  An app window taken apart into four layers. Moving across opens the gap; moving down picks a layer.

• Phosphor

  Higher intensity: The trail lingers longer.

  A seven by seven dot matrix playing a loop. Where the pointer paints, the dots fade like phosphor.

• Slow

  Higher intensity: Time slows down more.

  Crates riding a belt through a gate. Hovering slows the clock without stopping it.

• Turntable

  Higher intensity: The spin coasts longer.

  Blocks on a turntable. A flick across it spins it, and it settles on the nearest quarter turn.

• Keyboard

  Higher intensity: A wider patch of keys sinks.

  Sixty keys in a block. The key under the pointer sinks and its neighbours follow it down, less the further away.

• Elevator

  Higher intensity: The car travels faster between floors.

  Four floors with the shaft open and the car inside. The pointer's height picks the floor; the car travels there.

• Phone

  Higher intensity: The layers open further.

  A phone in layers: glass, board, battery, shell. Moving across opens the gap; moving down picks a layer.

• Laptop

  Higher intensity: The lid opens wider.

  A thin laptop, open on its hinge. The pointer's height sets the lid; it follows on a spring.

• Terminal

  Higher intensity: The lift spreads further.

  A terminal window with its history in rows. The pointer's height scrolls back; the line under it lifts and its neighbours follow.

• Cabinet

  Higher intensity: More blades come out.

  A rack of twelve blades, a few half out. The pointer's height pulls the nearest ones out, the farther the less.

• Branches

  Higher intensity: More of the history rises.

  A commit graph with a branch forking off main and merging back. The commit under the pointer rises, and its history rises after it.

• Vault

  Higher intensity: The dial coasts longer.

  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.

• Lockers

  Higher intensity: The door opens wider.

  A bank of twelve lockers, one ajar at rest. The locker under the pointer opens; the one at rest closes.

• Padlock

  Higher intensity: The shackle swings further.

  A padlock with its shackle in. As the pointer comes near the shackle lifts out and swings open.

• Patch

  Higher intensity: The lean spreads further.

  A patch panel of twenty-four ports with cables. The cable under the pointer lifts and its neighbours lean away.

• Dish

  Higher intensity: The dish swings further.

  A parabolic dish on a two-axis gimbal. The pointer aims the dish; it follows on a spring.

• Router

  Higher intensity: The lean spreads further.

  A router with its antennas up. Each antenna leans toward the pointer, the nearest most.

Six custom properties, set on the figure or on any ancestor. Without them a figure is light, or dark when an ancestor has class dark or data-theme="dark", or when the page’s color-scheme is dark.

/* On a figure or anything above it. Without them a figure is light,
   or dark when the page says so. --hairline-plate must be the colour
   the figure sits on: it hides what is drawn behind each plate. */
.figures {
  --hairline-plate: #ffffff;
  --hairline-hi: #232327;
  --hairline-edge: #a4a4ac;
  --hairline-mid: #c3c3c9;
  --hairline-lo: #e0e0e4;
  --hairline-stroke: 0.9;
}

• Each figure is an image with a description; label (or aria-label in React) replaces it.
• Riffle is a focusable group: the arrow keys walk its cards and a live region reads out the card’s number.
• Under prefers-reduced-motion, Phosphor and Slow hold still, and every figure still answers the pointer.