Grid Snap Poster

A poster layout snaps element by element across a column grid, from number to headline to body to logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/grid-snap-poster

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GridSnapPoster } from "@/components/remocn/grid-snap-poster";
 
const GridSnapPosterScene = () => <GridSnapPoster number="3.0" title={"Launch films,\nset in motion."} body="Install a component, drop in your words, render." />;
 
export const RemotionRoot = () => (
  <Composition
    id="GridSnapPoster"
    component={GridSnapPosterScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A 12-column grid draws in with hairlines and bands, then a giant gradient number, the headline, the body copy and the logo each step across it in discrete snaps with a brief flash on landing; the grid fades and the layout settles. Pass title (use a newline for line breaks), number, body, and name or logo for the mark. It ships light and dark through theme.

Props8

Prop	Type	Default
title	string"Launch films,\nset in motion." Headline; use a newline for a line break.
number	string"3.0" Giant gradient number or version.
body	string"Production-ready motion for launch videos. Install a component, drop in your words, render." Paragraph of body copy.
name	string"remocn" Brand name next to the mark; Remocn renders the real logo.
logo	React.ReactNode— Replaces the default mark.
accent	string"#3B5BFD" Accent color of the number gradient.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

titlestring
Headline; use a newline for a line break.
Default"Launch films,\nset in motion."
numberstring
Giant gradient number or version.
Default"3.0"
bodystring
Paragraph of body copy.
Default"Production-ready motion for launch videos. Install a component, drop in your words, render."
namestring
Brand name next to the mark; Remocn renders the real logo.
Default"remocn"
logoReact.ReactNode
Replaces the default mark.
accentstring
Accent color of the number gradient.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1