chore(skills+remotion): add flat-artist skill bundle; register 3D templates
- .claude/skills/flat-artist: the bundled FlatRender template-creation suite (orchestrator + 16 sub-skills + design/motion R&D), mirrors the Gitea AISkills repo. - services/remotion Root.tsx/templates.tsx: register the 3D templates + Three3DTest. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -0,0 +1,59 @@
|
||||
---
|
||||
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`.
|
||||
Reference in New Issue
Block a user