Social Clip
9:16 Remotion social clip template with hook, captions, and CTA. Install with npx remotion-ui@latest add social-clip.
CompositionCompositionsAdvanced
Install
$ npx remotion-ui@latest add social-clipsocial-clip30fps · 1080×1920
00:00:00
00:07:18
Export snippet
import { SocialClip } from "@/compositions/social-clip";
<SocialClip
hookTitle="Frame registry"
hookSubtitle="Install compositions as source you own"
ctaLabel="Browse components"
logoSrc="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%3E%0A%20%20%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%226%22%20fill%3D%22%232a2928%22%2F%3E%0A%20%20%3Cg%20transform%3D%22translate(-1.5%20-1)%22%3E%0A%20%20%20%20%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%223%22%20stroke%3D%22%23ececec%22%20stroke-width%3D%221.25%22%20fill%3D%22none%22%20opacity%3D%220.35%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%229%22%20y%3D%2210%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%223%22%20fill%3D%22%23050505%22%20stroke%3D%22%23ececec%22%20stroke-width%3D%221.5%22%20opacity%3D%220.95%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M15.5%2014.5v5l4.5-2.5-4.5-2.5z%22%20fill%3D%22%23e8b86d%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"
/>Full 1080×1920 social template combining hook title, audiogram, captions, and end card.
9:16 social template (1080×1920). Advanced tier.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/social-clip- Use when: complete video templates that can be customized as source.
- Customize: audioSrc, captions, hookTitle, hookSubtitle, 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 { SocialClip } from "@/compositions/social-clip";
<SocialClip audioSrc={staticFile("podcast.wav")} captions={captions} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| audioSrc* | string | - | Podcast audio source. |
| captions* | Caption[] | - | Synced caption array. |
| hookTitle | string | - | Opening hook headline. |
| hookSubtitle | string | - | Supporting line under the hook. |
| podcastTitle | string | "Weekly Brief" | Show name shown over the audiogram body. |
| logoSrc | string | - | Optional brand mark shown in hook, body, and end card. |
| ctaTitle | string | "Hear the full episode" | End card headline. |
| ctaLabel | string | - | End card CTA pill label. |
| ctaUrl | string | - | URL shown on the end card. |