Crash Zoom

A calm serif tease crash-zooms into a huge '1 DAY.' reveal with speed lines and a tagline

Installation

$ pnpm dlx shadcn@latest add @remocn/crash-zoom

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CrashZoom } from "@/components/remocn/crash-zoom";
 
const CrashZoomScene = () => (
  <CrashZoom tease="Wait for it…" reveal="2 HOURS." tagline="to ship the launch video." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CrashZoom"
    component={CrashZoomScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

A serif italic tease fades in (a trailing "…" types in dot by dot), then crash-zooms through a blur with speed lines into a huge solid reveal that lands with a flash and shake, followed by a tagline. Pass tease, reveal and tagline to make it yours; it ships dark and light via theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props8

Prop	Type	Default
tease	string"Wait for it…" The calm tease in serif italic; a trailing "…" types in dot by dot.
reveal	string"1 DAY." The reveal, slammed huge in solid ink.
tagline	string"to make this video." Line under the reveal. Empty string hides it.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
speed	number1 Playback speed multiplier for the whole timeline.
ground	GshPresetId— gradients.sh preset for the ground. Defaults to ember (dark) or paper mist (light).
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.
accent	string— Accepted for API consistency; the color comes from the ground.

teasestring
The calm tease in serif italic; a trailing "…" types in dot by dot.
Default"Wait for it…"
revealstring
The reveal, slammed huge in solid ink.
Default"1 DAY."
taglinestring
Line under the reveal. Empty string hides it.
Default"to make this video."
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
gradients.sh preset for the ground. Defaults to ember (dark) or paper mist (light).
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
accentstring
Accepted for API consistency; the color comes from the ground.