Motion Graphics

Text Overlay with Remotion

Add captions plus title and info cards over a 3D science video in Remotion, outline-only and timed to the narration.

Free · No sign-up · Updated 2026-10-27 · By sphereai.work💻Install Claude Code (or Codex, Antigravity) firstThis skill runs best in VS Code with Claude Code, Codex or Antigravity.How to install →

Works with Claude, GPT and GeminiInstall any one of them in VS Code →ClaudeClaude CodeGPTCodexGeminiAntigravity

How to use

1
Download the ZIP
Get the skill file with the button below. No sign-up.
2
Unzip and open
Unzip it into a folder and open that folder in VS Code.
3
Just ask
Tell your AI agent ‘Run the automation pipeline in this folder’.

When to use it

You are adding captions and explanations to a 3D video
Text is hard to read or covers the subject
Long renders stop halfway

Try saying

“이 영상에 자막이랑 설명 카드 얹어줘”Add captions and explainer cards to this video

“숫자 카드를 나레이션에 맞춰 카운트업 해줘”Make the number card count up with the narration

What you get

01Two card types and design rules
02Caption line-break rules

Tips

Cards should add what the voice does not say, not repeat captions.
Keep card content in default props so it can be edited in Studio.

Get it free now

No sign-up, just one ZIP. Edit it freely for personal or commercial use.

Download ZIP (2KB)

Installation

Claude.ai / Desktop app (ZIP upload)

Download the ZIP below.
Upload it under Settings → Capabilities → Skills.
Turn the skill on and start a chat with one of the "Try saying" lines.

Claude Code (copy the folder)

Unzip it. You'll get a folder named after the skill.
Put that folder inside ~/.claude/skills/ (or .claude/skills/ for a single project).
Restart Claude Code.

Menu names may differ slightly depending on your environment. If you can't see the menu, check that skills are enabled on your plan.

Files and preview

Included files

SKILL.md
README.txt

Preview of SKILL.md

---
name: text-overlay-remotion
description: Remotion captions plus title and info cards over a 3D science video, with outline-only text and times taken from the narration. 리모션 자막과 기본 설명 카드.
---

# Text Overlay with Remotion

Claude builds a Remotion composition that plays the finished 3D preview (`preview_full.mp4`) and draws captions and cards on top. Card content lives in the composition's default props so the user can edit text and timing in Remotion Studio without touching code.

## 1. Card types
| Type | Use | Behaviour |
|---|---|---|
| `title` | section title | big centred text + short subtitle |
| `info` | explanation | a line of text + items that appear one by one |

Each card: start frame, end frame, text, colour, optional items.

## 2. Design rules
- **No black boxes** behind text. Readability comes from a thick black outline.
- Pixel fonts with an open licence suit the blocky look; check the licence and credit it.
- Explanations at the top, captions at the bottom. Keep the middle for the 3D subject.
- **Do not repeat the caption** in a card. Cards add what the voice does not say.

## 3. Captions
- Sentence start and end from the sentence table.
- Short lines of similar length, break after a comma when you can.

## 4. Render
- Card times come from the narration, on the same frame timeline as the 3D.
- After rendering, look through the video for overlaps and cut-off text.

## Output
A Remotion composition with editable card props and the final video with text.

---
만든이: sphereai.work (https://sphereai.work)