Shards to Grid

Tilted image shards drift in 3D, snap into a five-cell media grid, and write in a headline and captions.

Installation

$ pnpm dlx shadcn@latest add @remocn/shards-to-grid

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShardsToGrid } from "@/components/remocn/shards-to-grid";
 
const ShardsToGridScene = () => (
  <ShardsToGrid
    images={["/shots/one.jpg", "/shots/two.jpg", "/shots/three.jpg"]}
    title="Launch v1"
    headline="Every frame, written in code."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShardsToGrid"
    component={ShardsToGridScene}
    durationInFrames={144}
    fps={30}
    width={1280}
    height={720}
  />
);

Shards of your images drift through 3D space, converge and snap into a five-cell grid inside a window with a title and status. The hero cell writes in the headline word by word and the other cells show their labels. Pass your own images; the defaults are staticFile images from the Remocn repo. 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.

Props11

Prop	Type	Default
images	string[]— Image URLs used for the shards and cells. Defaults to repo-only files.
title	string"Launch v1" Title in the window header.
status	string"Assembling" Status text next to the title.
headline	string"Every frame, written in code." Headline written into the hero cell.
labels	string[]— Captions for the cells, in order.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
background	string— Solid background color for the ground.
accent	string"#3B5BFD" Accent color of the window highlights.
blooms	string[]— Colors for the ground shader. Overrides the preset colors.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

imagesstring[]
Image URLs used for the shards and cells. Defaults to repo-only files.
titlestring
Title in the window header.
Default"Launch v1"
statusstring
Status text next to the title.
Default"Assembling"
headlinestring
Headline written into the hero cell.
Default"Every frame, written in code."
labelsstring[]
Captions for the cells, in order.
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
backgroundstring
Solid background color for the ground.
accentstring
Accent color of the window highlights.
Default"#3B5BFD"
bloomsstring[]
Colors for the ground shader. Overrides the preset colors.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.