Soroush Asadi
aea3b4f800
10 skills for building high-quality video templates with Remotion/Three.js: design-styles, character-design, aspect-ratios, template-composition, sound-effects, music-picker, template-catalog, svg-colors, persian-fonts, and flatrender-template-seo (category/tags/SEO/related, code-verified). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
57 lines
3.6 KiB
Markdown
57 lines
3.6 KiB
Markdown
---
|
|
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`); 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`, `remotion-template-composition`.
|