# App Promo

Vertical app ad: the app's name and promise, its screens on a phone or laptop, its rating, and a download call.

```bash
npx shadcn add https://www.reelcn.dev/r/app-promo.json
```

Usage:

```tsx
<Composition
  id="AppPromo"
  component={AppPromo}
  schema={appPromoSchema}
  defaultProps={appPromoDefaults}
  calculateMetadata={appPromoMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

Use for:

- App store previews and paid social ads
- Showing a mobile or desktop app screen by screen

Avoid:

- A web product in a browser window. Use `product-launch`

Dependencies:

- `zod`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| appName | `string` | — |  |
| screens | `string[]` | — | Screenshot or screen-recording URLs, one scene each. A placeholder screen stands in when empty. |
| device | `"phone" \| "laptop"` | — |  |
| cta | `string` | — |  |
| theme? | `"daylight" \| "midnight" \| "mono" \| "ledger" \| "afterglow" \| "chromewave" \| "neon" \| "paper" \| "sunset"` | — | Theme preset. Inherits the surrounding `ThemeProvider` when omitted. |
| brand? | `{ accent?: string; logo?: string; font?: string; }` | — |  |
| sfx? | `boolean` | — | Plays a soft whoosh as each scene starts. |
| music? | `string` | — | Background music file, looped under everything at 25% volume. |
| tagline? | `string` | — |  |
| rating? | `number` | — | Average rating out of 5. |