# Shards to Grid
URL: https://remocn.dev/docs/media/shards-to-grid

Tilted image shards drift in 3D, snap into a five-cell media grid, and write in a headline and captions.

- Install: `npx shadcn@latest add @remocn/shards-to-grid`
- Vibe: tech
- Natural length: 115f @ 30fps

## Installation

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

## Usage

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

const ShardsToGridScene = () => (
  <ShardsToGrid
    images={["/shots/one.jpg", "/shots/two.jpg", "/shots/three.jpg"]}
    title="Launch v1"
    headline="Every frame, written in code."
  />
);

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

Shards of your `images` drift through 3D space, converge and snap into a five-cell grid inside a window with a `title` and `status`. The hero cell writes in the `headline` word by word and the other cells show their `labels`. Pass your own `images`; the defaults are `staticFile` images from the Remocn repo. 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 |
|---|---|---|---|
| `images` | `string[]` | — | Image URLs used for the shards and cells. Defaults to repo-only files. |
| `title` | `string` | `"Launch v1"` | Title in the window header. |
| `status` | `string` | `"Assembling"` | Status text next to the title. |
| `headline` | `string` | `"Every frame, written in code."` | Headline written into the hero cell. |
| `labels` | `string[]` | — | Captions for the cells, in order. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `background` | `string` | — | Solid background color for the ground. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the window highlights. |
| `blooms` | `string[]` | — | Colors for the ground shader. Overrides the preset colors. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A media-heavy product beat that goes from a scatter of visuals to an organized grid.
- A feature headline over a collage of screenshots or photos, with short captions on each cell.
- Showing a tool that assembles many assets into one tidy layout.

## Don't use when
- You want a beat-cut montage of full-frame shots — use `grid-montage`.
- A mixed-size grid of feature tiles should build up piece by piece — use `bento-build`.
- A vertical wall of images should pan endlessly — use `infinite-bento-pan`.