Preview 4 / 5 — Modal structure + step transitions

The wizard's chrome — header, step indicator, footer, and how steps animate when the agent clicks Next/Back. Today this is plain Radix Dialog with no transition.

Heads up: The animations below loop so you can see the motion. In production they fire once per Next/Back click. Watch each card for ~5 seconds.

A   Current   +0 KB   Plain Radix Dialog, no transition

Today's wizard. Step counter as plain text. Steps swap instantly with no motion. Functional but flat — what you said feels weak.

Pros
  • Zero new deps
  • Snappy
Cons
  • No sense of progress
  • No spatial continuity

No animation · plain text counter

B   + New dep   +11 KB   Progress bar + framer-motion slide

Top progress bar fills as the agent advances. Steps slide in from the right when going forward, left when going back. `framer-motion` for the transitions. Strong sense of momentum.

Pros
  • Visceral progress
  • Direction is obvious
  • Used in cal.com / Notion
Cons
  • +11 KB framer-motion
  • Slide can feel "marketing-y" if overdone

Progress bar pulses · steps slide

C   Current   +0 KB   Numbered dots + sticky header

No new deps. Numbered dots show where you are; clicking a completed dot jumps back. Sticky header keeps title + dots visible while body scrolls. Subtle CSS-only fade between steps.

Pros
  • Zero new deps
  • Click-to-jump on done dots
  • Always know where you are
Cons
  • No directional motion
  • Dots feel "form-wizard-y"

Sticky dots · click done to jump back

D   + New dep   +6 KB   vaul Drawer on mobile + Dialog on desktop

Auto-detect: phone-sized viewport gets a slide-up drawer (native iOS feel, draggable to dismiss); desktop stays a centered dialog. Big quality bump for agents on phones in the field.

Pros
  • Mobile feels native
  • Drag-to-dismiss on touch
  • Desktop unchanged
Cons
  • +6 KB vaul
  • Two sets of styles to maintain
Book appointment

Mobile-only — drawer slides up from bottom