Notification Stack
Toasts arriving, stacking, and clearing themselves in a screen corner.
SceneScenes
$ npx remotion-ui@latest add notification-stackEach toast carries its own life. Arrivals and dismissals overlap, so the stack fills while notifications outpace their own timers and drains again once they stop — it is never a fixed list that fades in together.
The collapse is what sells it: when a toast leaves, the ones below travel up into the gap instead of jumping. Every slot offset is the sum of the live heights above it, and a dismissing toast's contribution falls smoothly to zero rather than switching off.
There is no holdSeconds here, because there is nothing to hold — set
lifeSeconds for the default dwell and override a single toast with holdFor.
Bottom-anchored stacks grow upward, so the newest toast is always the one
nearest the corner regardless of align.
showProgress draws the draining line along each toast's bottom edge. Leave it
on for scenes where the stack sits still for a while: it is the only thing
moving between one arrival and the next.
For a single pointed annotation rather than system chatter, use
comment-callout or callout-spotlight.
Transparent overlay scene designed to sit over an app or capture. Each toast carries its own life, so there is no holdSeconds — the stack fills and drains on its own. Slot offsets are the sum of the live heights above, which is what makes the rows below travel up into a dismissal instead of jumping.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/notification-stack- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: toasts, align, startAtSeconds, staggerSeconds, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { NotificationStack } from "@/remotion/scenes/notification-stack";
<NotificationStack
align="top-right"
toasts={[
{ title: "Render finished", body: "launch-teaser.mp4", tone: "success", meta: "now" },
{ title: "Storage at 86%", tone: "warn", meta: "2m" },
]}
lifeSeconds={2.3}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| toasts | Toast[] | 4 sample toasts | Title, optional body and meta, tone, and optional per-toast arrival and dwell. |
| align | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | Corner the stack anchors to. Bottom anchors grow upward. |
| startAtSeconds | number | 0.3 | Second the first toast arrives. |
| staggerSeconds | number | 0.62 | Seconds between arrivals, for toasts without their own atSeconds. |
| lifeSeconds | number | 2.3 | Default seconds a toast stays up before dismissing itself. |
| showProgress | boolean | true | Draining line along each toast's bottom edge. |
| accentColor | string | "#E8B86D" | Colour used by the warn tone. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |