Notification Avalanche

Notifications arrive faster and faster on a phone, group into a stack, then clear to a calm caught-up message.

Installation

$ pnpm dlx shadcn@latest add @remocn/notification-avalanche

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NotificationAvalanche } from "@/components/remocn/notification-avalanche";
 
const NotificationAvalancheScene = () => (
  <NotificationAvalanche
    clearLabel="All caught up."
    total={128}
    counterLabel="unread before 10 am"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NotificationAvalanche"
    component={NotificationAvalancheScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

Notification cards drop onto a phone lock screen at an accelerating pace while an unread counter climbs to total. A swipe groups them into one stack, then the screen clears to clearLabel with a check and clearSubLabel. Pass notifications (app, title, body, color), clearLabel and total to retell your inbox, and set surface to desktop for a laptop layout. The default wallpaper is a file that only exists in the Remocn repo, so pass your own image URL. Ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
notifications	AvalancheNotification[]DEFAULT_NOTIFICATIONS Notification cards in arrival order: app, title, body, color
clearLabel	string"All caught up." Headline shown once everything is cleared
clearSubLabel	string"remocn sorted 128 notifications" Line under the clear headline
total	number128 Final value of the runaway unread counter
counterLabel	string"unread before 10 am" Caption under the counter beside the phone
surface	"phone" \| "desktop""phone" Device frame: phone or desktop
wallpaper	stringstaticFile("reel/reel-1.jpg") Wallpaper image URL behind the notifications
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""dark" Light or dark palette
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

notificationsAvalancheNotification[]
Notification cards in arrival order: app, title, body, color
DefaultDEFAULT_NOTIFICATIONS
clearLabelstring
Headline shown once everything is cleared
Default"All caught up."
clearSubLabelstring
Line under the clear headline
Default"remocn sorted 128 notifications"
totalnumber
Final value of the runaway unread counter
Default128
counterLabelstring
Caption under the counter beside the phone
Default"unread before 10 am"
surface"phone" | "desktop"
Device frame: phone or desktop
Default"phone"
wallpaperstring
Wallpaper image URL behind the notifications
DefaultstaticFile("reel/reel-1.jpg")
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"dark"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters