Stack Push Page
A new screen arrives over the current one, which holds back and dims to signal depth.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Stack Push Page
*
* The new page slides over the current one, which parallaxes back and
* dims behind it. Going back reverses only the top page — the oneAbout this pattern
The navigation model behind almost every mobile app: screens stack, and the way they move is what tells you whether you went forward or back. The arriving screen covers the frame while the one underneath is held at a fraction of a screen width and dimmed — that difference in travel is the entire depth cue, and it is what makes the back gesture feel like uncovering rather than replacing. Nothing scales: a page that scales scales every glyph on it, so depth is carried by translation, a dimming layer and an edge shadow instead. Popping is a plain ease rather than a spring, because a full screen rebounding at the edge of the frame is the most visible wobble a stack can produce.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
The pushed screen covers the previous one, which shifts back a fraction of the width.
Related patterns
- Bottom Sheet PresentA sheet rises from the bottom edge over a dimming backdrop and settles once.
- Drawer Slide InA side drawer travels in over the page, and the page eases back a little to hand it the foreground.
- Wizard Step AdvanceThe rail fills toward the step you are entering while the panel travels the way you sent it.