emocn
GitHub1.7k
Get started

Poster Crop

A poster headline crops in tight, line by line, over a ruled blue ground

Installation
$ pnpm dlx shadcn@latest add @remocn/poster-crop

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PosterCrop } from "@/components/remocn/poster-crop";
 
const PosterCropScene = () => (
  <PosterCrop title={"Ship the film,\nnot the deck."} kicker="Acme 3.0" meta="Oct 24, 2026" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PosterCrop"
    component={PosterCropScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera pulls out from a tight crop of the headline, line by line, while ruled grid lines and corner labels (kicker, date, note) fade in. Pass title (use \n for line breaks), kicker, meta, note and your own logo; it ships light and dark.

Props8

PropTypeDefault
title
string"Launch films,\nas code."

Headline; use \n for line breaks.

kicker
string"remocn 3.0"

Small label above the headline.

meta
string"Oct 24, 2026"

Date or secondary label in the corner.

note
string"Production-ready motion for launch videos. Install a component, drop in your words, render."

Short paragraph beneath the headline.

logo
React.ReactNode—

Custom logo node shown in place of the built-in mark.

accent
string"#3B5BFD"

Accent colour (any CSS colour).

theme
"dark" | "light""dark"

Colour scheme; ships light and dark.

speed
number1

Playback multiplier; above 1 plays faster.

  • titlestring

    Headline; use \n for line breaks.

    Default"Launch films,\nas code."

  • kickerstring

    Small label above the headline.

    Default"remocn 3.0"

  • metastring

    Date or secondary label in the corner.

    Default"Oct 24, 2026"

  • notestring

    Short paragraph beneath the headline.

    Default"Production-ready motion for launch videos. Install a component, drop in your words, render."

  • logoReact.ReactNode

    Custom logo node shown in place of the built-in mark.

  • accentstring

    Accent colour (any CSS colour).

    Default"#3B5BFD"

  • theme"dark" | "light"

    Colour scheme; ships light and dark.

    Default"dark"

  • speednumber

    Playback multiplier; above 1 plays faster.

    Default1