Bento Build

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	number4 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	number1 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

tilesBentoTile[]
Grid tiles: title, description, span [columns, rows], optional icon and visual
DefaultDEFAULT_TILES
highlightOrdernumber[]
Tile indices spotlighted in order after the grid locks
Default[0, 1, 4]
eyebrowstring
Small label above the heading
Default"Features"
headingstring
Heading above the grid
Default"Everything a launch video needs."
columnsnumber
Grid column count; tall frames use at most two
Default4
theme"light" | "dark"
Light or dark palette
Default"dark"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters