Audio and SFX

Two ways to move with sound

You know the tempo. use-beat is pure math: no file is read, and the result is identical on every render.

const { pulse, beat } = useBeat({ bpm: 120 });

<div style={{ scale: String(1 + pulse * 0.2) }}>{beat}</div>

You do not. The visualisers read the audio itself and follow whatever is there, speech included.

<Waveform src={staticFile("episode.mp3")} variant="mirror" bars={64} />
<Spectrum src={staticFile("track.mp3")} />
<RadialVisualizer src={staticFile("track.mp3")} />
<SpeakerCard src={staticFile("episode.mp3")} name="Ada Lovelace" />
<AudioReactive src={staticFile("track.mp3")} effect="both">…</AudioReactive>

They load only the audio around the current frame, so an hour-long podcast is as fast as a jingle. While it loads, each one renders its resting state instead of jumping.

Sound effects

Thirty CC0 sounds, all generated by reelcn, so there is nothing to attribute:

npx shadcn@latest add https://www.reelcn.dev/r/sfx.json

<Sequence from={30}>
  <Sfx name="whoosh" />
</Sequence>

A sound plays at the start of the Sequence it sits in. Nest <Sfx> inside a <Sequence> or <Series> at the frame you want the sound to land.

By default the sounds stream from www.reelcn.dev. For offline renders or CI, pull them into your project:

npx shadcn@latest add https://www.reelcn.dev/r/sfx-pull.json
node scripts/reelcn-sfx-pull.ts

That copies the pack into public/reelcn/sfx/ and flips SFX_LOCAL in your sfx.tsx, so nothing reaches the network at render time.

The full list

bell, bubble, camera-shutter, chime, click, click-soft, coin, ding, drop, error, glitch, impact, keypress, notification, pop, pop-high, rise, riser-short, sparkle, success, swipe, swish, swoosh, tap, thud, tick, transition-hit, typing, whoosh, whoosh-soft.