Design System / 05

Components

The full kit in six families — every piece squared, hairlined, monochrome, and shipped with a reduced-motion fallback. Each family page pairs live specimens with prop notes.

Families

ActionsButtons, roll labels, dot links, tagsTextChar flips, typing, fitted titles, letter revealsStructureAccordions, index tables, cards, sticky stacksOverlaysModal, drawer, hotspots, custom cursorMediaSlideshow, marquee, preloader, page fadeFormsUnderline and ghost fields, newsletter bar, status

Hooks

Two headless primitives power the scripted components and are exported for direct use.

Scrub

Progress 0%

The hairline scales with this box’s travel through the viewport — scroll to scrub it back and forth.

One-shot reveal

Lorem ipsum

Reveals once when it first enters the viewport, then stays put.

useScrollProgress(options?)

Returns { progress, ref } — a 0–1 scrub value for the element as it travels through the viewport, measured per scroll frame. It is position-derived, so it stays live under reduced motion; gate showy consumer effects separately.

start
number = 1
Viewport-height fraction where the element's top starts the mapping (1 = bottom edge).
end
number = 0
Viewport-height fraction where the element's bottom ends the mapping (0 = top edge).

useInViewOnce(factor?)

Returns { inView, ref } — flips to true the first time the element's top crosses factor × viewport height (default 0.92) and never flips back. Under reduced motion it short-circuits to visible.

factor
number = 0.92
Trigger line as a fraction of viewport height.