Whole Page

A manifesto of serif belief paragraphs fills the page in columns, one after another.

Installation

$ pnpm dlx shadcn@latest add @remocn/whole-page

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WholePage } from "@/components/remocn/whole-page";
 
const WholePageScene = () => (
  <WholePage title="What we believe" beliefs={["A launch video is part of the launch.", "Every frame you install is a file you can rewrite."]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WholePage"
    component={WholePageScene}
    durationInFrames={390}
    fps={30}
    width={1280}
    height={720}
  />
);

A title opens a page that fills with beliefs paragraph by paragraph, flowing into columns, with the active paragraph highlighted. Pass beliefs and title for your own manifesto. It ships in light and dark through the theme prop.

Props6

Prop	Type	Default
beliefs	string[]DEFAULT_BELIEFS Paragraphs that fill the page in order.
title	string"What we believe" Heading shown above the paragraphs.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

beliefsstring[]
Paragraphs that fill the page in order.
DefaultDEFAULT_BELIEFS
titlestring
Heading shown above the paragraphs.
Default"What we believe"
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"