# What's New Modal
URL: https://remocn.dev/docs/product-scenes/whats-new-modal

A product dashboard dims behind a modal that pages through feature slides and ends on a CTA click.

- Install: `npx shadcn@latest add @remocn/whats-new-modal`
- Vibe: clean
- Natural length: 224f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/whats-new-modal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WhatsNewModal } from "@/components/remocn/whats-new-modal";

const WhatsNewModalScene = () => (
  <WhatsNewModal
    brand="Acme"
    userName="Maya Chen"
    slides={[{ eyebrow: "New in 2.0", title: "Launch videos, built from components", body: "Drop in a scene and ship.", cta: "Try it now" }]}
  />
);

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

The app dashboard dims and a modal pops in with header art, an eyebrow, a title and a body; the slides swipe one by one, then a cursor clicks the final call to action. Pass `slides` (eyebrow, title, body, optional `cta` and `src`), `brand` and `userName`, and put your own app behind it with `children` or `src`. The default `images` are files that only exist in the Remocn repo, so pass your own. 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 |
|---|---|---|---|
| `slides` | `WhatsNewSlide[]` | `DEFAULT_SLIDES` | Slides: eyebrow, title, body, optional cta, illustration or src |
| `brand` | `string` | `"remocn"` | Brand name in the dashboard mock |
| `userName` | `string` | `"Maya Chen"` | User name shown in the dashboard mock |
| `children` | `React.ReactNode` | — | Your own app screen behind the modal |
| `src` | `string` | — | Screenshot behind the modal when no children are passed |
| `images` | `string[]` | `DEFAULT_IMAGES` | Pictures for the built-in art; defaults exist only in the Remocn repo |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A product-update or release video where in-app announcements are the format.
- A multi-feature recap told as a few slides with a clear call to action at the end.
- A launch beat that needs your real dashboard behind the dim, passed as `children` or `src`.

## Don't use when
- You want a full changelog list scrolling — use `changelog-scroll`.
- You want camera moves through one screenshot — use `screenshot-tour`.
- You want callouts pointing at UI targets — use `ui-callout`.