[ @sdxc/ui/animations ]

durations

Named transition-duration steps, in milliseconds, ordered from the snappiest anchored surface to the largest edge-docked one.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { durations } from "@sdxc/ui/animations";

Usage

Named transition-duration steps, in milliseconds, ordered from the snappiest anchored surface to the largest edge-docked one. Pass one as an animation factory's duration option so every overlay shares one rhythm.

Signature

const durations = {
	/** Small surfaces anchored to a trigger: Tooltip, HoverCard, Menu. */
	fast: 150,
	/** The default for most overlays: Popover, Dialog, Toast. */
	normal: 200,
	/** Larger surfaces that cover more of the viewport: Sheet, Drawer. */
	slow: 300,
	/** The largest surfaces, or a transition carrying secondary motion alongside the primary one. */
	slower: 400,
} as const

Examples

fade({ duration: durations.fast });