Make the first second count

Hook viewers before they scroll

00:00:00

00:13:00

Export snippet

import { CreatorReel } from "@/compositions/creator-reel";

<CreatorReel
  hookHeadline="Make the first second count"
  hookSubtitle="Hook viewers before they scroll"
  mediaSrc="data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221280%22%20height%3D%22720%22%20viewBox%3D%220%200%201280%20720%22%3E%0A%20%20%3Crect%20width%3D%221280%22%20height%3D%22720%22%20fill%3D%22%23070812%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0%20520%20C180%20420%20340%20580%20520%20460%20C720%20326%20850%20390%201020%20250%20C1120%20170%201210%20150%201280%20120%20L1280%20720%20L0%20720%20Z%22%20fill%3D%22%23ec4899%22%20opacity%3D%22.30%22%2F%3E%0A%20%20%3Crect%20x%3D%22730%22%20y%3D%22100%22%20width%3D%22350%22%20height%3D%22440%22%20rx%3D%2258%22%20fill%3D%22%23fdf2f8%22%20opacity%3D%22.12%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22905%22%20cy%3D%22292%22%20r%3D%22118%22%20fill%3D%22%23f9a8d4%22%20opacity%3D%22.80%22%2F%3E%0A%20%20%3Crect%20x%3D%22804%22%20y%3D%22452%22%20width%3D%22210%22%20height%3D%2236%22%20rx%3D%2218%22%20fill%3D%22%23fdf2f8%22%20opacity%3D%22.70%22%2F%3E%0A%20%20%3Ctext%20x%3D%22110%22%20y%3D%22210%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2270%22%20font-weight%3D%22800%22%20fill%3D%22%23f8fafc%22%3ECreator%20cut%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%22112%22%20y%3D%22286%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2234%22%20fill%3D%22%23f9a8d4%22%3ETalking%20head%2C%20captions%2C%20and%20proof%20clips%3C%2Ftext%3E%0A%3C%2Fsvg%3E"
  ctaLabel="Browse components"
  comment="Can you break down how you built that transition?"
/>

Combine hook, talking-head, comment, b-roll, captions, and end-card scenes into a complete vertical reel.

9:16 creator template. Advanced tier.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import

@/compositions/creator-reel

Use when: complete video templates that can be customized as source.
Customize: hookHeadline, hookSubtitle, mediaSrc, mediaFit, plus copied source for timing, layout, colors, and typography.
Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example

import { CreatorReel } from "@/compositions/creator-reel";

<CreatorReel
  mediaSrc={staticFile("speaker.mp4")}
  audioSrc={staticFile("voice.wav")}
  captions={captions}
/>

API Reference

Prop	Type	Default	Description
hookHeadline	string	-	Opening hook headline (auto-fit in portrait).
hookSubtitle	string	-	Supporting line under the hook.
mediaSrc	string	-	Speaker image or video source.
mediaFit	"cover" \| "contain"	"cover"	Speaker media object-fit behavior.
audioSrc	string	-	Optional audio source for waveform visuals.
captions	Caption[]	-	Synced captions layered over the talking-head scene.
talkingHeadEyebrow	string	-	Eyebrow label above the talking-head title.
talkingHeadTitle	string	-	Short title in the talking-head layout.
comment	string	-	Comment callout body text.
author	string	-	Comment author display name.
handle	string	-	Comment author handle.
bRollItems	BRollItem[]	-	Media cards for the proof/b-roll section.
bRollTitle	string	-	Headline beside the b-roll stack.
ctaTitle	string	-	End card headline (separate from hook).
ctaLabel	string	-	End card CTA pill label.

hook-card talking-head-layout comment-callout

Creator Reel

Make the first second count

Agent notes

Usage

API Reference

Related

Make the first second count