Motion

Notchset moves like an instrument: keys travel a pixel or two and spring back, nodes bloom and blink while something is live, menus unfold, rows settle. Every timing is a token in the foundation, and all of it switches off in one place.

Reduced motion is automatic

Under the visitor's prefers-reduced-motion setting, with no code from you, every Notchset transition and animation completes instantly: no travel, no blooms, no fades. Live nodes hold steady instead of blinking, the scanner stops with its centre tick lit, and countdown bars are hidden. Timers are time, not motion, so they keep their timing: a toast still dismisses on schedule and Hold to Confirm still needs its full hold. Anything you render inside a Notchset component is stilled the same way, so code that waits for an animation to end should also handle it ending at once.

Switch it off yourself

Add data-motion="off" to any element and every Notchset component inside it behaves as under reduced motion. Put it on <html> to offer your own "reduce motion" setting for the whole app. Overlays (menus, dialogs, popovers, tooltips) render in a portal on document.body, outside a smaller container. To still one part of a page, overlays included, wrap it in NotchsetScope (from instrument, installed with every component): its overlays portal into a host that carries the same setting. sound="off" silences the part the same way.

// Keep the choice in your app (a setting, a cookie) and render it on <html>.
<html lang="en" data-motion={reduceMotion ? "off" : undefined}>

import { NotchsetScope } from "@/lib/beautiful-ui/notchset/instrument";

<NotchsetScope motion="off" sound="off">
  <RunsTable />{/* its menus and tooltips are still and silent too */}
</NotchsetScope>

Timing tokens

The foundation sets each timing as a custom property on :root: --notchset-key-down, --notchset-key-up, --notchset-node-bloom, --notchset-travel, --notchset-unfold, --notchset-row-settle, --notchset-check and their easings. Set them in your own CSS to make the system calmer or snappier everywhere.

Sound

Sound is separate and off unless you mount the provider. See Installation.