sfx-elements

star 503

Install CC0 sound effects from the Elements registry. Use when user needs UI sounds (click, pop, notification), transition sounds (whoosh, swoosh), cinematic sounds (boom, riser, glitch), or audio for video production. Triggers on "sound effect", "SFX", "audio", "notification sound", "click sound", "whoosh", "UI sound", "sound for video", "play sound", "useSound".

crafter-station By crafter-station schedule Updated 2/19/2026

name: sfx-elements description: Install CC0 sound effects from the Elements registry. Use when user needs UI sounds (click, pop, notification), transition sounds (whoosh, swoosh), cinematic sounds (boom, riser, glitch), or audio for video production. Triggers on "sound effect", "SFX", "audio", "notification sound", "click sound", "whoosh", "UI sound", "sound for video", "play sound", "useSound".

SFX Elements

17 CC0 sound effects. Dual format: TypeScript modules for React + raw MP3 for video/agents.

Install (React / Web Audio)

npx shadcn@latest add @elements/sfx-{name}

Installs the sound as a TypeScript module with inline base64 audio, plus useSound hook and sound engine.

Install as raw MP3 (Video / Agents / CLI)

No React needed. Download the MP3 directly:

curl -o {name}.mp3 https://tryelements.dev/sfx/{name}.mp3

Works with ffmpeg, video editors, Python scripts, or any tool that plays audio files. All sounds served with audio/mpeg content-type.

Sounds

Transitions (6)

Sound Duration Install
Whoosh 0.57s @elements/sfx-whoosh
Whoosh Alt 1 1.10s @elements/sfx-whoosh-alt1
Whoosh Alt 2 1.56s @elements/sfx-whoosh-alt2
Magic Reveal 2.04s @elements/sfx-magic-reveal
Reverse Whoosh 5.85s @elements/sfx-reverse-whoosh
Swoosh 4.08s @elements/sfx-swoosh

UI (6)

Sound Duration Install
Click 1.03s @elements/sfx-click
Pop 1.02s @elements/sfx-pop
Keyboard 8.05s @elements/sfx-keyboard
Notification 2.12s @elements/sfx-notification
Error 0.53s @elements/sfx-error
Success 2.54s @elements/sfx-success

Cinematic (5)

Sound Duration Install
Riser 4.03s @elements/sfx-riser
Shutter 7.87s @elements/sfx-shutter
Glitch 2.64s @elements/sfx-glitch
Boom 4.30s @elements/sfx-boom
Drone 6.82s @elements/sfx-drone

Bundles

Need Command
All 17 sounds @elements/sfx-all
Transitions @elements/sfx-transitions
UI sounds @elements/sfx-ui
Cinematic @elements/sfx-cinematic

Usage

import { useSound } from "@/hooks/use-sound";
import { whooshSound } from "@/components/sfx/whoosh";

export function TransitionButton() {
  const { play } = useSound(whooshSound, { volume: 0.5 });
  return <button onClick={() => play()}>Transition</button>;
}

Timing Guidelines

Event Sound When
Text appears pop, click exact frame
Scene transition whoosh, swoosh 100ms before cut
Fast cut swoosh 50ms before cut
Dramatic reveal magic-reveal, boom 50ms before
Error state error, glitch at reveal
Success/deploy success at reveal
Build tension drone, riser start of section

Discover All Sounds

curl -s https://tryelements.dev/r/sfx-index.json | jq '.sounds[].name'

Discovery

Browse https://tryelements.dev/docs/sfx

License

All sounds are CC0 (public domain). No attribution required. Free for commercial use.

Install via CLI
npx skills add https://github.com/crafter-station/elements --skill sfx-elements
Repository Details
star Stars 503
call_split Forks 30
navigation Branch main
article Path SKILL.md
More from Creator
crafter-station
crafter-station Explore all skills →