Squeeze In

Characters appear one by one, then the whole word squeezes as the last one lands

Installation

$ pnpm dlx shadcn@latest add @remocn/squeeze-in

Usage

The word is uncovered by an invisible wipe travelling left to right — as if a background-colored rectangle slides off the text, revealing character after character. Once the wipe clears the last character, every letter gap compresses leftward toward the first character simultaneously — one unified gap, so the word reads as settling tighter against its first letter. Motion profile measured frame-by-frame from the reference footage.

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SqueezeIn } from "@/components/remocn/squeeze-in";
 
const SqueezeInScene = () => <SqueezeIn text="Remocn" />;
 
export const RemotionRoot = () => (
  <Composition
    id="SqueezeIn"
    component={SqueezeInScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.

tsx

import { Composition } from "remotion";
import { SqueezeIn } from "@/components/remocn/squeeze-in";
import { Backdrop } from "@/components/remocn/backdrop";
 
const SqueezeInScene = () => (
  <Backdrop fill={{ type: "color", value: "#09090b" }}>
    <SqueezeIn text="Remocn" color="#fafafa" />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="SqueezeIn"
    component={SqueezeInScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props7

Prop	Type	Default
textrequired	string— The text to assemble
fontSize	number72 Font size in pixels
stagger	number3 Frames of wipe travel per character; total reveal lasts stagger times the character count
squeeze	number0.03 Extra gap between characters in em, collapsed to zero as one when the last character lands
color	string"#171717" Text color (any valid CSS color)
fontWeight	number400 CSS font-weight
className	string— Optional className passed to the underlying span

textrequiredstring
The text to assemble
fontSizenumber
Font size in pixels
Default72
staggernumber
Frames of wipe travel per character; total reveal lasts stagger times the character count
Default3
squeezenumber
Extra gap between characters in em, collapsed to zero as one when the last character lands
Default0.03
colorstring
Text color (any valid CSS color)
Default"#171717"
fontWeightnumber
CSS font-weight
Default400
classNamestring
Optional className passed to the underlying span