Hook Punch

A two-beat hook stops the scroll, then a huge gradient payoff lands, ending on 'This video took 1 day.'

Installation

$ pnpm dlx shadcn@latest add @remocn/hook-punch

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HookPunch } from "@/components/remocn/hook-punch";
 
const HookPunchScene = () => (
  <HookPunch
    stop="Stop"
    scroll="scrolling."
    lead="This video took"
    payoff="1 day."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HookPunch"
    component={HookPunchScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

"Stop" and a serif italic "scrolling." slam in with a camera kick, a whip zoom wipes the first line away, and a lead-in plus a huge payoff slam in with a shake. Pass stop, scroll, lead and payoff to rewrite both beats; 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.

Props9

Prop	Type	Default
stop	string"Stop" First beat, set in the grotesk.
scroll	string"scrolling." Second word of the first beat, in serif italic.
lead	string"This video took" Lead-in of the second beat.
payoff	string"1 day." The payoff, slammed huge.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.
speed	number1 Playback speed multiplier for the whole timeline.
accent	string— Accepted for API consistency; the color comes from the ground.

stopstring
First beat, set in the grotesk.
Default"Stop"
scrollstring
Second word of the first beat, in serif italic.
Default"scrolling."
leadstring
Lead-in of the second beat.
Default"This video took"
payoffstring
The payoff, slammed huge.
Default"1 day."
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
speednumber
Playback speed multiplier for the whole timeline.
Default1
accentstring
Accepted for API consistency; the color comes from the ground.