Wrapped Squash

Each caps line squashes to fill its own colored block, stacking into a full-frame poster

Installation

$ pnpm dlx shadcn@latest add @remocn/wrapped-squash

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WrappedSquash } from "@/components/remocn/wrapped-squash";
 
const WrappedSquashScene = () => (
  <WrappedSquash lines={["WE", "SHIPPED", "IT ALL"]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WrappedSquash"
    component={WrappedSquashScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

Line one grows to fill the frame, then each further line arrives on a 26-frame beat and squeezes the lines above it, and a spring lock settles every block to its final height. Blocks alternate between a window onto a shared gradient and a solid fill. Pass lines (two or three, set in caps); use colors for a flat two-color pair. It ships light and dark through theme, and with two lines the lock lands earlier (frame 67).

Props5

Prop	Type	Default
lines	string[]["YOU", "SHIPPED", "A LOT"] Two or three short lines; set in caps, each fills its own block.
accent	string"#3B5BFD" Accent color used in the dark theme's gradient field.
colors	[string, string]— Flat two-color pair, such as `["#FF4632", "#FFD2F2"]`, replacing the gradient.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier.

linesstring[]
Two or three short lines; set in caps, each fills its own block.
Default["YOU", "SHIPPED", "A LOT"]
accentstring
Accent color used in the dark theme's gradient field.
Default"#3B5BFD"
colors[string, string]
Flat two-color pair, such as `["#FF4632", "#FFD2F2"]`, replacing the gradient.
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1