Grid Montage

One shot splits into a 2x2 grid, then a 3x3 grid cutting on the beat, then merges back.

Installation

$ pnpm dlx shadcn@latest add @remocn/grid-montage

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GridMontage } from "@/components/remocn/grid-montage";
 
const GridMontageScene = () => (
  <GridMontage
    images={["/shots/1.jpg", "/shots/2.jpg", "/shots/3.jpg", "/shots/4.jpg"]}
    beat={14}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GridMontage"
    component={GridMontageScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

A full-frame shot splits into a 2x2 grid of new scenes, grows into a 3x3 grid that swaps tiles on every beat, then merges back into one closing shot. Pass your own scenes (React nodes) or images, and set beat, the number of frames between cuts. With neither, it shows built-in mock tiles. It ships light and dark through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props8

Prop	Type	Default
scenes	React.ReactNode[]— Your own scenes as React nodes. Takes priority over images.
images	string[]— Image URLs used as the tiles.
beat	number14 Frames per beat. The whole timeline scales with it.
accent	string"#3B5BFD" Accent color of the mock tiles.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.

scenesReact.ReactNode[]
Your own scenes as React nodes. Takes priority over images.
imagesstring[]
Image URLs used as the tiles.
beatnumber
Frames per beat. The whole timeline scales with it.
Default14
accentstring
Accent color of the mock tiles.
Default"#3B5BFD"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"