# Notification Avalanche
URL: https://remocn.dev/docs/product-scenes/notification-avalanche

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

- Install: `npx shadcn@latest add @remocn/notification-avalanche`
- Vibe: clean
- Natural length: 97f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `128` | 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` | `string` | `staticFile("reel/reel-1.jpg")` | Wallpaper image URL behind the notifications |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | 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 |

## Use when
- An inbox, alerts or notification-management product where the problem is overload.
- A before-and-after beat: chaos first with a runaway unread counter, calm right after.
- A vertical or square cut where the phone sits beside a big counter.

## Don't use when
- The chaos is desktop windows and chat toasts resolving into an app — use `chaos-to-order`.
- You want a single ongoing status, not a pile — use `live-activity`.
- You want a screen to scroll rather than alerts to arrive — use `phone-scroll`.