add-sfx

Name: add-sfx
Author: remotion-dev

54kstars3.9kforks

How to install add-sfx?

remotion-dev/remotion/add-sfx

$npx -y skills add remotion-dev/remotion --skill add-sfx

Installs into the current project.

Summary

Add a new sound effect to @remotion/sfx

Files · 1

View on GitHub

SKILL.md

1	## Prerequisites
2
3	Sound effects must first be added to the [remotion.media](./packages/remotion-media) package.
4	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.
5
6	The source of truth is `generate.ts` in that repo. A sound effect must exist there before it can be added to `@remotion/sfx`.
7
8	Sound effects must be:
9
10	- WAV format
11	- CC0 (Creative Commons 0) licensed
12	- Normalized to peak at -3dB
13
14	## Steps
15
16	### 1. Add to `remotion.media` repo (must be done first)
17
18	In the `remotion-dev/remotion.media` repo:
19
20	1. Add the WAV file to the root of the repo
21	2. Add an entry to the `soundEffects` array in `generate.ts`:
22	```ts
23	{
24	fileName: "my-sound.wav",
25	attribution:
26	"Description by Author -- https://source-url -- License: Creative Commons 0",
27	},
28	```
29	3. Run `bun generate.ts` to copy it to `files/` and regenerate `variants.json`
30	4. Deploy
31
32	### 2. Add the export to `packages/sfx/src/index.ts`
33
34	Use camelCase for the variable name. Avoid JavaScript reserved words (e.g. use `uiSwitch` not `switch`).
35
36	```ts
37	export const mySound = 'https://remotion.media/my-sound.wav';
38	```
39
40	### 3. Create a doc page at `packages/docs/docs/sfx/<name>.mdx`
41
42	Follow the pattern of existing pages (e.g. `whip.mdx`). Include:
43
44	- Frontmatter with `image`, `title` (camelCase export name), `crumb: '@remotion/sfx'`
45	- `<AvailableFrom>` tag with the next release version
46	- `<PlayButton>` import and usage
47	- Description
48	- Example code using `@remotion/media`'s `<Audio>` component
49	- Value section with the URL in a fenced code block
50	- Duration section (fetch the file and use `afinfo` on macOS to get duration/format)
51	- Attribution section with source link and license
52	- Convert section with a full-link sentence: `[Open this file on remotion.dev/convert](https://remotion.dev/convert?url=<encoded-sfx-url>)`
53	- See also section linking to related sound effects
54
55	### 4. Register in sidebar and table of contents
56
57	- `packages/docs/sidebars.ts` — add `'sfx/<name>'` to the `@remotion/sfx` category items
58	- `packages/docs/docs/sfx/table-of-contents.tsx` — add a `<TOCItem>` with a `<PlayButton size={32}>`
59
60	### 5. Regenerate SFX waveforms
61
62	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:
63
64	```bash
65	bun packages/docs/generate-sfx-waveforms.ts
66	```
67
68	This uses `ffmpeg` to sample every exported sound effect into around 2000 waveform samples and updates `packages/docs/components/sfx-demos/sfx-waveforms.ts`.
69
70	### 6. Update the skills rule file
71
72	Add the new URL to the list in `packages/skills/skills/remotion-markup/sfx.md`.
73
74	### 7. Build
75
76	```bash
77	cd packages/sfx && bun run make
78	```
79
80	## Naming conventions
81
82	\| File name \| Export name \|
83	\| --------------- \| -------------------------- \|
84	\| `my-sound.wav` \| `mySound` \|
85	\| `switch.wav` \| `uiSwitch` (reserved word) \|
86	\| `page-turn.wav` \| `pageTurn` \|
87
88	## Version
89
90	Use the current version from `packages/core/src/version.ts`.
91	For docs `<AvailableFrom>`, increment the patch version by 1.

People who liked this also viewed

6 picks

Type

paperclip-create-agentCreate new agents in Paperclip with governance-aware hiring. Use when you need to inspect adapter configuration options, compare existing agent configs, draft a new agent prompt/config, and submit a hSkillsJul 2026157k5
subagent-driven-developmentUse when executing implementation plans with independent tasks in the current sessionSkillsJul 2026154k259k
dispatching-parallel-agentsUse when facing 2+ independent tasks that can be worked on without shared state or sequential dependenciesSkillsJul 2026143k259k
browser-act-skill-forgeForges reusable Skill packages (SKILL.md + scripts) from website exploration via browser-act — no re-exploration later. Use when: user wants a reusable Skill for any website, needs to understand a sitSkillsJul 202685k4.6k
wizardGenerate an interactive bash wizard that walks a human through a manual procedure — third-party setup, a one-off migration, an A→B state transition — opening URLs, capturing values, confirming each stSkillsJul 202675k182k
wonda-cliUsing the Wonda CLI to generate images, videos, music, and audio from the terminal — plus LinkedIn, Reddit, and X/Twitter research and automationSkillsJul 202666k137

add-sfx

54kstars3.9kforks

View on GitHub

How to install add-sfx?

remotion-dev/remotion/add-sfx

$npx -y skills add remotion-dev/remotion --skill add-sfx

Installs into the current project.

Summary

Add a new sound effect to @remotion/sfx

Files · 1

View on GitHub

SKILL.md

1	## Prerequisites
2
3	Sound effects must first be added to the [remotion.media](./packages/remotion-media) package.
4	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.
5
6	The source of truth is `generate.ts` in that repo. A sound effect must exist there before it can be added to `@remotion/sfx`.
7
8	Sound effects must be:
9
10	- WAV format
11	- CC0 (Creative Commons 0) licensed
12	- Normalized to peak at -3dB
13
14	## Steps
15
16	### 1. Add to `remotion.media` repo (must be done first)
17
18	In the `remotion-dev/remotion.media` repo:
19
20	1. Add the WAV file to the root of the repo
21	2. Add an entry to the `soundEffects` array in `generate.ts`:
22	```ts
23	{
24	fileName: "my-sound.wav",
25	attribution:
26	"Description by Author -- https://source-url -- License: Creative Commons 0",
27	},
28	```
29	3. Run `bun generate.ts` to copy it to `files/` and regenerate `variants.json`
30	4. Deploy
31
32	### 2. Add the export to `packages/sfx/src/index.ts`
33
34	Use camelCase for the variable name. Avoid JavaScript reserved words (e.g. use `uiSwitch` not `switch`).
35
36	```ts
37	export const mySound = 'https://remotion.media/my-sound.wav';
38	```
39
40	### 3. Create a doc page at `packages/docs/docs/sfx/<name>.mdx`
41
42	Follow the pattern of existing pages (e.g. `whip.mdx`). Include:
43
44	- Frontmatter with `image`, `title` (camelCase export name), `crumb: '@remotion/sfx'`
45	- `<AvailableFrom>` tag with the next release version
46	- `<PlayButton>` import and usage
47	- Description
48	- Example code using `@remotion/media`'s `<Audio>` component
49	- Value section with the URL in a fenced code block
50	- Duration section (fetch the file and use `afinfo` on macOS to get duration/format)
51	- Attribution section with source link and license
52	- Convert section with a full-link sentence: `[Open this file on remotion.dev/convert](https://remotion.dev/convert?url=<encoded-sfx-url>)`
53	- See also section linking to related sound effects
54
55	### 4. Register in sidebar and table of contents
56
57	- `packages/docs/sidebars.ts` — add `'sfx/<name>'` to the `@remotion/sfx` category items
58	- `packages/docs/docs/sfx/table-of-contents.tsx` — add a `<TOCItem>` with a `<PlayButton size={32}>`
59
60	### 5. Regenerate SFX waveforms
61
62	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:
63
64	```bash
65	bun packages/docs/generate-sfx-waveforms.ts
66	```
67
68	This uses `ffmpeg` to sample every exported sound effect into around 2000 waveform samples and updates `packages/docs/components/sfx-demos/sfx-waveforms.ts`.
69
70	### 6. Update the skills rule file
71
72	Add the new URL to the list in `packages/skills/skills/remotion-markup/sfx.md`.
73
74	### 7. Build
75
76	```bash
77	cd packages/sfx && bun run make
78	```
79
80	## Naming conventions
81
82	\| File name \| Export name \|
83	\| --------------- \| -------------------------- \|
84	\| `my-sound.wav` \| `mySound` \|
85	\| `switch.wav` \| `uiSwitch` (reserved word) \|
86	\| `page-turn.wav` \| `pageTurn` \|
87
88	## Version
89
90	Use the current version from `packages/core/src/version.ts`.
91	For docs `<AvailableFrom>`, increment the patch version by 1.

People who liked this also viewed

6 picks

Type