# AI Image Grid
URL: https://remocn.dev/docs/product-scenes/ai-image-grid

A prompt generates a grid of images, then one is picked and zoomed with its details

- Install: `npx shadcn@latest add @remocn/ai-image-grid`
- Vibe: tech
- Natural length: 205f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ai-image-grid
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AiImageGrid } from "@/components/remocn/ai-image-grid";

const AiImageGridScene = () => (
  <AiImageGrid
    prompt="a ceramic teapot on a linen cloth, studio light"
    images={["/shots/teapot-1.png", "/shots/teapot-2.png"]}
    layout="3x2"
    pick={2}
  />
);

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

A prompt card types in and the generate button is pressed. The card docks below a grid of tiles that diffuse into finished images one after another, then a cursor picks one tile, the others fall away, and the pick zooms into a detail view with a download button. Pass `prompt`, `model`, and `images` (your own image URLs, since the demo art is procedural) to make it yours; `layout` and `pick` control the grid. It ships light and dark through `theme`.

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 |
|---|---|---|---|
| `prompt` | `string` | `"isometric glass city at sunrise, soft light"` | The text typed into the prompt card. |
| `images` | `string[]` | `[]` | Your own image URLs for the tiles. |
| `model` | `string` | `"remocn Image 2"` | Model name shown in the prompt card and details. |
| `layout` | `"2x2" \| "3x2"` | `"2x2"` | Grid of four or six tiles. |
| `pick` | `number` | `1` | Index of the tile that is chosen and zoomed. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the button and highlights. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark interface. |
| `ground` | `GshPresetId` | — | Gradient shader preset for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A product beat for an image generation tool: type a prompt, watch variations resolve, pick one.
- A launch video showing the generate-then-choose loop of a creative AI app.
- A demo where the viewer should see several results before one hero render is highlighted.

## Don't use when
- You want a generic AI prompt-to-result flow with a button and loading skeleton — use `ai-prompt-flow`.
- The AI output is a working app or site, not images — use `prompt-to-app`.
- You need a chat conversation with an assistant — use `chat-flow`.