Motion & interaction

Hover, focus and press are an overlay of the control’s own text colour at a fixed opacity, so they read correctly on any fill, theme, brand or glass: --state-hover 0.08, --state-focus 0.10, --state-pressed 0.12, --state-dragged 0.16. Add nx-state-layer to any custom control. Pressables also scale to 0.97 on a fast spring (nx-press). There is no ripple. On mobile the pressed layer and the press spring come with a semantic haptic instead of hover.

Overlays, menus, tooltips and toasts share one set of keyframes. Add nx-motion and the element fades in on the effects spring while it moves and scales in on the spatial spring. It runs on Radix’s data-state (open / closed), or on data-motion="from-…" / "to-…" for anything else. Exits are faster and never overshoot. nx-pop scales floating layers from 0.96 with a 4px nudge away from the side they open on; nx-dialog scales from 0.96 and rises 8px; nx-drawer slides from its edge.

<div className="nx-motion nx-pop" data-state={open ? 'open' : 'closed'} data-side="bottom">…</div>

ListTransition grows new items in and collapses removed ones in place (space items with padding, not gap). nx-stagger brings children in 40ms apart; re-key the parent to replay. SkeletonSwap crossfades a skeleton into the content, so loaded data never pops.

<ListTransition as="ul" itemAs="li">{items.map((i) => <Row key={i.id} />)}</ListTransition>

<div className="nx-stagger" key={run}>…</div>

<SkeletonSwap loading={isLoading} skeleton={<Skeleton shape="rect" height={120} />}>{content}</SkeletonSwap>

Card variant="interactive" lifts 2px on hover on the spatial spring and moves from elevation 1 to 2; leaving settles faster on the effects spring. Press sinks it to 0.99. The lift only applies where a real pointer hovers, so touch never gets stuck in the hover state. effect="sheen" is opt-in: a soft light follows the pointer. Keep it to one or two hero cards per page.

Opt in with one import. The old page fades out fast; the new one fades in and rises 8px on the spatial spring. Single-page apps wrap the route update in startViewTransition; where the browser has no View Transitions API it just runs. On mobile the native stack does the push and the back gesture.

import '@nexub/themes/view-transitions'; // after the base theme
import { startViewTransition } from '@nexub/react';

startViewTransition(() => navigate('/settings'));

AppHeader condense shrinks the header from 64 to 52px and lifts it onto elevation 1 over the first 64px of page scroll, with a CSS scroll timeline and no JavaScript. On iOS the native large title does the same.

One focus ring for everything: a 3px outline in --color-ring-default, offset 2px, following border-radius and using Highlight in forced-colours mode. On coarse pointers small controls get an invisible 44×44px hit area (nx-hit) without changing their size; native controls always reach 44pt.