Grid Cell

A grid cell lights up in a graph-paper field and a headline is typed into it with a mono label.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GridCell } from "@/components/remocn/grid-cell";
 
const GridCellScene = () => (
  <GridCell title="Introducing remocn 2.0" label="v2.0" accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GridCell"
    component={GridCellScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

A grid fades in from the center, cells merge into one that frames the headline, the label appears in the corner, and the title is typed in with a caret before the grid dims. Pass title and label; it ships light and dark through theme.

Props5

Prop	Type	Default
title	string"Introducing remocn 2.0" Headline typed into the cell
label	string"v2.0" Tiny mono label in the cell corner
accent	string"#3B5BFD" Accent color (any valid CSS color)
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

titlestring
Headline typed into the cell
Default"Introducing remocn 2.0"
labelstring
Tiny mono label in the cell corner
Default"v2.0"
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"