Efectos de sonido
Todos en kit/sfx/ (copiados dentro de sfx/ de cada proyecto). Hechos en código, sin problemas de licencia.
El set de papel es generado por tools/make-paper-sfx.ps1 (síntesis con FFmpeg; vuelve a ejecutar para ajustar un sonido).
| Archivo | Ponlo en |
|---|
tick.wav | cada elemento de la lista/marca de verificación que aparece (estilos limpios) |
counter.wav | mientras un número rueda (inicio del conteo ascendente) |
chime.wav | la última tarjeta / tarjeta final |
pop.wav | una píldora, insignia, pegatina, chip de calendario apareciendo |
snap.wav | una captura de pantalla o tarjeta encajando en su lugar |
star.wav · switch.wav · fill.wav · success.wav | resaltar · alternar antes→después · llenado de barra · objetivo alcanzado |
paper-flip.wav | vuelta de página: cambio de encuadre, cambio de escena |
paper-drop.wav | una tarjeta de papel aterrizando |
tape-rip.wav | tira de cinta sujetando una tarjeta (una por tarjeta, no por tira) |
paper-rustle.wav | letras de nota de rescate / una ráfaga de chips |
marker-tick.wav | marca de rotulador en una fila de lista |
marker-scribble.wav | varias cruces / garabatos en una fila (~0.85 s) |
stamp.wav | sello de goma, bofetada "VS", bofetada de tarjeta de contador |
paper-slide.wav | tarjeta deslizándose desde el costado |
thump.wav | impacto en la línea clave |
Set de interfaz nítido / vítreo (tools/make-crisp-sfx.ps1 [-Project projects\<n>]) — úsalo cuando el usuario pida "más nítido"
| Archivo | Ponlo en |
|---|
crisp-click | tarjeta / panel aterrizando |
crisp-pop | píldora, chip, insignia, botón de reproducción |
crisp-tick | fila de lista, pequeña revelación, inicio de barra |
glass-tap | mosaico de vidrio líquido / logo de aplicación apareciendo |
type-burst | escritura (0.6 s) |
count-roll | conteo ascendente (1 s) |
whoosh | cambio de encuadre, gran zoom |
hit | impacto |
alert · switch-on · send · sparkle · ding | límite/error · alternar/interruptor · botón de envío · estrellas/resaltar · éxito / tarjeta final |
Reglas
- Kit predeterminado (del creador): sin sonido en deslizamientos de entrada/salida, sin whooshes, ~20 dB por debajo de la voz, pocos sonidos.
- Estilo Paper Cut (el usuario pidió sonidos de papel nítidos): sonido en cada aterrizaje / cinta / tick / sello / vuelta; aún sin sonidos en leyendas o salidas.
- Sincroniza con el fotograma en el que aterriza el evento visual, no con el inicio de la interpolación.
Desplazamientos de la plantilla Paper Cut (de kit/templates/paper-cut-vertical.html)
| Componente | Sonidos |
|---|
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 cada 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 |
| última tarjeta | chime ~0.5 s después de que aterrice |
Cómo (una lista → HTML + mezcla rápida)
- Escribe
projects/<nombre>/sfx.json: [[tiempo, "nombre-del-sonido", volumen?], ...] (volumen opcional; valores predeterminados en tools/sfx.mjs).
node tools/sfx.mjs projects/<nombre> → escribe etiquetas <audio> (id únicos, duraciones reales, pistas que no se superponen) en index.html entre <!-- sfx:start --> / <!-- sfx:end -->, así cada renderizado futuro las incluirá.- ¿Ya está renderizado? No vuelvas a renderizar (los renderizados son lentos):
node tools/sfx.mjs projects/<nombre> --mix renders/with-cards.mp4 renders/with-sfx.mp4 mezcla los sonidos sobre el audio existente con FFmpeg y copia el flujo de video (~10 s para un carrete de 3 min). Un limitador evita el recorte.
npx hyperframes lint (esperar 0 errores). Verifica los niveles: ffmpeg -ss <t> -t 1 -i out.mp4 -af volumedetect -f null NUL.- Copia el resultado a
exports/. Ajusta editando sfx.json y volviendo a ejecutar el paso 3 (segundos).
Nunca toques el audio de <video>. El reproductor integrado de VS Code no puede reproducir AAC; previsualiza los videos terminados en VLC / el reproductor predeterminado.