# Bento Build
URL: https://remocn.dev/docs/product-scenes/bento-build

A bento grid of feature tiles builds in, then spotlights chosen tiles one at a time.

- Install: `npx shadcn@latest add @remocn/bento-build`
- Vibe: clean
- Natural length: 141f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bento-build
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BentoBuild } from "@/components/remocn/bento-build";

const BentoBuildScene = () => (
  <BentoBuild
    eyebrow="Features"
    heading="Everything a launch video needs."
    highlightOrder={[0, 1, 4]}
  />
);

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

A heading and eyebrow appear over an empty grid, then tiles pop in with a stagger and lock into a bento layout; chosen tiles are lit one after another while the rest dim. Pass `tiles` (title, description, `span` as `[columns, rows]`, optional icon and visual), `highlightOrder` for the spotlight sequence, `heading` and `eyebrow`. Ships dark by default 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 |
|---|---|---|---|
| `tiles` | `BentoTile[]` | `DEFAULT_TILES` | Grid tiles: title, description, span [columns, rows], optional icon and visual |
| `highlightOrder` | `number[]` | `[0, 1, 4]` | Tile indices spotlighted in order after the grid locks |
| `eyebrow` | `string` | `"Features"` | Small label above the heading |
| `heading` | `string` | `"Everything a launch video needs."` | Heading above the grid |
| `columns` | `number` | `4` | Grid column count; tall frames use at most two |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A features overview where many capabilities need to read as one organized product.
- A launch beat that calls out a few headline features in sequence.
- A vertical cut where the grid reflows to at most two columns on tall frames.

## Don't use when
- You only have three short feature words — use `feature-trio`.
- You want pills streaming around a logo — use `feature-chips-flow`.
- You want an existing screen annotated instead of a grid — use `ui-callout`.