Squeeze Out

Condensed text squeezes out line by line and relaxes into its full width.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SqueezeOut } from "@/components/remocn/squeeze-out";
 
const SqueezeOutScene = () => (
  <SqueezeOut text="Freshly pressed frames." highlight="frames" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SqueezeOut"
    component={SqueezeOutScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Each glyph leaves its line as a narrow squeezed shape and relaxes into full width, with lines starting in overlap from top to bottom. The text is balanced across up to five lines automatically. Pass text, and highlight with words to set in the accent color. It takes a theme prop and ships light and dark.

Props6

Prop	Type	Default
text	string"Freshly pressed frames." The line to squeeze out; wraps across up to five lines.
highlight	string"" Space-separated words to set in the accent color.
accent	string— Color of highlighted words; defaults to the theme ink.
background	string— Override the background color; use "transparent" to composite over your own.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.

textstring
The line to squeeze out; wraps across up to five lines.
Default"Freshly pressed frames."
highlightstring
Space-separated words to set in the accent color.
Default""
accentstring
Color of highlighted words; defaults to the theme ink.
backgroundstring
Override the background color; use "transparent" to composite over your own.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"