Hook Card
Short-form opener where the hook lands line by line and the promise gets underlined.
SceneScenesAdvanced
hook-card30fps · 960×540
Install
$ npx remotion-ui@latest add hook-cardThe label counts in, then the hook rises line by line out of its own mask at the pace it is spoken, and an underline draws under the words named by emphasis — which may span a line break. Write your own line breaks into headline with \n, or leave it to be balanced automatically.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/hook-card- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: headline, kicker, subtitle, emphasis, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { HookCard } from "@/remotion/scenes/hook-card";
<HookCard
kicker="Creator insight"
headline="Make the first second count"
emphasis="first second"
subtitle="Hook viewers before they scroll"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| headline* | string | - | The hook. Newlines are honoured as written; otherwise it is balanced across lines. |
| kicker | string | - | Small live label that counts in above the hook. |
| subtitle | string | - | Supporting line that settles once the hook has landed. |
| emphasis | string | - | Substring of headline that takes the accent colour and the underline. Matched case-insensitively, and may span a line break. |
| align | "left" | "center" | - | Hook alignment. Default "left". |
| accentColor | string | "#E8B86D" | Label, underline, and bloom colour. |
| backgroundColor | string | - | Overrides the page background. |
| theme | "dark" | "light" | - | Page palette. Default "dark". |
| speed | number | - | Animation speed multiplier for fitting a fixed-length Sequence. Default 1. |