# Grid to App
URL: https://remocn.dev/docs/product-scenes/grid-to-app

A product grid expands into a store admin app with sidebar and product catalogue

- Install: `npx shadcn@latest add @remocn/grid-to-app`
- Vibe: premium
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/grid-to-app
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GridToApp } from "@/components/remocn/grid-to-app";

const GridToAppScene = () => (
  <GridToApp storeName="Hearth & Co" pageTitle="Catalogue" accent="#ff6a2b" />
);

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

Two rows of product tiles pull back into a store admin window with a sidebar, header and a product table. The product count rolls up, then the Publish button presses and flips to Store live. Pass `storeName`, `pageTitle`, `products` (name and price) and your own `images`, because the default images use `staticFile(...)` paths that only exist in the Remocn repo. The `theme` prop ships dark 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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light admin and background styling. |
| `accent` | `string` | `"#ff6a2b"` | Accent color for the Publish button and highlights. |
| `storeName` | `string` | `"Studio Goods"` | Store name shown at the top of the sidebar. |
| `pageTitle` | `string` | `"Products"` | Heading of the catalogue page. |
| `images` | `string[]` | — | Product image URLs, one per product, in order. |
| `products` | `{ name: string; price: string }[]` | — | Products as name and price pairs, shown in tiles and table. |
| `ground` | `GshPresetId` | — | Preset id for the shader background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader background parameters. |

## Use when
- A commerce-platform launch beat that zooms from a few product tiles into the full admin dashboard.
- Introducing a merchant back office with navigation, a product table and a publish action.
- A camera-pull reveal where a simple grid of images turns out to be a real app.

## Don't use when
- You want a single button to morph into a new product card — use `button-to-card`.
- The story is a payments or stats dashboard rather than a catalogue — use `live-dashboard`.