soroush.asadi
f83d657844
- .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>
3.6 KiB
3.6 KiB
name, description
| name | description |
|---|---|
| remotion-sound-effects | Which sound effects (SFX) to use for FlatRender video templates and exactly where to place them in the timeline. Use when adding audio punch to a template — whooshes, impacts, sparkles, pops, risers, confetti — and syncing them to keyframes with Remotion's Audio component. |
Sound-effect design for templates
Status: current FlatRender templates have NO audio yet. This skill is the playbook for adding it. SFX dramatically raise perceived quality — a logo "thud" + sparkle makes a reveal feel pro.
How audio works in Remotion
Use <Audio> from remotion, placed in the composition tree, timed to frames:
import { Audio, useVideoConfig } from "remotion";
// play a one-shot SFX starting at frame 55 (the logo-land beat)
<Audio src={staticFile("sfx/impact.mp3")} startFrom={0} volume={0.8}
// mount it only around its moment using a <Sequence from={55}> wrapper
/>
Patterns:
- Wrap one-shots in
<Sequence from={FRAME}>so they trigger at the right beat. volumecan be a function of frame for fades:volume={(f)=>interpolate(f,[0,10],[0,1])}.- Layer SFX over the music bed (see
../remotion-music-picker/SKILL.md); keep SFX ~ -6 dB under dialogue, on top of music. - Put shared SFX in
services/remotion/public/sfx/and load withstaticFile().
SFX → moment mapping (sync to the KEYFRAME, not vaguely)
| Moment in the animation | SFX | Place at |
|---|---|---|
| Element/text flies in | whoosh (short, directional) | 2-3 frames BEFORE it lands |
| Logo / hero lands | impact / thud / boom | the exact land frame (spring settle) |
| Glitter / magic reveal | sparkle / shimmer / chime | over the particle gather (0.3-0.5s) |
| Small element appears | pop / tick / blip | each appearance (stagger to match) |
| Countdown ticking | clock tick per number, ding/airhorn on GO | each number frame |
| Birthday / party | party horn + confetti rustle, soft chime | greeting reveal + confetti burst |
| Sale / promo | cash register "cha-ching" / coin, stamp on the badge | badge pop |
| Shine sweep across logo | soft shimmer swell | sweep start→end |
| Transition between scenes | whoosh + light riser | on the cut |
| Build-up before reveal | riser / uplifter (0.5-1.5s) | leading INTO the hero moment |
Placement principles
- Anticipation: risers and whooshes START before the visual peak and resolve ON it. A whoosh that lands with the logo sells the motion.
- One hero hit: the reveal gets ONE big impact — don't stack 3 booms; it muddies.
- Match the motion curve: fast spring = sharp transient; slow ease = soft swell.
- Stagger to the visuals: if 5 elements pop on different frames, 5 pops on those frames (vary pitch slightly so it's not robotic).
- Less is more: 3-6 well-placed SFX per template beats a wall of sound. Leave silence for contrast.
- Loudness: normalize SFX, peak ~ -3 dB, sit them under the music bed; the final mix shouldn't clip.
Free / royalty-aware SFX sources
Mixkit, Pixabay (sound), Freesound (check each license — CC0 vs attribution), Uppbeat (free tier), and Remotion-safe CC0 packs. ALWAYS record the license per file; prefer CC0/royalty-free with commercial use. Keep an attributions file if any source requires it.
Workflow
- Identify the 3-6 key beats (reveal, pops, transitions, CTA).
- Pick one SFX per beat from the table.
- Place via
<Sequence from={frame}>+<Audio>; tune volume + a short fade. - Render with audio and LISTEN — adjust timing by a few frames so hits land exactly on the visual.
Related: ../remotion-music-picker/SKILL.md, ../remotion-template-composition/SKILL.md.