Infinite Bento Pan

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

With Backdrop

Renders its scene transparent — supply the background via Backdrop:

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>

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