They Are You

Short statements about someone rise one by one, then the leading They flips to an accent You in each.

Installation
$ pnpm dlx shadcn@latest add @remocn/they-are-you

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TheyAreYou } from "@/components/remocn/they-are-you";
 
const TheyAreYouScene = () => (
  <TheyAreYou
    facts={[
      "They write React for a living.",
      "They have a launch on Monday.",
      "They have never touched a timeline.",
    ]}
    from="They"
    to="You"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TheyAreYou"
    component={TheyAreYouScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

Each fact rises in with its leading from word (They by default) in medium weight. After a beat the leading words flip one by one to the to word (You) in the accent color. Each fact must begin with the from word to flip; pass facts, from and to. It ships light and dark.

Props7

PropTypeDefault
facts
string[]—

Statements that each begin with the from word.

from
string"They"

Leading word that gets replaced, such as They.

to
string"You"

Replacement word shown in the accent color, such as You.

accent
string—

Color of the replacement word; overrides the theme accent.

background
string—

Background fill; pass "transparent" to drop it.

speed
number1

Playback speed multiplier for the whole timeline.

theme
"dark" | "light""dark"

Light or dark palette.

  • factsstring[]

    Statements that each begin with the from word.

  • fromstring

    Leading word that gets replaced, such as They.

    Default"They"

  • tostring

    Replacement word shown in the accent color, such as You.

    Default"You"

  • accentstring

    Color of the replacement word; overrides the theme accent.

  • backgroundstring

    Background fill; pass "transparent" to drop it.

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Light or dark palette.

    Default"dark"