# durations

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

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

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

```ts
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

```tsx
fade({ duration: durations.fast });
```