# Squeeze Out
URL: https://remocn.dev/docs/typography/squeeze-out

Condensed text squeezes out line by line and relaxes into its full width.

- Install: `npx shadcn@latest add @remocn/squeeze-out`
- Vibe: clean
- Natural length: 64f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/squeeze-out
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SqueezeOut } from "@/components/remocn/squeeze-out";

const SqueezeOutScene = () => (
  <SqueezeOut text="Freshly pressed frames." highlight="frames" />
);

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

Each glyph leaves its line as a narrow squeezed shape and relaxes into full width, with lines starting in overlap from top to bottom. The text is balanced across up to five lines automatically. Pass `text`, and `highlight` with words to set in the accent color. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Freshly pressed frames."` | The line to squeeze out; wraps across up to five lines. |
| `highlight` | `string` | `""` | Space-separated words to set in the accent color. |
| `accent` | `string` | — | Color of highlighted words; defaults to the theme ink. |
| `background` | `string` | — | Override the background color; use "transparent" to composite over your own. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |

## Use when
- A headline that should feel pressed out and then settling, like a fresh print.
- A short statement over several lines where you want a steady line-by-line rhythm.
- A tagline with one or two words to call out in the accent color.

## Don't use when
- You want lines sliding up with a mask - use `mask-reveal-up`.
- Each line should slide in as a whole, not squeeze glyph by glyph - use `line-by-line-slide`.
- The text should appear as if typed - use `typewriter`.