Slide Doors
Two panels slide apart like doors to reveal 'Arriving in your repo.' with an accent word
$ pnpm dlx shadcn@latest add @remocn/slide-doorsUsage
// src/Root.tsx
import { Composition } from "remotion";
import { SlideDoors } from "@/components/remocn/slide-doors";
const SlideDoorsScene = () => (
<SlideDoors lines={["Scenes that move.", "Code you own.", "Arriving in your repo."]} highlight="repo." />
);
export const RemotionRoot = () => (
<Composition
id="SlideDoors"
component={SlideDoorsScene}
durationInFrames={165}
fps={30}
width={1280}
height={720}
/>
);Each line slides apart like a pair of doors and the next line is revealed in the gap, ending with the last line and its highlight word in the accent colour. Pass lines and highlight; it ships light and dark.
Props7
| Prop | Type | Default |
|---|---|---|
| lines | string[]— Lines shown in turn; the last one gets the highlight. | |
| highlight | string"repo." Word or phrase set in the accent colour. | |
| hold | number28 Frames the final line holds. | |
| accent | string— Accent colour (any CSS colour). | |
| background | string— Overrides the theme background colour. | |
| speed | number1 Playback multiplier; above 1 plays faster. | |
| theme | "dark" | "light""dark" Colour scheme; ships light and dark. | |
- linesstring[]
Lines shown in turn; the last one gets the highlight.
- highlightstring
Word or phrase set in the accent colour.
Default
"repo." - holdnumber
Frames the final line holds.
Default
28 - accentstring
Accent colour (any CSS colour).
- backgroundstring
Overrides the theme background colour.
- speednumber
Playback multiplier; above 1 plays faster.
Default
1 - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark"