---
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/SKILL.md`, `../remotion-template-catalog/SKILL.md`.