Deadpan Box

A flat, deadpan quote in a blue box with a small attribution line

Installation

$ pnpm dlx shadcn@latest add @remocn/deadpan-box

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DeadpanBox } from "@/components/remocn/deadpan-box";
 
const DeadpanBoxScene = () => <DeadpanBox quote="Nobody watches launch videos." attribution="Founder. Nobody watched the launch." brand="remocn" />;
 
export const RemotionRoot = () => (
  <Composition
    id="DeadpanBox"
    component={DeadpanBoxScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A small box showing the brand logo grows to hug a flat quote, which holds for a deadpan beat; then the box floods the whole frame and the attribution line lands the joke before a brand sign-off. Pass quote, attribution and brand ("remocn" renders the real logo, anything else is set as a wordmark).

Props6

Prop	Type	Default
quote	string"Nobody watches launch videos." The setup, without quote marks: curly marks are added and hung for you.
attribution	string"Founder. Nobody watched the launch." The deadpan attribution that lands the joke after a pause.
brand	string"remocn" Brand name; "remocn" renders the real logo, anything else a wordmark.
accent	string"#3B5BFD" Main color of the gradient field inside the box.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.
speed	number1 Playback multiplier for the whole timeline.

quotestring
The setup, without quote marks: curly marks are added and hung for you.
Default"Nobody watches launch videos."
attributionstring
The deadpan attribution that lands the joke after a pause.
Default"Founder. Nobody watched the launch."
brandstring
Brand name; "remocn" renders the real logo, anything else a wordmark.
Default"remocn"
accentstring
Main color of the gradient field inside the box.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"
speednumber
Playback multiplier for the whole timeline.
Default1