Read each step, do the action, then hit Got it → to unlock the next one. Checkpoints ask if it worked — be honest.
Build the TextSlide composition
In Cursor Composer, paste this to build your first real video component:
Create remotion/compositions/TextSlide.tsx — the core video composition for the YouTube Empire project.
Specs:
- Dimensions: 1080×1920 (vertical 9:16)
- Duration: 90 frames (3 seconds at 30fps)
- Background: solid black (#0a0a0a)
Layout (centered on canvas):
- Large headline text (bold, white, uppercase) — centered horizontally, positioned 40% from top
- Optional subtext below (smaller, #9ca3af gray)
- A thin amber (#F59E0B) accent line below the headline
Animations:
- Headline: slides up from translateY(60) to translateY(0) using spring({ stiffness: 100, damping: 18 }), starts at frame 0
- Subtext: fades in opacity 0 → 1 using interpolate, frames 20-40
- Accent line: grows from width 0% to 60% using interpolate, frames 10-35
- Exit: everything fades out opacity 1 → 0 using interpolate, frames 75-90
Props:
- headline: string
- subtext?: string
Use inline styles for all animated values (not Tailwind classes — Tailwind can't handle dynamic animation values).
Use Tailwind only for static layout.
Use AbsoluteFill from 'remotion' as the outer container.
Also update remotion/index.tsx to import and register TextSlide instead of the placeholder. Pass example props: headline='Own Your Tools' subtext='No subscriptions. Just code.'