Soroush Asadi
aea3b4f800
10 skills for building high-quality video templates with Remotion/Three.js: design-styles, character-design, aspect-ratios, template-composition, sound-effects, music-picker, template-catalog, svg-colors, persian-fonts, and flatrender-template-seo (category/tags/SEO/related, code-verified). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
3.6 KiB
Markdown
60 lines
3.6 KiB
Markdown
---
|
|
name: remotion-music-picker
|
|
description: How to choose royalty-free background music for a FlatRender template and sync the animation to its beat/vibe. Use when picking a music bed for a template, matching mood and BPM to the visuals, syncing reveals to the beat, or sourcing free/royalty-free tracks.
|
|
---
|
|
|
|
# Music picker for templates
|
|
|
|
> Status: templates currently ship without a music bed. This is the playbook for adding one. The right track + beat-synced motion is what makes a template feel "produced".
|
|
|
|
## Match music to the template's job
|
|
| Template vibe | Genre / mood | Typical BPM |
|
|
|---|---|---|
|
|
| Corporate / SaaS logo | clean inspirational, soft piano + synth pluck | 90-110 |
|
|
| Energetic promo / sale | upbeat pop, four-on-the-floor, claps | 120-130 |
|
|
| Social / Insta / trendy | lo-fi or modern pop, punchy | 100-120 |
|
|
| Epic / product reveal | cinematic build, big drum, riser | 70-90 build → hit |
|
|
| Festive (birthday, Nowruz, party) | happy ukulele/marimba, bells | 110-128 |
|
|
| Emotional (wedding, tribute) | warm piano/strings | 60-80 |
|
|
| Tech / gaming | electronic, arpeggios, bass | 120-140 |
|
|
| Luxury | downtempo, jazzy, smooth | 80-100 |
|
|
| Minimal / explainer | light marimba/plucks, unobtrusive | 95-115 |
|
|
|
|
## Sync the animation to the beat (this is the magic)
|
|
1. Know the track's BPM → frames per beat = `fps * 60 / bpm` (e.g. 30fps, 120bpm → 15 frames/beat).
|
|
2. Land your hero reveals, pops, and cuts ON beats (multiples of frames-per-beat). Stagger small element pops on 1/2 or 1/4 beats.
|
|
3. Put the BIG reveal on a musical downbeat or right after a riser/drop.
|
|
4. For a known track, hardcode beat frames; for generic use, expose `bpm` as a prop and compute beat frames so motion stays in sync if the track changes.
|
|
```tsx
|
|
const FPS = 30, BPM = 120;
|
|
const beat = (FPS * 60) / BPM; // frames per beat
|
|
const onBeat = (n: number) => Math.round(n * beat);
|
|
// reveal hero on beat 4, CTA on beat 8
|
|
```
|
|
|
|
## Remotion wiring
|
|
```tsx
|
|
import { Audio, staticFile, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
|
const { durationInFrames } = useVideoConfig();
|
|
const f = useCurrentFrame();
|
|
<Audio src={staticFile("music/upbeat-120.mp3")}
|
|
volume={(ff)=>interpolate(ff,[0,15,durationInFrames-20,durationInFrames],[0,0.7,0.7,0])} />
|
|
```
|
|
- Fade IN over ~0.5s and OUT over the last ~0.7s — never start/end abruptly.
|
|
- Trim/loop the track to the template length; cut on a bar boundary so the end feels intentional.
|
|
- If there's a voiceover, DUCK the music (~-12 dB) under it.
|
|
- Store beds in `services/remotion/public/music/`, named with BPM (`upbeat-120.mp3`).
|
|
|
|
## Free / royalty-free sources (verify license per track)
|
|
- **Uppbeat** (free tier, gives a clearance ID), **Pixabay Music** (CC0-ish), **Mixkit** (free for commercial), **Bensound** (free w/ attribution or licensed), **Free Music Archive** (per-track CC), **YouTube Audio Library** (downloadable, check terms), **Incompetech / Kevin MacLeod** (CC-BY).
|
|
- ALWAYS check: commercial use allowed? attribution required? Keep a per-file license/attribution record. Prefer CC0 / royalty-free-with-commercial. Avoid anything Content-ID-flagged for a product that exports user videos.
|
|
- For an Iran-facing product, also consider local royalty-free Persian/instrumental sources where licensing is clearer.
|
|
|
|
## Workflow
|
|
1. Pick vibe + BPM from the table for the template's purpose.
|
|
2. Source 2-3 candidate tracks (license-checked), audition against the animation.
|
|
3. Re-time the key reveals to the chosen BPM's beats.
|
|
4. Add `<Audio>` with fades; render and LISTEN; nudge beats until reveals hit on the downbeat.
|
|
|
|
Related: `remotion-sound-effects`, `remotion-template-catalog`.
|