Stretch In
Letters fly in from off-canvas and smear horizontally on the way — a vertex-lag deformation, not a scale
Installation
$ pnpm dlx shadcn@latest add @remocn/stretch-inUsage
// 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 by Ben Marriott.