Short Slide Right

The whole phrase glides in from the left while words reveal in sequence through opacity

Installation

$ pnpm dlx shadcn@latest add @remocn/short-slide-right

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShortSlideRight } from "@/components/remocn/short-slide-right";
 
const ShortSlideRightScene = () => (
  <ShortSlideRight text="Move with intent." distance={24} staggerDelay={3} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShortSlideRight"
    component={ShortSlideRightScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

The whole phrase shares one compact left-to-right slide while the words themselves reveal only through a staggered opacity cascade — motion stays controlled, the word order reads clearly.

With Backdrop

The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.

Pair with Backdrop to place the text inside a full-frame fill with a rounded, shadowed content frame:

tsx

import { Composition } from "remotion";
import { ShortSlideRight } from "@/components/remocn/short-slide-right";
import { Backdrop } from "@/components/remocn/backdrop";
 
const ShortSlideRightScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <ShortSlideRight text="Move with intent." distance={24} staggerDelay={3} />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShortSlideRight"
    component={ShortSlideRightScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props7

Prop	Type	Default
textrequired	string— The text to reveal
distance	number24 Horizontal slide distance in pixels the whole phrase travels from the left.
staggerDelay	number3 Per-word delay in frames for the opacity reveal cascade.
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
className	string— Optional className passed to the phrase container span

textrequiredstring
The text to reveal
distancenumber
Horizontal slide distance in pixels the whole phrase travels from the left.
Default24
staggerDelaynumber
Per-word delay in frames for the opacity reveal cascade.
Default3
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
classNamestring
Optional className passed to the phrase container span