Infinite Bento Pan

A hypnotic diagonal camera glide over an oversized grid of bento cards

Installation

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

Usage

tsx

// 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}
  />
);

With Backdrop

Renders its scene transparent — supply the background via Backdrop:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { InfiniteBentoPan } from "@/components/remocn/infinite-bento-pan";
 
<Backdrop fill={{ type: "color", value: "#050505" }}>
  <InfiniteBentoPan panSpeed={1} accentColor="#7c3aed" />
</Backdrop>

Props4

Prop	Type	Default
panSpeed	number1 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	number1 Multiplier applied to the current frame for global timing control
className	string— Optional className for the outer container

panSpeednumber
Multiplier for the diagonal camera distance traveled across the duration. Clamped to a single full traversal at 1.
Default1
accentColorstring
Color used by chart strokes, bar fills, counters, and logo gradients
Default"#7c3aed"
speednumber
Multiplier applied to the current frame for global timing control
Default1
classNamestring
Optional className for the outer container