flatrender/.claude/skills/flat-artist/remotion-music-picker/SKILL.md

name, description

name	description
remotion-music-picker	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.

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

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.