They Are You
Short statements about someone rise one by one, then the leading They flips to an accent You in each.
$ pnpm dlx shadcn@latest add @remocn/they-are-youUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
1 - theme"dark" | "light"
Light or dark palette.
Default
"dark"