add-sfx

Sound effects must first be added to the 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 .

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "add-sfx" with this command: npx skills add remotion-dev/remotion/remotion-dev-remotion-add-sfx

Prerequisites

Sound effects must first be added to the 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:

  • Add the WAV file to the root of the repo

  • Add an entry to the soundEffects array in generate.ts : { fileName: "my-sound.wav", attribution: "Description by Author -- https://source-url -- License: Creative Commons 0", },

  • Run bun generate.ts to copy it to files/ and regenerate variants.json

  • Deploy

  1. 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 ).

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

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

  1. 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}>

  1. Update the skills rule file

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

  1. Build

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.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

remotion-best-practices

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Repository SourceNeeds Review
148.3K2.1Kremotion-dev
Coding

web-renderer-test

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

writing-docs

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

make-pr

No summary provided by upstream source.

Repository SourceNeeds Review