Bento Pan
A camera pan across a bento grid of metric cards.
CompositionAdvanced
bento-pan30fps · 960×540
Install
$ npx remotion-ui@latest add bento-panA 3x3 bento of metric cards under a slow camera move: each card springs in on a stagger, the grid drifts across the frame for the whole hold, and the beat closes by settling in and dimming rather than cutting to black.
Pass tiles to change the grid. Each tile carries a label, the value that has
to read at small sizes, an optional note, and an optional trend of bar heights
between 0 and 1. Nine tiles is the sweet spot, more than that and the figures
stop being legible.
1920×1080 diagonal bento grid pan with vignette.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/bento-pan- Use when: complete video templates that can be customized as source.
- Customize: backgroundColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { BentoPan } from "@/compositions/bento-pan";
<BentoPan />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#080810" | Stage background. |