Toast Slide In
A toast slides in from the edge, rests while a thin line counts down, then leaves the way it came.
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 · Toast Slide In
*
* A toast that slides in from the edge, rests while a thin progress
* line runs out, then leaves the way it came.About this pattern
Transient feedback that must not steal the cursor: an action succeeded, a job finished, an undo window is open. The panel travels in from the edge it is docked against, holds while a hairline progress bar runs out, then retreats faster than it arrived. The countdown line is the part most toasts skip, and it is the part that makes the toast feel fair — the user can see how long they have to hit Undo instead of guessing. Motion is translate-and-fade only, so the message text never deforms on the way in.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
A transient bar that holds an undo window open, then withdraws unasked.
Related patterns
- Undo SnackbarA removed row leaves a bar behind, and a hairline drains across it toward the point of no return.
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.
- Banner DismissAn announcement strip fades its message, then collapses its own height so the page closes the gap.