██╗ ██╗██╗███╗ ███╗ ██████╗ ██╗ ██╗███████╗███████╗██████╗
██║ ██╔╝██║████╗ ████║██╔═══██╗██║ ██║╚══███╔╝██╔════╝██╔══██╗
█████╔╝ ██║██╔████╔██║██║ ██║██║ ██║ ███╔╝ █████╗ ██████╔╝
██╔═██╗ ██║██║╚██╔╝██║██║ ██║██║ ██║ ███╔╝ ██╔══╝ ██╔══██╗
██║ ██╗██║██║ ╚═╝ ██║╚██████╔╝███████╗██║███████╗███████╗██║ ██║
╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚═╝╚══════╝╚══════╝╚═╝ ╚═╝
░▒▓█ V E R S I O N 3 . 0 █▓▒░
☆ ﾟ.*･｡ ﾟ "KIMOSABI LAB EDITION" ﾟ ｡ ﾟ.*･ ﾟ☆
【ツ】 "Sacame a estos duros de la cabina xfa te pido" 【ツ】
🎵 KIMOLIZER 3 — readme.html
VISUALIZER · SYNTHWAVE · NO-INSTALL
Visualizador de audio web para músicos, DJs y performers que necesitan luz + ritmo sin complicaciones.
- 🔹 Conecta tu línea de audio (o micrófono) a tu notebook/pc
- 🔹 Abre en cualquier navegador con internet
- 🔹 Obtén visuales al instante
- 🔹 Personaliza logo, posición y transparencia desde switch del header
- 🔹 Blend modes: "no funcionan correctamente en todos los casos, hay un tema con el blend mode y el webgl que arma berretin."
🔧 ARQUITECTURA (facil)
┌─────────────────────────────┐
│ INPUT: Audio (línea/mic) │
├─────────────────────────────┤
│ CORE: Web Audio API + FFT │
├─────────────────────────────┤
│ RENDER: WebGL │
├─────────────────────────────┤
│ OVERLAY: KOP (CSS/JS) │ ← ¡aca va el logo tuyo vieja!
└─────────────────────────────┘
⚠️ Regla de oro: NO tocamos el bundle de React. Todo lo nuestro flota sobre #root como overlay. Si se rompe algo, tiene que estar por afuera del webpack.
🌐 EXTENSION / LAB
🧭 Forma parte de una constelación de proyectos visuales/sonoros algunos mas deformes que otros.
Explorá otras versiones, experimentos y caos artesanal en:
→
www.kimosabi.net.ar/lab
(pronto: este readme.html crecerá con el lore completo del proyecto... paciencia, tejedor borgeano)
🧪 ERRORES QUE YA SUPERAMOS
- ❌ MutationObserver sin flag → bucle infinito → página congelada trotrona mal todo
- ❌ Reemplazar SVG con outerHTML → botón fantasma → confusión cósmica cheeba
- ❌ Selectores genéricos div > h1 → texto amarillo duplicado → WTF con esa fiesta
- ❌ z-index bajo en overlays → desaparecen bajo React → es como armar una pastafrola con el membrillo abajo
- ✅ Solución: flags + disconnect() + selectores específicos + z-index ≥ 10000
- ✅ Regla: modificar SOLO lo necesario (
path.setAttribute, no outerHTML)
- ✅ Debug:
console.log() es tu amigo, el DOM real es tu mapa
🚀 QUICK START
- Subí tus archivos a algún lugar que te deje público el mp3 fundamental (hosting, Vercel, Netlify, etc.)
- Asegurate que
.htaccess y service-worker.js estén activos
- Limpiá caché y recargá 2 veces (SW necesita activarse)
- En Crhome desactiva bloqueadores en brave directamente hay cosas que no cargan es muy estricto, pero anda
- Conectá audio, tocá ⚙️, subí tu logo en el switch, ajustá transparencia
- Disfrutá la magia synthwave ✨
⚠️ NOTAS
- ¿404 en primera carga? Es normal. Recargá. El SW interceptará luego. f5 o sino shift+ctrl+r
- ¿Micrófono no anda? Necesitás HTTPS o localhost + permisos.
- ¿WebGL no disponible? Usá Canvas2D modes o actualizá drivers.
- Logo se ve optimo en svg, o png fondo transparente sobre un lienzo cuadrado bien, o lienzo 16:9 podes ubicarlo en lugares no previstos
👥 CREDITS & SHOUTS
TEAM: Kimosabi (integrador), Gomera Copilot (el otro yo), Jorge Milkdrop (leyenda)
SHOUTS: Winamp '97, Jorge Milkdrop por la magia, James Brown, Kung Lao, Demoscene, El 10 del Milan, Carlos Synthewave, Audacity, Fastrakker II
SPECIAL: Músicos que tocan con una laptop y fe, pibes como el que alguna vez fui, que no tienen un mango para pagar visuales pero estan zarpados de ganas de ir para adelante, DJs que necesitan luz ya, dame luz acá querido, ILUMINAME ACA NESTOR que se me lleno la cabina de vampiros. Proteja su cabina de seres del inframundo con KIMOLIZER, espantaduros con luz.
y vos, que leíste hasta acá. Sos un campeón. Tomá un tecito.