add-sfx git:20260504.6ea1fd4A

Immutable. This exact content is served forever at /api/v1/blob/af0f045ab3247611.

---
name: add-sfx
description: Add a new sound effect to @remotion/sfx
---

## Prerequisites

Sound effects must first be added to the [remotion.media](https://github.com/remotion-dev/remotion.media) repository. 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`:
   ```ts
   {
     fileName: "my-sound.wav",
     attribution:
       "Description by Author -- https://source-url -- License: Creative Commons 0",
   },
   ```
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`).

```ts
export const mySound = 'https://remotion.media/my-sound.wav';
```

### 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
- 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. Update the skills rule file

Add the new URL to the list in `packages/skills/skills/remotion/rules/sfx.md`.

### 6. Build

```bash
cd packages/sfx && bun run make
```

## 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.