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-inUsage
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.
// 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.
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}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | The text to assemble |
fontSize | number | 72 | Font size in pixels |
stagger | number | 3 | Frames of wipe travel per character; total reveal lasts stagger times the character count |
squeeze | number | 0.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 | number | 400 | CSS font-weight |
className | string | — | Optional className passed to the underlying span |