# App Store Listing
URL: https://remocn.dev/docs/product-scenes/app-store-listing

A phone storefront listing taps Get, downloads while screenshots swipe past, then the button becomes Open.

- Install: `npx shadcn@latest add @remocn/app-store-listing`
- Vibe: clean
- Natural length: 172f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/app-store-listing
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AppStoreListing } from "@/components/remocn/app-store-listing";

const AppStoreListingScene = () => (
  <AppStoreListing
    appName="Acme"
    subtitle="Plan your week"
    rating={4.8}
    chartRank={3}
  />
);

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

A phone rises with the app listing: icon, info strip and a screenshot carousel. A tap on Get collapses the button into a progress ring, the screenshots swipe sideways while it downloads, and the button expands into Open. Pass `appName`, `subtitle`, `rating`, `iconSrc` and `screenshots` (each with a `src`) to match your app; `lines` are the four captions beside the phone. 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 |
|---|---|---|---|
| `appName` | `string` | `"remocn"` | App name next to the icon |
| `subtitle` | `string` | `"Launch videos, written in React"` | One-line subtitle under the app name |
| `developer` | `string` | `"remocn Labs"` | Developer or publisher name |
| `iconSrc` | `string` | — | App icon image URL; a built-in mark shows when omitted |
| `rating` | `number` | `4.8` | Average star rating, e.g. 4.8 |
| `ratingCount` | `string` | `"12K"` | Rating count label, e.g. '12K' |
| `ageRating` | `string` | `"4+"` | Age rating label in the info strip |
| `category` | `string` | `"Developer Tools"` | Category label in the info strip |
| `chartRank` | `number` | `3` | Chart position shown in the info strip |
| `award` | `string \| null` | `null` | Optional award label; null hides it |
| `screenshots` | `AppScreenshot[]` | `DEFAULT_SHOTS` | Screenshot cards, each with a title and optional image src |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `lines` | `string[]` | — | Four captions beside the phone, one per beat |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A mobile app launch video that needs the now-on-the-store beat with rating, rank and screenshots.
- A vertical cut where off-device lines narrate each step: discover, install, open.
- A feature tour that starts from discovery and install before the in-app scenes.

## Don't use when
- You want the app's home screen and a placed widget after install — use `home-widget`.
- You need a scrolling in-app screen, not a store page — use `phone-scroll`.
- You need several phones in one frame — use `phone-trio`.