add-sfx
Add a new sound effect to @remotion/sfx
By remotion-dev · 2,153 installs
npx skills add remotion-dev/remotion --skill add-sfx
Source repository · Upstream listing
Prerequisites
Sound effects must first be added to the [remotion.media](./packages/remotion media) package.
Then it can be deployed using bun run build . The .env may be missing if we are in a worktree, but on the main non worktree branch it should be present.
The source of truth is generate.ts in that repo. A sound effect must exist there before it can be added to @remotion/sfx .
Sound effects must be:
WAV format
CC0 (Creative Commons 0) licensed
Normalized to peak at 3dB
Steps
1. Add to remotion.media repo (must be done first)
In the remotion dev/remotion.media repo:
1. Add the WAV file to the root of the repo
2. Add an entry to the soundEffects array in generate.ts :
3. Run bun generate.ts to copy it to files/ and regenerate variants.json
4. Deploy
2. Add the export to packages/sfx/src/index.ts
Use camelCase for the variable name. Avoid JavaScript reserved words (e.g. use uiSwitch not switch ).
3. Create a doc page at packages/docs/docs/sfx/<name .mdx
Follow the pattern of existing pages (e.g. whip.mdx ). Include:
Frontmatter with image , title (camelCase export name), crumb: '@remotion/sfx'
<AvailableFrom tag with the next release version
<PlayButton import and usage
Description
Example code using @remotion/media 's <Audio component
Value section with the URL in a fenced code block
Duration section (fetch the file and use afinfo on macOS to get duration/format)
Attribution section with source link and license
Convert section with a full link sentence: [Open this file on remotion.dev/convert](https://remotion.dev/convert?url=<encoded sfx url )
See also section linking to related sound effects
4. Register in sidebar and table of contents
packages/docs/sidebars.ts — add 'sfx/<name ' to the @remotion/sfx category items
packages/docs/docs/sfx/table of contents.tsx — add a <TOCItem with a <PlayButton size={32}
5. Regenerate SFX waveforms
After the sound is added to packages/remotion media and exported from packages/sfx/src/index.ts , regenerate the waveform samples used by the docs:
This uses ffmpeg to sample every exported sound effect into around 2000 waveform samples and updates packages/docs/components/sfx demos/sfx waveforms.ts .
6. Update the skills rule file
Add the new URL to the list in packages/skills/skills/remotion markup/sfx.md .
7. Build
Naming conventions
File name Export name
my sound.wav mySound
switch.wav uiSwitch (reserved word)
page turn.wav pageTurn
Version
Use the current version from packages/core/src/version.ts .
For docs <AvailableFrom , increment the patch version by 1.