Notification Scenes

Notification scenes display animated toast cards that slide in from an edge, stack up, then exit. Use them to demonstrate activity feeds, real-time events, webhooks, or any "something just happened" moment in your product. Cards auto-time themselves to the scene duration.

Syntax

Each heading + following paragraph is one notification card. The variant controls where the stack appears on screen.

--- notifications (bottom-right, 8s) ---
# New signup
[email protected] just joined

# Payment received
$49.00 from [email protected]

# Build passed
deploy-prod finished in 38s

The paragraph after each heading is optional. A heading-only card also works:

--- notifications (top-right) ---
# Deployment complete
# All 142 tests passed
# Rollback ready

Anchor positions

9 positions are available. Cards from top-* variants stack downward; all others stack upward. Left-anchored cards slide in from the left edge; all others from the right.

Variant	Where the stack appears	Slide direction
bottom-right	Bottom-right corner	Slides in from right
bottom-left	Bottom-left corner	Slides in from left
bottom-center	Bottom edge, centered	Slides in from right
top-right	Top-right corner	Slides in from right, stacks down
top-left	Top-left corner	Slides in from left, stacks down
top-center	Top edge, centered	Slides in from right, stacks down
center	Canvas center	Slides in from right
center-right	Right edge, vertically centered	Slides in from right
center-left	Left edge, vertically centered	Slides in from left
stacked	Alias for bottom-right	Slides in from right

Tip: for a live app demo, use bottom-right - it matches where native OS notifications appear on macOS and Windows, so it feels more realistic.

Timing & card count

Card timing scales automatically to the scene duration and the number of cards. Each card slides in, stays visible while others continue to arrive, then slides out as a group when the exit phase begins. You don't need to calculate timing manually.

General guidelines:

Cards	Recommended duration
1 card	4s - 6s
2 - 3 cards	6s - 8s
4 - 6 cards	8s - 12s

Background image

Add a background image anywhere in the scene body to render it at 20% opacity behind the notification cards. Useful for showing the notifications floating over an app screenshot.

--- notifications (bottom-right, 8s) ---
![App screenshot](https://example.com/app.png)

# New user signed up
via Google OAuth

# Stripe payment
$99.00 received

Example use cases

SaaS activity feed

--- notifications (bottom-right, 10s) ---
# Alice upgraded to Pro
via Stripe checkout

# 3 new team members
invited this week

# Export complete
Q3 report ready to download

Dev / CI workflow

--- notifications (top-right, 8s) ---
# Build started
main branch @ a3b2c1d

# Tests passed
142/142 checks green

# Deployed to production
slickvid.com updated