---
name: remotion-sound-effects
description: 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:
```tsx
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.
- `volume` can 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 with `staticFile()`.

## 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
1. Identify the 3-6 key beats (reveal, pops, transitions, CTA).
2. Pick one SFX per beat from the table.
3. Place via `<Sequence from={frame}>` + `<Audio>`; tune volume + a short fade.
4. 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`.