Six entrances
Choose scale, slide, perspective flip, spotlight, drawer, or soft-focus arrival.
Dialogs & focus
Modal Motion
Make an interruption feel deliberate. Tune entrance, backdrop, surface, and timing while the component protects focus and dismissal behavior.
A contained interruption
Motion can establish focus without stealing control.
The generated dialog opens predictably, contains keyboard focus, closes from every expected path, and restores focus to its trigger.
Complete dismissal
Escape, backdrop, Cancel, and Continue all close through one consistent path.
Focus containment
Tab and Shift+Tab remain inside the open dialog, then return to the launcher.
Three-step workflow
How to use the Modal Motion studio
- Match motion to consequence
Use stronger entrances sparingly and quieter motion for routine confirmation.
- Balance backdrop and surface
Preserve context without allowing the background to compete.
- Audit every dismissal
Verify pointer, Escape, forward Tab, reverse Tab, and focus restoration.
Questions, answered.
Is it a real modal dialog?
Yes. The export uses role=dialog, aria-modal, a labelled title, and a contained focus cycle.
Does clicking the backdrop close it?
Yes, while clicks inside the dialog do not bubble into that dismissal.
Does reduced motion disable the dialog?
No. Only decorative transitions are removed; opening and closing still work.