Modo y energía
Los fondos oscuros con acentos muy saturados suelen pedir modos graves y ataques lentos. Los fondos claros y cálidos tienden a escalas mayores o lidias, con timbres más suaves.
Web → música · guía y demo
¿A qué suena mi web?
No es una metáfora: tu web ya tiene tempo, tonalidad y timbre. Están en su paleta, en su tipografía y en la forma en que se mueve. Pega una URL y escúchala convertida en música generativa. Sin samples, sin registro y sin subir nada.
Tarda unos segundos. La música se sintetiza en tu navegador; no hay audio pregrabado.
- 0 samples
- 100% sintetizado
- Sin registro
La respuesta corta
Suena a cómo está diseñada, no a lo que cuenta.
Cuando alguien pregunta a qué suena una web, suele esperar una canción concreta. En realidad suena a la suma de sus decisiones visuales: el color de fondo, el contraste, la familia tipográfica, el aire entre bloques y la velocidad con la que se mueve. vibedom lee esas señales y las traduce a una semilla sonora —tonalidad, tempo, timbres y efectos— que tu navegador interpreta en directo.
Por eso dos webs con el mismo texto pueden sonar completamente distintas. Una tienda de cerámica con fondo marfil y serif clásica tiende a un lidio lento con pads suaves y reverb amplia. Un portfolio ciberpunk con negro y verde ácido se va a un frigio grave, arpegios metálicos y más eco. No hay una respuesta única: hay una identidad.
Y no, no se sube nada. Solo se leen HTML y CSS públicos para extraer señales; la música se sintetiza en tu navegador con Tone.js. Cero samples, cero audio pregrabado y cero listas de reproducción.
Diseño → sonido
Seis señales visuales, seis decisiones musicales.
No es una correspondencia exacta ni un jingle: es un sistema de reglas. Estas son las principales.
Timbre
Una serif editorial se convierte en pads de seno; una monoespaciada, en ondas cuadradas y arpegios precisos; una sans geométrica, en triángulos limpios y brillantes.
Tempo y densidad
Las animaciones y transiciones rápidas suben el BPM y la densidad del arpegio. Las webs estáticas o pausadas bajan el pulso y dejan más silencio entre notas.
Reverb y aire
Los layouts amplios y luminosos se traducen en colas de reverb largas y notas aisladas. Los layouts densos acortan la reverb y hacen que el ritmo ocupe más espacio.
Arpegio y registro
Una jerarquía fuerte, con titulares muy marcados, produce un arpegio claro y una separación de octavas definida. Una página plana tiende a un drone más continuo y menos protagonismo melódico.
Color armónico
El color de acento afina el brillo del filtro, la cantidad de delay y la profundidad del chorus. Un acento ácido ilumina el espectro; uno terroso lo apaga y lo acerca al centro.
Transparencia
Lo que vibedom lee (y lo que nunca toca).
El análisis trabaja solo con lo que cualquier visitante puede ver. Si una web esconde su contenido tras un login o lo pinta entero con JavaScript, el resultado puede quedarse corto.
Sí lee
- El HTML público de la página que le pasas.
- Hasta cuatro hojas de estilo públicas.
- Colores computados, contraste y fondo dominante.
- Familias tipográficas y jerarquía de encabezados.
- Animaciones, transiciones y señales de movimiento.
No toca
- Áreas privadas, paneles o contenido tras un login.
- Imágenes, vídeos o texto para entrenar modelos.
- Cookies, analytics o datos de tus visitantes.
- Audio, capturas de pantalla o historial de navegación.
- Tu URL o el HTML: no se guardan en disco.
Pruébalo
De la curiosidad al play en menos de un minuto.
-
01
Pega tu URL
Usa el formulario de arriba. En unos segundos verás la atmósfera detectada y podrás escucharla sin instalar nada.
-
02
Ábrela en el playground
Si quieres ver la semilla JSON, mover tempo, brillo, espacialidad y densidad, o mirar el espectro, el laboratorio tiene los controles.
-
03
Compártela o incrústala
Copia un enlace con la semilla dentro o genera un snippet para Webflow, Framer o cualquier HTML. El visitante escucha sin gastar IA.
Casos especiales
¿Y si mi web es minimalista?
Mejor. Las webs con poco ruido visual suelen producir las atmósferas más limpias: menos colores, menos movimiento y más espacio se traducen en drones largos, pocas notas y una sensación muy definida. Una página en blanco y negro con una sola sans puede sonar más interesante que un dashboard lleno de degradados.
Si tu web usa los estilos por defecto del navegador, vibedom también tiene con qué trabajar: el contraste, la jerarquía y la tipografía del sistema siguen siendo señales. Y si el analizador no puede acceder a la página, la demo responde con una semilla local para que nunca te quedes sin escuchar nada.
Preguntas
Lo que suele preguntarse sobre el sonido de una web.
¿A qué suena mi web exactamente?
A una pieza generativa construida con sus propios rasgos visuales. La paleta y el contraste fijan el modo y la energía; la tipografía sugiere los timbres; el movimiento marca el tempo y la densidad. No es una canción fija, sino una identidad sonora que se interpreta en directo.
¿La misma web suena siempre igual?
No. La semilla define la identidad —tonalidad, tempo, timbres y efectos—, pero el motor recorre escalas, acordes y arpegios con reglas armónicas. Cada reproducción cambia en los detalles y mantiene el carácter de la web.
¿Necesito registrarme o pagar?
No. La demo es gratuita y abierta. Solo necesitas una URL pública y un navegador moderno. Los presets funcionan incluso si el analizador no está disponible.
¿Guardáis mi URL o el contenido de mi web?
No. La petición se usa para descargar el HTML y las hojas de estilo públicas, extraer señales y devolver la semilla. No guardamos capturas, HTML ni contenido, y la semilla se cachea en memoria solo una hora.
¿Funciona con WordPress, Webflow, Framer o Shopify?
Sí, siempre que la página sea pública y sirva HTML y CSS accesibles. Algunas webs bloquean a los bots o pintan todo con JavaScript; en esos casos el análisis puede quedarse corto, pero la demo responde igualmente con una semilla local.
¿Puedo incrustar este sonido en mi propia web?
Sí. En el playground generas un snippet con la semilla incrustada. El widget ocupa menos de 5 KB, vive en Shadow DOM y solo carga Tone.js cuando alguien pulsa el botón, así que no hay coste por visitante ni llamadas a la IA.
¿Qué navegadores y dispositivos necesito?
Cualquier navegador moderno con Web Audio API: Chrome, Edge, Firefox o Safari recientes, en escritorio o móvil. El audio siempre empieza tras un gesto (pulsar Reproducir o Escuchar mi web), como exigen las políticas de autoplay.
¿Puedo compartir el sonido de una web?
Sí. El playground incluye un enlace compartible que lleva la semilla completa en el fragmento de la URL. Quien lo abra escucha la misma variación sin gastar IA ni pasar por el backend.
Empieza por tu propia web
La respuesta está a una URL de distancia.
Pega tu dominio y escucha. Si quieres ver la semilla, abre el playground; si quieres incrustar el sonido, el snippet está listo.