🎬 remotion-ad-video

A Claude Code skill for building product/SaaS ad videos entirely in code — with frame-precise music beat-sync, synthesized SFX, and a visual-QC loop.

סקיל ל-Claude Code לבניית סרטוני פרסומת מסונכרנים לביט — כקוד, בלי עורך וידאו.

---

🇮🇱 מה זה?

שיטת עבודה שלמה — ארוזה כ-Skill ל-Claude Code — לבניית סרטון פרסומת מקצועי לגמרי בקוד (Remotion + React), בלי לפתוח עורך וידאו אף פעם.

הסקיל נבנה וזוקק לאורך 19 גרסאות של פרסומת SaaS אמיתית באורך 77 שניות, כולל:

• 🎵 סנכרון מוזיקה לביט מדויק לפריים (זיהוי BPM, בניית פתיח מה-DNA של הטראק, קוונטיזציה של סצנות)
• 🔊 אפקטי סאונד מסונתזים מ-numpy (הקלדה, פופ, ווש, קליק, משיכת-טוש) — בלי קבצים חיצוניים
• 🎞️ ייצוא מקטעים — כל סצנה גם כקליפ עצמאי לרשתות
• 🔍 QC ויזואלי — הוכחת כל תיקון על פריימים מרונדרים, לא הנחות
• 🌍 תרגום ולוקליזציה — מתג LANG יחיד שהופך את כל הסרטון לשפה אחרת: טקסט, מטבע, סלנג, והיפוך RTL↔LTR (כולל תרגום צילומי המסך בפנים) — בלי לגעת בסנכרון הביט

השיטה אגנוסטית למותג — הצבעים, הפונטים והלוגו הם קלט, לא חלק מהשיטה. עובד לכל מוצר.

🇬🇧 What is this?

A complete methodology — packaged as a Claude Code skill — for producing premium ad videos entirely in code (Remotion + React). No video editor, ever.

Battle-tested across 19 feedback iterations on a real 77-second SaaS ad. The video is a React composition: every frame is deterministic, every client note is a one-line edit plus a re-render, and music sync is exact because timing lives in numbers, not on a timeline.

---

📦 What's inside

skill/
├── SKILL.md                      # the 6-phase workflow + non-negotiables + QC method
├── references/
│   ├── beat-sync.md              # full music-sync recipe (BPM detect → build intro → quantize)
│   ├── remotion-patterns.md      # component patterns: TypedTitle, SplitTitle, KPI counters,
│   │                             #   screen stacks, camera flyovers, cursor+click, SFX arrays
│   └── localization.md           # translate to another language: LANG switch, RTL↔LTR flip,
│                                 #   currency/idiom, translating embedded UI screenshots
└── scripts/
    ├── beat_sync.py              # detect BPM + beat grid, suggest quantized scene durations
    └── build_soundtrack.py       # assemble a beat-synced soundtrack from any groove track

🚀 Install

Copy the skill into your project's (or global) skills directory:

# clone
git clone https://github.com/Alon17-12/remotion-ad-video-skill.git

# install into a project
mkdir -p .claude/skills
cp -r remotion-ad-video-skill/skill .claude/skills/remotion-ad-video

# — or globally for all projects —
cp -r remotion-ad-video-skill/skill ~/.claude/skills/remotion-ad-video

That's it. Next time you ask Claude Code "let's make a product ad video" or "sync this video to the beat", the skill activates automatically.

Requirements

• Claude Code
• Remotion 4 (npx create-video)
• Python 3 with numpy + scipy (for the audio scripts) — no librosa needed
• ffmpeg (the audio scripts point at the imageio-ffmpeg binary; adjust the path in the scripts)

---

🎯 The method in one screen

1. Ideas before pixels — deliver 50 frame ideas grouped by category; the client picks.
2. Scene skeleton — one file per scene, a SCENES array, per-scene segment exports.
3. The feedback loop — timestamped notes → one-line edit → re-render → prove it on frames → open the file.
4. Music (after picture locks) — the client generates a groove (Suno etc.); you build the trailer intro from the track's own drop, then quantize every scene to the beat grid.
5. Lock — brand font on headings, fade aligned to a musical phrase, refresh all segments.
6. Localize (optional) — one LANG switch flips the whole film to another language: native idiom + currency + dates, RTL↔LTR layout (logical CSS, mirrored chat bubbles, flipped chevrons — but charts still rise left→right), and the embedded UI screenshots re-shot in the target language. Durations stay frozen, so the beat-sync is untouched.

The seven non-negotiables (learned the hard way)

1. RTL growth charts still rise left→right (a right-to-left line reads as decline).
2. Client copy is sacred — apply it character-for-character; flag suspected typos, never silently rewrite.
3. Brand names stay in their canonical script.
4. No invented data in KPI/demo scenes for a real brand.
5. Soft, synthesized, few SFX — loud stock risers get rejected.
6. Everything lands on the beat grid once music exists — compute, don't eyeball (a 3-frame miss ≈ 100ms is audible).
7. One visual language — pick 1-2 motifs, model them as shared components, repeat everywhere.

---

💡 Example prompts

Kick off a project:

I want to create a SaaS ad in Remotion for my product: [description]. Vibe: technological, premium, [brand colors]. Open a folder I'll upload materials into (screenshots, logo, mascots) — and give me 50 frame ideas grouped into categories: hook, product-demo, data, features, closer.

Beat-sync an existing render:

Take the track I uploaded. Detect the BPM and the drop, sample one hit from it and build a three-boom intro that lands exactly on the three hook screens, then quantize every scene duration to the beat grid and align the ending to a full musical phrase with a fade-out.

Translate an existing ad to another language:

Translate the whole ad to English. Don't fork the project — route every string through a single LANG switch so I can flip back to the original anytime. Adapt the copy to natural English (idiom, not word-for-word), switch the currency to $, localize dates and demo names, and flip the layout RTL→LTR (sidebars, chat bubbles, chevrons — but keep charts rising left→right). Translate the embedded UI screenshots too, and keep every scene duration identical so the music stays in sync.

Suno prompt (paste into the Style box):

Upbeat tech house / synth-pop instrumental, 120 BPM, modern SaaS commercial energy. Punchy four-on-the-floor kick, tight snappy percussion, deep clean bass groove. Bright plucky synth arpeggios, warm analog chords. Builds steadily, short dreamy breakdown in the last third, final euphoric lift. Polished, premium Apple-commercial feel. Clean mix, steady constant tempo, no vocals, no fade-in.

---

🙏 Credits

Built with Claude Code, Remotion, and Suno.

Created by Alon Gabay · shared freely for the community.

📄 License

MIT — use it, fork it, ship ads with it.