# Stretch In
URL: https://remocn.dev/docs/typography/stretch-in

Letters fly in from off-canvas and smear horizontally on the way — a vertex-lag deformation, not a scale

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

## Installation

```bash
npx shadcn@latest add @remocn/stretch-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StretchIn } from "@/components/remocn/stretch-in";

const StretchInScene = () => <StretchIn text="REMOCN" />;

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

The letters are geometry, not text: glyph contours are parsed out of the font
file (`opentype.js`), so the animation can reach inside the letterforms. Each
vertex starts its travel late in proportion to how far it sits from the
letter's leading edge — the leading edge lands first, the trailing edge catches
up, and the letter smears without its stems changing width. Counters (the holes
in P, O, R) go through the same deformation, so they never detach.

`fontUrl` defaults to Anton served from Google Fonts' static CDN, so it works
out of the box; point it at any `.ttf`/`.otf` URL to change the face. The
render is held until the font file has loaded.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"REMOCN"` | The text to fly in — short display words read best |
| `fontUrl` | `string` | `Anton (gstatic ttf)` | URL of a .ttf/.otf font file the glyph outlines are parsed from |
| `fontSize` | `number` | `510` | Font size in comp pixels |
| `letterSpacing` | `number` | `0` | Extra spacing between letters in comp pixels |
| `fill` | `string` | `"#ffffff"` | Fill of the letterforms |
| `strokeWidth / stroke` | `number / string` | `0 / "#ffffff"` | Set `fill` to "none" and `strokeWidth` to 2 for the wireframe authoring view |
| `width / height` | `number` | `1920 / 1080` | Coordinate space of the composition. The word centers horizontally |
| `baselineY` | `number` | `vertically centered` | Baseline of the word in comp pixels |
| `entryStart` | `number` | `0` | Frame the first letter starts its travel |
| `entryStagger` | `number` | `3` | Frames between consecutive letters' entries |
| `travelFrames` | `number` | `33` | Frames one letter takes from off-canvas to rest |
| `travelDistance` | `number` | `1500` | How far off-canvas right the letters start, in comp pixels |
| `vertexLagFrames` | `number` | `3.5` | Frames the trailing edge lags the leading edge. This is the smear |
| `curveSteps` | `number` | `8` | Line segments each glyph curve is sampled into — every vertex must take part in the deformation |
| `className` | `string` | — | Optional className passed to the wrapper |

Inspired by [Stretched Type In After Effects](https://www.youtube.com/watch?v=H_z6XJ-b9bE) by Ben Marriott.

## Use when
- A heavy display word needs a fast, physical entrance where the letterforms visibly deform — bars stretch long while stems keep their exact width.
- You want per-letter rhythm: each letter enters on its own beat and snaps to rest crisp (tune `entryStagger` and `travelFrames`).
- Any text and any font should work — glyph contours are extracted from a real font file at runtime via `opentype.js`.

## Don't use when
- The type is small or body-size — the smear reads at display sizes; use `per-character-rise` for smaller text.
- You can't ship or reach a font file URL — the deformation needs real glyph outlines; use `short-slide-right` for a plain slide-in.
- The look should be soft or blurred rather than elastic — use `soft-blur-in`.