Initial commit: Mambo DVD screensaver (static site)

README.md

@@ -0,0 +1,67 @@
+# Mambo DVD
+
+Salvapantallas tipo logo de DVD: Mambo rebota en bucle por la pantalla, cambia
+de color y suena en cada rebote. Cuando cae justo en una esquina, esa esquina
+se queda encendida con el color exacto del golpe.
+
+## Cómo abrirlo
+
+Doble clic en `index.html`. No necesita servidor ni instalar nada.
+
+El navegador no deja reproducir audio sin una interacción previa, por eso la
+portada pide un clic en **Iniciar** antes de arrancar.
+
+## Controles
+
+| Tecla | Acción |
+|---|---|
+| `Espacio` | Pausar y reanudar (también funciona haciendo clic) |
+| `S` | Probar el sonido |
+| `E` | Precisión de esquina: Normal · Generosa · Real |
+| `C` | Modo de color: Tinte · Sólido · Original |
+| `F` | Pantalla completa |
+| `+` / `−` | Velocidad, de 0.25× a 4× |
+| `R` | Reiniciar contadores y trayectoria |
+| `H` | Ocultar el HUD |
+
+## Modos de color
+
+- **Tinte** — gira el matiz del peluche conservando la ilustración.
+- **Sólido** — silueta plana de un color, que es lo que hacía el logo original.
+- **Original** — sin recoloreo.
+
+## Precisión de esquina
+
+Una esquina exacta significa rebotar en los dos ejes en el mismo fotograma, y
+eso casi nunca pasa: en pruebas a 1920×1080 con margen fijo de 15 px salieron
+0 esquinas en 60 segundos. Por eso la tolerancia es un porcentaje del lado
+menor de la ventana y no un valor en píxeles.
+
+- **Real** (0.8 %) — purista, pueden pasar muchos minutos.
+- **Normal** (4.5 %) — por defecto, una esquina cada pocos minutos.
+- **Generosa** (11 %) — para verlo seguido.
+
+## Archivos
+
+| Archivo | Qué hace |
+|---|---|
+| `index.html` | Estructura: escenario, sprite, HUD y portada |
+| `styles.css` | Paleta OSD de reproductor de DVD, animaciones de impacto |
+| `app.js` | Física del rebote, detección de esquina, color y audio |
+| `Mambo_png.png` | El sprite |
+| `mambo_audio.ogg` | El sonido del rebote |
+
+## Detalles de implementación
+
+- El movimiento va por **delta de tiempo**, no por fotograma, así que se ve
+  igual a 60 Hz que a 144 Hz. El delta se acota a 50 ms para que volver de una
+  pestaña en segundo plano no provoque un salto.
+- El modo Sólido se pinta en **canvas con `source-in`**, no con `mask-image`.
+  Las máscaras CSS pasan por CORS y en `file://` (origen `null`) el sprite
+  quedaba invisible. El canvas solo compone y nunca lee píxeles, así que el
+  *taint* no molesta.
+- El desbloqueo de audio reproduce en silencio y **deja terminar** el clip. La
+  versión con `pause()` abortaba el golpe real que cayera dentro de esa
+  ventana y lo perdía con un `AbortError`.
+- El color avanza con el **ángulo áureo** (137.508°) para que dos rebotes
+  seguidos nunca den colores parecidos.