Components
Loading preview...
A camera diagonally drifts across an oversized bento grid behind a soft vignette.
@Remocn
npx shadcn@latest add https://21st.dev/r/kapish_dima/infinite-bento-pan"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>
);
}