Out of Context

A bold claim stacks line by line, then a pulled-out phrase finishes it in the accent color.

Installation

$ pnpm dlx shadcn@latest add @remocn/out-of-context

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { OutOfContext } from "@/components/remocn/out-of-context";
 
const OutOfContextScene = () => (
  <OutOfContext claim={"Stop making\nlaunch videos"} rest="by hand." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="OutOfContext"
    component={OutOfContextScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The claim lines fly in, one drops out of alignment and is pulled across the frame, and the closing phrase arrives in the accent color. Pass claim (newlines split lines) and rest for the closing phrase; it ships light and dark through theme.

Props6

Prop	Type	Default
claim	string"Stop making\nlaunch videos" Setup lines; newlines split rows
rest	string"by hand." Closing phrase shown in the accent color
accent	string— Accent color (any valid CSS color)
background	string— Overrides the theme's stage color
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

claimstring
Setup lines; newlines split rows
Default"Stop making\nlaunch videos"
reststring
Closing phrase shown in the accent color
Default"by hand."
accentstring
Accent color (any valid CSS color)
backgroundstring
Overrides the theme's stage color
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"