# Micro Scale Fade
URL: https://remocn.dev/docs/typography/micro-scale-fade

A calm, tiny scale pop for subtle premium polish on labels and headings

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

## Installation

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

## Usage

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

const MicroScaleFadeScene = () => (
  <MicroScaleFade text="Welcome to motion." scaleFrom={0.96} />
);

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

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

const MicroScaleFadeScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <MicroScaleFade text="Welcome to motion." scaleFrom={0.96} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `scaleFrom` | `number` | `0.96` | Starting scale the text grows from as it fades in. Animates to 1. |
| `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 label, subheading, or supporting text needs an entrance that feels polished without drawing attention to itself.
- The scene already has a hero animation and supporting text should enter quietly underneath it.
- A single block of text needs to appear in a neutral, cross-tone way that works for product, SaaS, or corporate video.

## Don't use when
- The reveal should be the hero moment with visible kinetic weight — use `kinetic-center-build` or `per-character-rise` for entrances that command attention.
- Text should enter per-character or per-word rather than as a unified block — use `bottom-up-letters`, `per-character-rise`, or `per-word-crossfade` for staged reveals.
- The text needs to also exit — `micro-scale-fade` is entrance-only; use `blur-out-up` or `fade-through` when an exit arc is required.