Slide Doors

Two panels slide apart like doors to reveal 'Arriving in your repo.' with an accent word

Installation
$ pnpm dlx shadcn@latest add @remocn/slide-doors

Usage

tsx
// 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

PropTypeDefault
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.

    Default28

  • accentstring

    Accent colour (any CSS colour).

  • backgroundstring

    Overrides the theme background colour.

  • speednumber

    Playback multiplier; above 1 plays faster.

    Default1

  • theme"dark" | "light"

    Colour scheme; ships light and dark.

    Default"dark"