# Live Activity
URL: https://remocn.dev/docs/product-scenes/live-activity

A phone island blooms into a live activity with a progress bar and countdown, then finishes with a check.

- Install: `npx shadcn@latest add @remocn/live-activity`
- Vibe: tech
- Natural length: 260f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/live-activity
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import {
  LIVE_ACTIVITY_DELIVERY,
  LiveActivity,
} from "@/components/remocn/live-activity";

const LiveActivityScene = () => (
  <LiveActivity status={LIVE_ACTIVITY_DELIVERY} date="Tuesday, October 24" />
);

export const RemotionRoot = () => (
  <Composition
    id="LiveActivity"
    component={LiveActivityScene}
    durationInFrames={285}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A phone's island blooms into a compact pill, expands into a card with a countdown and a three-step progress bar, then collapses; the lock screen is pulled down where the activity completes with a check and a done line. Pass a `status` object (title, details, steps, seconds, format, glyph) to retell your own flow, or use the exported `LIVE_ACTIVITY_RENDER` and `LIVE_ACTIVITY_DELIVERY` presets. Ships dark by default and light.

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 |
|---|---|---|---|
| `status` | `LiveActivityStatus` | `LIVE_ACTIVITY_RENDER` | Activity content: title, details, steps, seconds, format and glyph |
| `date` | `string` | `"Tuesday, October 24"` | Date line shown on the lock screen |
| `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
- A launch for an app with a live status (render, delivery, deploy) that lives on the lock screen.
- A beat where an ETA counts down and the activity flips to a done state with a check.
- A vertical cut with captions explaining what the live activity gives users.

## Don't use when
- You want a home-screen widget with a chart — use `home-widget`.
- You want a map and a driver arriving — use `ride-tracking`.
- You want a stack of incoming alerts — use `notification-avalanche`.