Back to HyperFrames Templates
Notification Stack
Glass notifications that spring in and stack with real depth blur
Description
A social moment with weight: notification cards spring in from the right on a real (velocity-integrated) spring, and as each new one lands the ones beneath recede — scaling down, blurring and dimming for genuine depth. After the stack fills it springs away and loops. Frosted glass over a blurred wallpaper sells the layering; a tiny vanilla-JS spring integrator does the physics.
Edit the `CARDS` array in the script (app, name, message, accent) and the spring feel via `STIFF`/`DAMP`. Perfect for app-launch, engagement or 'the DMs are rolling in' beats.
How to use it
- Copy the block's HTML from the Source Code tab.
- Paste it into your HyperFrames composition (or any HTML page).
- Edit the text, colours, and timing to match your brand, then render it to video with HyperFrames.
Category
Social
Building with Remotion?
Get the same effects as ready-to-copy Remotion (React) components — 80+ free video templates.