Staggered Bento Grid

A composition that maps an array of items into a CSS grid and wraps each card in a <Sequence> offset by staggerDelay frames. Each card uses spring() for its scale and opacity, so its life cycle starts at frame 0 inside the sequence.

Installation

$ pnpm dlx shadcn@latest add @remocn/staggered-bento-grid

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { StaggeredBentoGrid } from "@/components/remocn/staggered-bento-grid";

const StaggeredBentoGridScene = () => (
  <StaggeredBentoGrid
    staggerDelay={8}
    columns={3}
    items={[
      { title: "Fast", body: "Built on Remotion", span: 2 },
      { title: "Animated", body: "Spring physics" },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="StaggeredBentoGrid"
    component={StaggeredBentoGridScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`items`	`Array<{ title: string; body?: string; span?: 1 \| 2 }>`	`6 sample cards`	Cards to render in the grid.
`staggerDelay`	`number`	`8`	Frames between each card's entrance.
`columns`	`number`	`3`	Number of grid columns.
`background`	`string`	`"#0a0a0a"`	Outer background color.
`cardColor`	`string`	`"#1a1a1a"`	Card background color.
`textColor`	`string`	`"white"`	Card text color.
`className`	`string`	—	Optional className for the outer container.

Notes

Sequence per card

Wrapping each card in <Sequence from={index * staggerDelay}> resets useCurrentFrame() to 0 inside that card, so the spring math stays clean and per-item.