# Short Slide Down
URL: https://remocn.dev/docs/typography/short-slide-down

Words drop in from above and stack into a centered multi-line composition

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

## Installation

```bash
npx shadcn@latest add @remocn/short-slide-down
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShortSlideDown } from "@/components/remocn/short-slide-down";

const ShortSlideDownScene = () => (
  <ShortSlideDown text="Build from above." entryOffset={28} />
);

export const RemotionRoot = () => (
  <Composition
    id="ShortSlideDown"
    component={ShortSlideDownScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Each word drops in from above onto its own line and pushes the existing words down so the growing stack stays vertically centered — the words split onto separate lines, best for short three-word headings.

This is a layout-aware effect — it measures word heights to keep the stack centered, so it works best with short headings.

### 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 { ShortSlideDown } from "@/components/remocn/short-slide-down";
import { Backdrop } from "@/components/remocn/backdrop";

const ShortSlideDownScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <ShortSlideDown text="Build from above." entryOffset={28} />
  </Backdrop>
);

export const RemotionRoot = () => (
  <Composition
    id="ShortSlideDown"
    component={ShortSlideDownScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase to build. Each word becomes its own line; best with short three-word phrases. |
| `entryOffset` | `number` | `28` | How far in pixels each incoming word starts above its line before dropping in. |
| `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 stack container |

## Use when
- A multi-word headline should build its layout visibly — each word stacking to create a composed block.
- The scene is short and you need a fast (60f) entrance that still feels structured.
- You want vertical motion on entrance without a transition between two different texts.

## Don't use when
- You are swapping between two text values — use `shared-axis-y` which handles the outgoing text exit properly.
- The text is a single word or short phrase that doesn't benefit from a stacking effect — use `scale-down-fade` or `soft-blur-in` for a cleaner single-unit entrance.
- You want horizontal entry motion — use `short-slide-right` for a left-to-right glide instead.