# Spring Scale In
URL: https://remocn.dev/docs/typography/spring-scale-in

Words pop in with a soft overshoot scale, like a spring settling into place

- Install: `npx shadcn@latest add @remocn/spring-scale-in`
- Vibe: playful
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spring-scale-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpringScaleIn } from "@/components/remocn/spring-scale-in";

const SpringScaleInScene = () => (
  <SpringScaleIn text="Fast. Crisp. Fluid." staggerDelay={3} scaleFrom={0.7} />
);

export const RemotionRoot = () => (
  <Composition
    id="SpringScaleIn"
    component={SpringScaleInScene}
    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 { SpringScaleIn } from "@/components/remocn/spring-scale-in";
import { Backdrop } from "@/components/remocn/backdrop";

const SpringScaleInScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SpringScaleIn text="Fast. Crisp. Fluid." staggerDelay={3} scaleFrom={0.7} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `staggerDelay` | `number` | `3` | Per-word delay in frames between each word popping in. |
| `scaleFrom` | `number` | `0.7` | Starting scale each word grows from. The easing overshoots slightly past 1 before settling. |
| `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
- The scene calls for energy and bounce — product launches, celebration moments, fun CTAs.
- You want each word to feel like it physically snaps into place, giving kinetic weight to short phrases.
- The audience is consumer-facing and a playful entrance matches the brand tone.

## Don't use when
- The brand is serious, corporate, or premium — spring bounce reads as casual; use `scale-down-fade` or `soft-blur-in` for a composed entrance instead.
- The text is long — many words bouncing in rapid succession becomes visually noisy; use `staggered-fade-up` for a calmer word-by-word reveal.
- You need precise timing for a word to land on a beat — spring physics are frame-accurate but the overshoot makes the visual "land" slightly after the spring resolves.