Sound effects
All in kit/sfx/ (copied into each project's sfx/). Made in code, no licence issues.
Paper set is generated by tools/make-paper-sfx.ps1 (FFmpeg synthesis; re-run to tweak a sound).
| File | Put it on |
|---|
tick.wav | each list item / check appearing (clean styles) |
counter.wav | while a number rolls (start of the count-up) |
chime.wav | the last card / end card |
pop.wav | a pill, badge, sticker, calendar chip popping |
snap.wav | a screenshot or card snapping into place |
star.wav · switch.wav · fill.wav · success.wav | highlight · before→after toggle · bar fill · goal reached |
paper-flip.wav | page turn: reframe in/out, scene change |
paper-drop.wav | a paper card landing |
tape-rip.wav | tape strip pinning a card (one per card, not per strip) |
paper-rustle.wav | ransom-note letters / a burst of chips |
marker-tick.wav | marker check on a list row |
marker-scribble.wav | several crosses / scribbles in a row (~0.85 s) |
stamp.wav | rubber stamp, "VS" slap, counter card slap |
paper-slide.wav | card sliding in from the side |
thump.wav | punch-in on the key line |
Crisp UI / glass set (tools/make-crisp-sfx.ps1 [-Project projects\<n>]) — use when the user asks for "more crisp"
| File | Put it on |
|---|
crisp-click | card / panel landing |
crisp-pop | pill, chip, badge, play button |
crisp-tick | list row, small reveal, bar start |
glass-tap | liquid-glass tile / app logo appearing |
type-burst | typing (0.6 s) |
count-roll | count-up (1 s) |
whoosh | reframe in/out, big zoom |
hit | punch-in |
alert · switch-on · send · sparkle · ding | limit/error · toggle/switch · send button · stars/highlight · success / end card |
Rules
- Kit default (creator's): no sound on slide-ins/exits, no whooshes, ~20 dB under the voice, few sounds.
- Paper Cut style (user asked for crisp paper sounds): sound every landing / tape / tick / stamp / flip; still no sounds on captions or exits.
- Sync to the frame the visual event lands, not the tween start.
Paper Cut template offsets (from kit/templates/paper-cut-vertical.html)
| Component | Sounds |
|---|
headline(t0) | paper-drop t0+0.35 · tape-rip t0+0.42 |
ransom(t0) | paper-rustle t0 |
checklist(items) | paper-drop items[0].t−0.10 · tape-rip items[0].t−0.05 · marker-tick each item.t+0.08 |
counter(t0) | stamp t0+0.17 (vol 0.25) · counter t0+0.2 · tape-rip t0+0.25 |
versus(t0, right.t) | paper-slide t0 · paper-slide right.t · stamp right.t+0.52 |
calendar(t0, crossAt, glowAt, stamp) | paper-drop t0+0.35 · tape-rip t0+0.42 · marker-scribble crossAt · pop glowAt+0/0.12/0.24 · stamp stamp.t |
reframe(t0, t1) | paper-flip t0 · paper-flip t1 |
punch(t0) | thump t0 |
| last card | chime ~0.5 s after it lands |
How (one list → HTML + fast mix)
- Write
projects/<name>/sfx.json: [[time, "sound-name", volume?], ...] (volume optional; defaults in tools/sfx.mjs).
node tools/sfx.mjs projects/<name> → writes <audio> tags (unique ids, real durations, non-overlapping tracks) into index.html between <!-- sfx:start --> / <!-- sfx:end -->, so every future render includes them.- Already rendered? Don't re-render (renders are slow):
node tools/sfx.mjs projects/<name> --mix renders/with-cards.mp4 renders/with-sfx.mp4 mixes the sounds onto the existing audio with FFmpeg and copies the video stream (~10 s for a 3-min reel). Limiter prevents clipping.
npx hyperframes lint (expect 0 errors). Check levels: ffmpeg -ss <t> -t 1 -i out.mp4 -af volumedetect -f null NUL.- Copy the result to
exports/. Adjust by editing sfx.json and re-running step 3 (seconds).
Never touch the <video> audio. VS Code's built-in player can't play AAC; preview finished videos in VLC / the default player.