Files
cycle-atlas/.claude/skills/remotion-video/templates/vertical.md
T
keithranaandClaude Sonnet 5.5 0b42fdeae1 Add remotion-video skill (#1)
* Add remotion-video skill

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yhnsd9RDz7jDSUUX7oEcH

* Add Phase 2 templates to remotion-video skill

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yhnsd9RDz7jDSUUX7oEcH

* Fix captions template background; document browser flag after test render

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yhnsd9RDz7jDSUUX7oEcH

* Add audio/voiceover template (Phase 3), tested with real render

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yhnsd9RDz7jDSUUX7oEcH

* Document font loading and its network requirement; captions-over-video verified

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yhnsd9RDz7jDSUUX7oEcH

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-10-15 10:42:46 +11:00

799 B

Template: Vertical clips (Reels / TikTok / Shorts)

Same code, different size. Register a vertical composition:

<Composition
  id="Vertical"
  component={MyScene}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={30 * 30} // 30 seconds
/>

Render: npx remotion render Vertical out/vertical.mp4

Rules

  • Keep text inside the safe zone: about 150px from the top, 350px from the bottom (apps cover those parts with buttons and captions), and 60px from the sides.
  • Use big text (60px+). Phone screens are small.
  • Keep clips under 60 seconds (Shorts limit); 15-30 seconds does best.
  • Use useVideoConfig() for width/height instead of hard-coding, so the same scene works wide and tall.
  • Put captions in the lower-middle, above the bottom safe zone (see captions.md).