Infinite Bento Pan

Component 349

About

A camera diagonally drifts across an oversized bento grid behind a soft vignette.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Infinite Bento Pan to your project and fits it to your theme.

Code

How Infinite Bento Pan is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useMemo } from "react";
import { Player } from "@remotion/player";
import { InfiniteBentoPan } from "@/components/ui/infinite-bento-pan";

export default function InfiniteBentoPanDemo() {
  const props = useMemo(() => ({
    speed: 1,
  }), []);

  return (
    <div className="flex w-full min-h-screen items-center justify-center overflow-hidden bg-background p-6 md:p-10">
      <div className="w-full max-w-[1200px]">
        <Player
          component={InfiniteBentoPan as any}
          inputProps={props}
          durationInFrames={240}
          fps={30}
          compositionWidth={1280}
          compositionHeight={720}
          autoPlay
          loop
          controls={false}
          clickToPlay={false}
          style={{
            width: "100%",
            height: "auto",
            aspectRatio: "16 / 9",
            borderRadius: 24,
            overflow: "hidden",
            background: "#050505",
            boxShadow: "0 40px 120px rgba(0,0,0,0.45)",
          }}
        />
      </div>
    </div>
  );
}