# Hook Punch
URL: https://remocn.dev/docs/social/hook-punch

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

- Install: `npx shadcn@latest add @remocn/hook-punch`
- Vibe: social
- Natural length: 69f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `accent` | `string` | — | Accepted for API consistency; the color comes from the ground. |

## Use when
- The opening second of a vertical launch clip that has to stop the scroll with two slammed words.
- A hook that sets up a time-saving claim, then pays it off with one huge number.
- A punchy first beat before a product walkthrough, where camera shake and a whip zoom fit the tone.

## Don't use when
- The tease should build quietly before one slam, with speed lines — use `crash-zoom`.
- You want a conversational setup and a soft punchline, no shake — use `pov-setup`.
- A single headline should drift in without any impact effects — use `staggered-fade-up`.