About sfx-elements
sfx-elements is a collection of 17 CC0 sound effects for React projects and workflows that use raw audio files. It provides TypeScript modules with a sound hook as well as downloadable MP3s for video, agents, and command-line tools.
Key features
- 0117 CC0 sound effects
- 02TypeScript modules for React
- 03Raw MP3 downloads
- 04Transition, UI, and cinematic bundles
Use cases
- 01Add feedback sounds to a React interface
- 02Place effects at video scene cuts
- 03Use audio in scripts or agent workflows
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/sfx-elementsin Claude Code to confirm it loaded.
Details
From the project READMESFX 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.