Infinite Bento Pan

A composition that builds a super-sized bento grid (well beyond the canvas) and slowly drifts the camera across it on a diagonal trajectory. Each card renders a different miniature — line charts, counters, code fragments, gradients, logo marks — with subtle deterministic micro-animations driven by Math.sin(frame). A radial vignette swallows the edges so cards seem to fade in and out of darkness as the camera moves.

Installation

$ pnpm dlx shadcn@latest add @remocn/infinite-bento-pan

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { InfiniteBentoPan } from "@/components/remocn/infinite-bento-pan";

const InfiniteBentoPanScene = () => (
  <InfiniteBentoPan panSpeed={1} accentColor="#7c3aed" />
);

export const RemotionRoot = () => (
  <Composition
    id="InfiniteBentoPan"
    component={InfiniteBentoPanScene}
    durationInFrames={300}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`panSpeed`	`number`	`1`	Multiplier for the diagonal camera distance traveled across the duration. Clamped to a single full traversal at 1.
`accentColor`	`string`	`"#7c3aed"`	Color used by chart strokes, bar fills, counters, and logo gradients.
`speed`	`number`	`1`	Multiplier applied to the current frame for global timing control.
`className`	`string`	—	Optional className for the outer container.

Notes

Vignette is the trick

The grid itself is an absurdly large absolutely-positioned super-container that you translate(-X, -Y) linearly. The illusion of "infinite" depth comes entirely from the radial vignette painted on top — without it, the edges of the card wall would be visible and the spell would break.