Intro
5-second branded intro composition.
Composition
Install
$ npx remotion-ui@latest add introintro30fps · 960×540
00:00:00
00:05:00
Export snippet
import { Intro } from "@/compositions/intro";
<Intro
title="Frame registry"
subtitle="Install compositions as source you own"
/>Registers a <Composition> in your Root.tsx automatically.
The chapter marker and headline stand up first, then the topics rail staggers in
along the bottom to say what the section covers. One <Sequence> wrapped in one
<FadeOut> closes the last second. A second <TitleCard> mounted inside the fade
would restart its own entrance from frame 0 and drop the subtitle.
Full intro sequence with staggered title, subtitle, and progress bar.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/intro- Use when: complete video templates that can be customized as source.
- Customize: title, subtitle, backgroundColor, accentColor, 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 { Intro } from "@/remotion/compositions/intro";
<Intro title="My Product" subtitle="Launch video" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Chapter open" | Main title. |
| subtitle | string | - | Tagline under the title. |
| backgroundColor | string | - | Page background behind the intro. |
| accentColor | string | - | Accent used by the progress bar and title. |