Tutorial Clip
Tutorial composition for demos and explainers.
CompositionCompositionsAdvanced
tutorial-clip30fps · 1080×1920
Install
$ npx remotion-ui@latest add tutorial-clipFull tutorial template: hook, demo frame, spotlight, code reveal, and CTA.
9:16 walkthrough template. `calloutTarget` is read in media pixels and mapped through the same cover crop as the background, so pass `mediaWidth`/`mediaHeight` whenever the capture is not the composition size.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/tutorial-clip- Use when: complete video templates that can be customized as source.
- Customize: mediaSrc, mediaWidth, mediaHeight, title, 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 { TutorialClip } from "@/compositions/tutorial-clip";
<TutorialClip mediaSrc={staticFile("demo.png")} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mediaSrc* | string | - | Screenshot or video source. |
| mediaWidth | number | 1280 | Pixel width `calloutTarget` was measured against. |
| mediaHeight | number | 720 | Pixel height `calloutTarget` was measured against. |
| title | string | - | Opening hook title. |
| subtitle | string | - | Supporting line under the hook. |
| calloutTitle | string | "Spotlight the control" | Headline on the spotlight callout card. |
| calloutSubtitle | string | - | Supporting line on the callout card. |
| calloutTarget | SpotlightTarget | - | Region to spotlight, in media pixels. |
| code | string | - | Code reveal content. |
| ctaTitle | string | - | End card headline. Defaults to `title`. |
| ctaLabel | string | - | End card CTA pill label. |