# Scale Down Fade
URL: https://remocn.dev/docs/typography/scale-down-fade

Subtle premium settle-in with a restrained scale-down fade on exit

- Install: `npx shadcn@latest add @remocn/scale-down-fade`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scale-down-fade
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScaleDownFade } from "@/components/remocn/scale-down-fade";

const ScaleDownFadeScene = () => (
  <ScaleDownFade text="Quietly refined." fontSize={72} />
);

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

The text settles in, holds steady in the middle of the composition, then scales down and fades out near the end—so the duration should leave room for the exit animation.

### 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 { ScaleDownFade } from "@/components/remocn/scale-down-fade";
import { Backdrop } from "@/components/remocn/backdrop";

const ScaleDownFadeScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <ScaleDownFade text="Quietly refined." fontSize={72} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `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 underlying span |

## Use when
- A headline needs a confident, minimal entrance without any kinetic exaggeration.
- The surrounding content is already in motion and you need one element to settle calmly into focus.
- The brand is clean or corporate and bounce or blur would feel off-brand.

## Don't use when
- You want energy or playfulness — the scale-down reads as composed, not exciting; use `spring-scale-in` for an overshoot bounce instead.
- The text should feel like it is being revealed rather than settling in — use `staggered-fade-up` or `soft-blur-in` for a character-by-character or word-by-word reveal.
- You need an exit animation — scale-down-fade is an entrance only; compose with a separate exit primitive inside a `<Sequence>`.