AI Image Grid

A prompt generates a grid of images, then one is picked and zoomed with its details

Installation

$ pnpm dlx shadcn@latest add @remocn/ai-image-grid

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AiImageGrid } from "@/components/remocn/ai-image-grid";
 
const AiImageGridScene = () => (
  <AiImageGrid
    prompt="a ceramic teapot on a linen cloth, studio light"
    images={["/shots/teapot-1.png", "/shots/teapot-2.png"]}
    layout="3x2"
    pick={2}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AiImageGrid"
    component={AiImageGridScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

A prompt card types in and the generate button is pressed. The card docks below a grid of tiles that diffuse into finished images one after another, then a cursor picks one tile, the others fall away, and the pick zooms into a detail view with a download button. Pass prompt, model, and images (your own image URLs, since the demo art is procedural) to make it yours; layout and pick control the grid. 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.

Props10

Prop	Type	Default
prompt	string"isometric glass city at sunrise, soft light" The text typed into the prompt card.
images	string[][] Your own image URLs for the tiles.
model	string"remocn Image 2" Model name shown in the prompt card and details.
layout	"2x2" \| "3x2""2x2" Grid of four or six tiles.
pick	number1 Index of the tile that is chosen and zoomed.
accent	string"#3B5BFD" Accent color for the button and highlights.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"light" \| "dark""dark" Light or dark interface.
ground	GshPresetId— Gradient shader preset for the background.
groundParams	Partial<GradientParams>— Overrides for the shader preset parameters.

promptstring
The text typed into the prompt card.
Default"isometric glass city at sunrise, soft light"
imagesstring[]
Your own image URLs for the tiles.
Default[]
modelstring
Model name shown in the prompt card and details.
Default"remocn Image 2"
layout"2x2" | "3x2"
Grid of four or six tiles.
Default"2x2"
picknumber
Index of the tile that is chosen and zoomed.
Default1
accentstring
Accent color for the button and highlights.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Light or dark interface.
Default"dark"
groundGshPresetId
Gradient shader preset for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.