The guide · paste into Claude Code

Make videos from a voiceover.

Drop your voiceover MP3 into Claude Code with this prompt. It clones the motion pack, transcribes your audio, picks templates that match every spoken phrase, renders them with HyperFrames, stitches with Remotion, and ships your final video. Apple Maps, iMessage notifications, Spotify cards, audio waveforms, iOS toggles. Over a hundred templates already in the pack.

The pack: github.com/halicotampa-crypto/motion-pack. 32 HTML templates, a universal renderer, and Whisper-driven transcribe + silence-cut scripts. MIT licensed. The prompt clones this repo first.

Paste into Claude Code

🔒 Drop your email to reveal the prompt

Get the full prompt, free.

Drop your email and the prompt unlocks instantly, plus every other guide and resource in the library. One email a week, unsubscribe anytime.

Task: Build me a motion-graphic video using only free tools — no Premiere, no After Effects, no CapCut.

STACK
- HyperFrames (github.com/heygen-com/hyperframes) — turns HTML into MP4. The "powerhouse" that renders every scene.
- Remotion — Claude Code skill (built-in, no install needed). Stitches scenes together, cuts, trims, lines up with voiceover.
- IBRA Motion Pack (github.com/halicotampa-crypto/motion-pack) — 32 ready-to-render HTML templates + access to 80+ more from HyperFrames' built-in catalog. Clone this first.
- OpenAI Whisper API for word-level transcription.
- ffmpeg for muxing + concat.

SETUP (one-time)
1. git clone https://github.com/halicotampa-crypto/motion-pack
2. cd motion-pack
3. npm install puppeteer dotenv googleapis
4. Make sure ffmpeg is installed: brew install ffmpeg
5. Optional but recommended: npm install -g hyperframes-cli (for pulling extra components from the catalog)

I will provide:
- An MP3 voiceover file (or a video file I shot — extract audio from it)
- A topic / description of the video
- Target platform (IG Reel 1080x1920 / YouTube long-form 1920x1080 / TikTok)

WORKFLOW (run end-to-end, don't ask permission between steps)

Step 1 — If I gave you a video, extract clean WAV audio:
ffmpeg -y -i <input> -vn -ac 1 -ar 16000 audio.wav

Step 2 — Transcribe with OpenAI Whisper. Use response_format=verbose_json and timestamp_granularities[]=word to get word-level timestamps.

Step 3 — Strip dead air with silenceremove (cut silences > 0.6s, threshold -38dB):
ffmpeg -i audio.wav -af "silenceremove=start_periods=1:start_silence=0.3:start_threshold=-38dB:stop_periods=-1:stop_duration=0.6:stop_threshold=-38dB" audio-trim.wav
Re-transcribe the trimmed audio for accurate timing on the cleaned file.

Step 4 — Break the transcript into logical scenes. Each scene = one spoken idea, usually 3-8 seconds. Map every spoken phrase to a visual moment.

Step 5 — For each scene, pick a template:
- First look in motion-pack/templates/ for an IBRA-original that fits (audio waveform, iMessage, Apple Maps, wastebasket trash, Claude bloom, app icon launcher, typewriter terminal, iOS toggle, stat counter, progress bar).
- Then check motion-pack/community-templates/ for student-kit projects (clickup-demo, linear-promo, hyperframes-sizzle, etc.) and helper-kit recipes.
- If nothing fits, install a HyperFrames built-in component on demand:
  npx hyperframes add <component>
  Examples: spotify-now-playing, x-post-card, instagram-follow, ios-26-liquid-glass-home-screen, nyc-paris-flight, world-map, apple-money-count, data-chart, caption-pill-karaoke (TikTok captions), flash-through-white (transitions), vfx-text-cursor, logo-outro.
- If nothing in the catalog fits either, write a fresh HTML/CSS/GSAP scene matching the spoken phrase exactly.

Step 6 — Render each scene to its own MP4 at the right aspect:
node motion-pack/render-scene.js <scene.html> <output.mp4> <duration-seconds>
Match each scene's duration to the spoken phrase duration. Render at 1080x1920 for vertical (Reels/Shorts) or 1920x1080 for landscape (YouTube). 30fps. CRF 17-18, preset slow.

Step 7 — Mux audio onto each scene. CRITICAL: use explicit stream mapping so ffmpeg doesn't grab video from the audio source:
ffmpeg -i <silent-scene.mp4> -i <scene-audio.wav> -map 0:v:0 -map 1:a:0 -c:v copy -c:a aac -b:a 192k -shortest <final-scene.mp4>

Step 8 — Concat all scenes with Remotion (preferred — handles transitions cleanly) OR ffmpeg concat as fallback. If using ffmpeg, normalize every input to the same fps/sar/audio sample rate first, then use concat filter with first_pts=0 on each audio stream to prevent drift.

Step 9 — If I shot a face-on-camera hook, composite the motion graphics OVER my footage instead of replacing it. Render scenes as TRANSPARENT PNGs (Puppeteer omitBackground:true) and use ffmpeg overlay filter. Respect IG safe zones:
- Top 0-220px: reserved for handle/follow → keep graphics out
- Bottom 1500-1920px: reserved for caption/like/comment → keep graphics out
- If my face is in frame, place graphics in lower-half ONLY (typically y > 1100 in 1080x1920). NEVER cross my face.

Step 10 — Output: final.mp4, ready to post. Open it for me when done.

BRAND TOKENS
- ink #0A0808 (background)
- cream #EDD9BC (body text)
- coral #D97757 (accent)
- success green #4CD964
- success blue #4080F0
- topographic line bg pattern (see motion-pack templates for the SVG)
- font: -apple-system / Inter for sans, JetBrains Mono / ui-monospace for code

LOGOS
If a scene needs real brand logos (CapCut, Adobe, Claude, etc.), pull them properly:
- iOS App Store icons: use the iTunes lookup API → https://itunes.apple.com/lookup?id=<APP_ID> and grab artworkUrl512 (replace 512x512bb.jpg with 1024x1024bb.png for higher res)
- Adobe icons: Wikimedia Commons (Adobe_Premiere_Pro_CC_icon.svg, Adobe_After_Effects_CC_icon.svg)
- Convert SVG to PNG with: rsvg-convert -w 1024 -h 1024 input.svg > output.png
Don't draw logos from memory. Always fetch the real ones.

COST DISCIPLINE
Whisper API: ~$0.006/min of audio
No other paid APIs needed
HyperFrames, Remotion, GSAP, all free

PITFALLS LEARNED THE HARD WAY (don't repeat them)
1. ffmpeg overlay video mux without explicit -map 0:v:0 -map 1:a:0 → pulls video from the audio source (wrong stream).
2. silenceremove on intro/outro that has no actual silence → still alters audio timing slightly, breaks lip-sync. Only apply it to body scenes that have dead air.
3. Animating logos with tl.from() when target has opacity:0 in CSS → tween reverts to 0 after completion. Use fromTo() with explicit end state.
4. GSAP timelines with repeating yoyo tweens (repeat: -1) added inline → drifts the timeline playhead. Run those on gsap.to() directly (not on tl) so they don't extend the main timeline.
5. Placing animations in IG safe zones (top 220px or bottom 420px) → gets covered by IG handle/caption/like/comment buttons.

GENERATE BRAND-NEW TEMPLATES ON REQUEST (the part nobody else does)
You are not limited to the 32 templates in the pack or the 100+ in the catalog. When I describe an animation that doesn't exist yet — "make me an animated stock ticker", "a 3D credit card flip", "a Duolingo-style streak counter", anything — BUILD IT from scratch as a new HyperFrames scene. Treat every request as a new template.

How to author a new template:
1. One self-contained HTML file: inline <style> + a single GSAP timeline in <script>. 1080x1920 stage (or 1920x1080 / 1080x1350 to match my platform).
2. Match my brand tokens (ink/cream/coral or whatever I give you). Keep it on-brand, not generic.
3. Animate with GSAP only. Use fromTo() with explicit end states (never from() on opacity:0 elements). Put infinite yoyo/pulse tweens on gsap.to() directly, not on the main timeline, so they don't drift the playhead.
4. Make it loop-safe and render-deterministic: the scene should look right when seeked to any time t, so it renders cleanly frame-by-frame.
5. Render it with the same render-scene.js you use for pack templates. Save the new .html into motion-pack/templates/ so it joins my library permanently — every new one I request grows the pack.
6. Show me a preview frame before rendering the full thing. If I like it, render; if not, iterate on the single HTML file.

Rule of thumb: if I can describe it, you can build it as a template. The pack is a starting point, not a ceiling.

Confirm you've received the voiceover and topic, then start the pipeline at step 1.