bento-pan

1import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2import { EASING_EXIT } from "@/remotion/lib/timing";
3 
4export type BentoTile = {
5  w: number;
6  h: number;
7  color: string;
8};
9 
10export type BentoPanProps = {
11  backgroundColor?: string;
12  tiles?: BentoTile[];
13};
14 
15const DEFAULT_TILES: BentoTile[] = [
16  { w: 32, h: 28, color: "rgba(232,184,109,0.2)" },
17  { w: 28, h: 36, color: "rgba(45,212,191,0.18)" },
18  { w: 36, h: 30, color: "rgba(244,114,182,0.16)" },
19  { w: 30, h: 34, color: "rgba(245,158,11,0.18)" },
20];
21 
22export const BentoPan: React.FC<BentoPanProps> = ({
23  backgroundColor = "#080810",
24  tiles = DEFAULT_TILES,
25}) => {
26  const frame = useCurrentFrame();
27  const { fps, width, height } = useVideoConfig();
28 
29  // Enter + hold-with-life: the camera keeps drifting across the grid for
30  // the whole hold instead of stopping dead once the initial pan lands.
31  const panProgress = interpolate(frame, [0, 130], [0, 1], {
32    extrapolateLeft: "clamp",
33    extrapolateRight: "clamp",
34  });
35  const panX = panProgress * -width * 0.26;
36  const panY = panProgress * -height * 0.14;
37 
38  // A slow breathing rotation keeps the hold visually alive between the pan
39  // settling and the exit beat kicking in.
40  const breathe = Math.sin((frame / fps) * Math.PI * 0.6) * 0.6;
41 
42  // Exit: the grid settles a touch closer and fades through the vignette
43  // rather than freezing on the final pan position. Opacity fades linearly
44  // so the beat reads clearly through the whole window (an ease-in curve
45  // here would keep it near-invisible until the last few frames), and it
46  // fully resolves a few frames before the composition ends.
47  const exitWindowStart = 130;
48  const exitWindowEnd = 172;
49  const exit = interpolate(frame, [exitWindowStart, exitWindowEnd], [0, 1], {
50    extrapolateLeft: "clamp",
51    extrapolateRight: "clamp",
52  });
53  const exitScale = interpolate(exit, [0, 1], [1, 1.08], {
54    easing: EASING_EXIT,
55  });
56  const exitOpacity = 1 - exit;
57 
58  return (
59    <AbsoluteFill style={{ background: backgroundColor, overflow: "hidden" }}>
60      <div
61        style={{
62          position: "absolute",
63          inset: "-20%",
64          display: "grid",
65          gridTemplateColumns: "repeat(4, 1fr)",
66          gap: 24,
67          opacity: exitOpacity,
68          transform: `translate(${panX}px, ${panY}px) scale(${exitScale}) rotate(${-6 + breathe}deg)`,
69        }}
70      >
71        {Array.from({ length: 16 }, (_, i) => {
72// … truncated