# Short Slide Right
URL: https://remocn.dev/docs/typography/short-slide-right

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

- Install: `npx shadcn@latest add @remocn/short-slide-right`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx 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}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `distance` | `number` | `24` | Horizontal slide distance in pixels the whole phrase travels from the left. |
| `staggerDelay` | `number` | `3` | Per-word delay in frames for the opacity reveal cascade. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the phrase container span |

## Use when
- A short headline should enter with horizontal momentum — reads as forward motion or progress.
- You want word-level opacity stagger layered on top of a single group translation, giving depth without complexity.
- The composition requires a fast (60f) entrance that feels purposeful and directional.

## Don't use when
- You are transitioning between two texts — use `shared-axis-z` (depth) or `shared-axis-y` (vertical swap) which handle the outgoing content.
- You want vertical stacking motion — use `short-slide-down` where each word drops onto its own line to build a layout.
- The slide distance needs to be large or cinematic — `short-slide-right` is intentionally compact (default 24px); use a custom composition for a wide pan.