# Extrude Pop
URL: https://remocn.dev/docs/typography/extrude-pop

A flat word pops up out of the plane on a solid colored 3D body, no camera involved

- Install: `npx shadcn@latest add @remocn/extrude-pop`
- Vibe: playful
- Natural length: 48f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/extrude-pop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ExtrudePop } from "@/components/remocn/extrude-pop";

const ExtrudePopScene = () => (
  <ExtrudePop letter="WIN" bodyColor="#e8192b" faceColor="#ffffff" />
);

export const RemotionRoot = () => (
  <Composition
    id="ExtrudePop"
    component={ExtrudePopScene}
    durationInFrames={90}
    fps={30}
    width={1920}
    height={1080}
  />
);
```

The body is the same glyph swept along the extrusion vector — a morphological
dilation drawn as stacked copies, back-to-front, with the white face riding the
near end. Face travel and extrusion depth are keyframed together, which is what
makes the word read as lifting off a plane rather than growing a shadow.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `letter` | `string` | `"WIN"` | The text to extrude — one short word reads best |
| `bodyColor` | `string` | `"#e8192b"` | Color of the extruded body |
| `faceColor` | `string` | `"#ffffff"` | Color of the front face |
| `fontFamily` | `string` | `"'Helvetica Neue', Helvetica, Arial, sans-serif"` | Font family of the glyph |
| `fontWeight` | `number \| string` | `700` | Font weight |
| `fontSize` | `number` | `603` | Font size in comp pixels |
| `maxTextWidth` | `number` | `1660` | Longer text auto-shrinks (font size and extrusion depth together) to fit this width in comp pixels |
| `basePosition` | `[number, number]` | `[959.2, 752.5]` | Baseline anchor of the body layer in comp pixels |
| `minimaxRadius` | `number` | `80` | Dilation radius. The extrusion depth is twice this |
| `extrudeAngleDeg` | `number` | `-58.6` | Direction of the extrusion in degrees |
| `extrudeSteps` | `number` | `200` | Copies making up the body — above the depth in pixels it is seamless |
| `extrudeStartFrame / extrudeEndFrame` | `number` | `0 / 48` | The pop window. The extrusion eases out and holds after the end frame |
| `width / height` | `number` | `1920 / 1080` | Coordinate space of the composition |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [5 Clean Text Animations](https://www.youtube.com/watch?v=Nmi7cE2wT54) by Mapal.

## Use when
- A short punchy word — a score, a verdict, a CTA — should land with physical weight, like a stamp rising off the page.
- You want a faux-3D pop without touching cameras or 3D transforms — it's a 2D extrusion that renders identically everywhere.
- The scene has a flat poster aesthetic where a solid-color body reads as intentional design, not as a shadow.

## Don't use when
- The text is long or small — the extruded body doubles the ink and turns a sentence into mush; keep it to one short word.
- You need real perspective or a moving camera — the extrusion angle is fixed; this sells one static viewpoint.
- The style is minimal or elegant — the effect is loud by design; use `spring-scale-in` for a softer pop.