# Step transition

Calm motion between steps: the incoming pane fades in and settles 8px in the direction of travel on the sheet timing. Instant under reduced motion.

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** composed
- **Build:** CSS transition on the step container (or `framer-motion` if already present).
- **In apps/admin today:** —
- **Client component:** yes. 

## Content rules

- —

## Do

- Keep motion under 300ms.

## Don't

- Slide whole pages.

## Motion

- Fade + `--toast-shift` (8px) settle on `--motion-sheet-in` (260ms, `--ease-in`), direction-aware.
- Reduced motion: tokens collapse to 1ms, 0px.

## Accessibility

- **Keyboard:** —
- **ARIA:** Announce the new step title (focus the heading).
- **Focus:** Heading.

## Tokens

`--motion-sheet-in` `--toast-shift`

## Files

`step-transition.html` live specimen · `step-transition.css` kit rules · `step-transition.d.ts` props · full page: `docs/components/step-transition/` (phone: `m/`).