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-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.

Props15

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

textstring
The text to fly in — short display words read best
Default"REMOCN"
fontUrlstring
URL of a .ttf/.otf font file the glyph outlines are parsed from
DefaultAnton (gstatic ttf)
fontSizenumber
Font size in comp pixels
Default510
letterSpacingnumber
Extra spacing between letters in comp pixels
Default0
fillstring
Fill of the letterforms
Default"#ffffff"
strokeWidth / strokenumber / string
Set `fill` to "none" and `strokeWidth` to 2 for the wireframe authoring view
Default0 / "#ffffff"
width / heightnumber
Coordinate space of the composition. The word centers horizontally
Default1920 / 1080
baselineYnumber
Baseline of the word in comp pixels
Defaultvertically centered
entryStartnumber
Frame the first letter starts its travel
Default0
entryStaggernumber
Frames between consecutive letters' entries
Default3
travelFramesnumber
Frames one letter takes from off-canvas to rest
Default33
travelDistancenumber
How far off-canvas right the letters start, in comp pixels
Default1500
vertexLagFramesnumber
Frames the trailing edge lags the leading edge. This is the smear
Default3.5
curveStepsnumber
Line segments each glyph curve is sampled into — every vertex must take part in the deformation
Default8
classNamestring
Optional className passed to the wrapper

Inspired by Stretched Type In After Effects by Ben Marriott.