motion/springs

Write the motion switches and every --zg-motion-* / --zg-panel-* var on root (usually <html>): what an app calls when its motion settings change, so it never copies the curves. Returns the vars written.

function applyMotionVars(
  root: HTMLElement,
  prefs: MotionPrefs,
  options?: ApplyMotionOptions,
): Record<string, string>

ui/src/motion/springs.ts:297

--zg-motion-<name>-duration / -ease for every motion and for hover, for CSS that stays CSS. Below full, movement is 0ms; fades stay a brief tween under reduced; off zeroes everything.

function cssMotionVars(prefs: MotionPrefs): Record<string, string>

ui/src/motion/springs.ts:230

Both switches, read off <html> for imperative code.

function currentMotionPrefs(): MotionPrefs

ui/src/motion/springs.ts:388

Non-hook read for imperative animations (animate(), scroll glides).

function currentMotionTransition(name: MotionName, visualDuration?: number): Transition

ui/src/motion/springs.ts:400

Non-hook withFade, for animate() calls that move and fade one element.

function currentWithFade(name: MotionName, visualDuration?: number): Transition

ui/src/motion/springs.ts:411

The fade curve for opacity / colour: fade, or fade-out for an exit.

function fadeTransition(prefs: MotionPrefs, exit?: boolean): Transition

ui/src/motion/springs.ts:175

A menu's open (menu) or close (menu-exit) transition: one tween for scale / position, with the enter's opacity on the same curve but shorter (MENU_FADE_RATIO) so the surface is solid before it finishes growing. Reduced: an opacity-only 80ms tween (pair it with no transform). Off: instant.

function menuTransition(prefs: MotionPrefs, exit?: boolean): Transition

ui/src/motion/springs.ts:189

The motion transition for name under prefs. visualDuration overrides the spec's duration (seconds; the panel slider), scaling the tween too.

function motionTransition(
  name: MotionName,
  prefs: MotionPrefs,
  visualDuration?: number,
): Transition

ui/src/motion/springs.ts:156

Every motion custom property for prefs: the named curves, hover and the panels.

function motionVars(prefs: MotionPrefs, panelMs?: number): Record<string, string>

ui/src/motion/springs.ts:276

--zg-panel-ms / --zg-panel-ease for the layout panels (sidebar, side panel, terminal drawer, tree column). They animate width / height in CSS (a JS tween would re-lay out the chat column every frame), on the panel spring sized by the user's slider: panelMs is the spring's perceived duration; --zg-panel-ms becomes its settle time, which is also what usePresence (readPanelMs) waits before unmounting a closed panel.

function panelMotionVars(panelMs: number, prefs: MotionPrefs): Record<string, string>

ui/src/motion/springs.ts:262

menuTransition under the live preferences.

function useMenuTransition(exit?: boolean): Transition

ui/src/motion/springs.ts:355

Both switches, live.

function useMotionPrefs(): MotionPrefs

ui/src/motion/springs.ts:335

motionTransition(name) under the live preferences.

function useMotionTransition(name: MotionName, visualDuration?: number): Transition

ui/src/motion/springs.ts:346

Spring animations on (html[data-springs] is not off).

function useSprings(): boolean

ui/src/motion/springs.ts:330

A closing tab's exit, for every tab strip (tabs in an AnimatePresence initial={false}): it folds to nothing on settle as it fades out, so the tabs after it flow left from where they were. None with motion reduced or off: the tab goes at once and the rest close up.

function useTabExit(): TargetAndTransition | undefined

ui/src/motion/springs.ts:375

withFade(name) under the live preferences.

function useWithFade(name: MotionName, visualDuration?: number): Transition

ui/src/motion/springs.ts:366

name's transition for movement, with every FADE_KEYS value on the fade curve (fade-out when name is an exit): spring the transform, fade the opacity. Pass it as a motion component's transition.

function withFade(
  name: MotionName,
  prefs: MotionPrefs,
  visualDuration?: number,
): Transition

ui/src/motion/springs.ts:206

The panel slider's default (ms): the panel spring's perceived duration.

const DEFAULT_PANEL_MS = 200

ui/src/motion/springs.ts:115

The values withFade puts on the fade curve: never sprung, whatever moves around them.

const FADE_KEYS: readonly ['opacity', 'color', 'backgroundColor', 'borderColor', 'fill', 'stroke', 'filter', 'backdropFilter']

ui/src/motion/springs.ts:132

Hover / press colour feedback: one short tween, the same with springs on or off.

const HOVER_MOTION: { duration: number; ease: readonly [0.4, 0, 0.2, 1] }

ui/src/motion/springs.ts:112

Instant: what every motion resolves to with motion off.

const INSTANT: Transition

ui/src/motion/springs.ts:126

A menu's enter opacity lands ahead of its scale: ~100ms of the 140ms menu.

const MENU_FADE_RATIO = 0.7

ui/src/motion/springs.ts:106

Every MotionName, in the order of MOTIONS.

const MOTION_NAMES: MotionName[]

ui/src/motion/springs.ts:109

The curve of every MotionName: its spring (when it has one), tween duration in seconds and easing.

const MOTIONS: Readonly<Record<MotionName, MotionSpec>>

ui/src/motion/springs.ts:92

Reduced motion: a short fade; transforms jump (MotionConfig reducedMotion).

const REDUCED_FADE: Transition

ui/src/motion/springs.ts:129

Options of applyMotionVars.

interface ApplyMotionOptions

ui/src/motion/springs.ts:281

The two switches that pick what plays: the motion level and whether movement springs.

interface MotionPrefs

ui/src/motion/springs.ts:118

Name of a motion in the design system's vocabulary. snap, pop, panel, slide and settle are movement that springs; exit is a fast straight exit; fade and fade-out are the opacity curves for entering and leaving; menu and menu-exit are the menu tweens.

type MotionName =
  | 'snap'
  | 'pop'
  | 'panel'
  | 'slide'
  | 'settle'
  | 'exit'
  | 'fade'
  | 'fade-out'
  | 'menu'
  | 'menu-exit'

ui/src/motion/springs.ts:64