Modal Scale In
A dialog grows the last few percent into place behind a darkening scrim, and leaves the same way.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Modal Scale In
*
* A confirmation dialog that grows the last few percent into place behind
* a darkening scrim, and leaves the same way it arrived. Escape or theAbout this pattern
The confirmation step, given just enough presence to interrupt. The dialog starts a few percent under full size and settles at exactly 1.0 while the scrim darkens beneath it — that tiny travel is what makes it read as arriving in front of the page rather than being pasted onto it. Restraint is the whole craft here: a dialog is mostly text, and text that overshoots its final size is the cheapest-looking thing in interface motion, so the spring is damped well past the wobble threshold and the scale delta stays small enough that glyph rescaling is imperceptible. Dismissal is deliberately not the entrance reversed — a hair of shrink and a quick ease-out, because leaving is not worth watching.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Modal sheet
The dialog scales up from just under full size as the page behind it dims.
Related patterns
- Bottom Sheet PresentA sheet rises from the bottom edge over a dimming backdrop and settles once.
- Gallery Lightbox OpenThe pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.
- Drawer Slide InA side drawer travels in over the page, and the page eases back a little to hand it the foreground.