Mode and energy
Dark backgrounds with highly saturated accents tend to ask for lower modes and slower attacks. Light, warm backgrounds lean towards major or Lydian scales with softer timbres.
Web → music · guide and demo
It isn't a metaphor: your site already has a tempo, a key and a timbre. They live in its palette, its typography and the way it moves. Paste a URL and hear it turned into generative music. No samples, no sign-up and no uploads.
It takes a few seconds. The music is synthesised in your browser; there is no pre-recorded audio.
The short answer
When people ask what their website sounds like, they usually expect a specific song. In reality, a site sounds like the sum of its visual decisions: background colour, contrast, type family, the air between blocks and the speed at which things move. vibedom reads those signals and translates them into a sound seed — key, tempo, timbres and effects — that your browser performs live.
That's why two sites with the same copy can sound completely different. A ceramics shop with an ivory background and a classic serif tends towards a slow Lydian pad with wide reverb. A cyberpunk portfolio in black and acid green lands on a low Phrygian mode, metallic arpeggios and more echo. There is no single answer: there is an identity.
And no, nothing is uploaded. Only public HTML and CSS are read to extract signals; the music is synthesised in your browser with Tone.js. Zero samples, zero pre-recorded audio and zero playlists.
Design → sound
It isn't an exact mapping or a jingle: it's a rule system. These are the main ones.
Dark backgrounds with highly saturated accents tend to ask for lower modes and slower attacks. Light, warm backgrounds lean towards major or Lydian scales with softer timbres.
An editorial serif becomes sine pads; a monospaced face becomes square waves and precise arpeggios; a geometric sans becomes clean, bright triangles.
Fast animations and transitions raise the BPM and the arpeggio density. Static or slow-moving sites lower the pulse and leave more silence between notes.
Spacious, luminous layouts translate into long reverb tails and isolated notes. Dense layouts shorten the reverb and let rhythm take up more room.
Strong hierarchy with bold headlines produces a clear arpeggio and a defined octave separation. A flatter page leans towards a more continuous drone with less melodic foreground.
The accent colour tunes filter brightness, delay amount and chorus depth. An acid accent lights up the spectrum; an earthy one dims it and pulls it towards the centre.
Transparency
The analysis works only with what any visitor can see. If a site hides its content behind a login or renders everything with JavaScript, the result may fall short.
Try it
Use the form above. In a few seconds you'll see the detected vibe and hear it without installing anything.
If you want to see the JSON seed, move tempo, brightness, spaciousness and density, or watch the spectrum, the lab has the controls.
Copy a link with the seed inside or generate a snippet for Webflow, Framer or any HTML. Visitors listen without spending AI credits.
Edge cases
Even better. Sites with little visual noise tend to produce the cleanest soundscapes: fewer colours, less motion and more whitespace become long drones, sparse notes and a very defined mood. A black-and-white page with a single sans can sound more interesting than a dashboard full of gradients.
If your site uses the browser's default styles, vibedom still has something to work with: contrast, hierarchy and system typography are signals too. And if the analyser cannot reach the page, the demo answers with a local seed so you never end up with silence.
FAQ
It sounds like a generative piece built from its own visual traits. Palette and contrast set the mode and energy; typography suggests the timbres; motion sets the tempo and density. It is not a fixed song, but a sonic identity performed live.
No. The seed defines the identity — key, tempo, timbres and effects — but the engine walks scales, chords and arpeggios with harmonic rules. Each performance changes in the details while keeping the site's character.
No. The demo is free and open. You only need a public URL and a modern browser. The presets still work when the analyser is unavailable.
No. The request downloads the public HTML and stylesheets, extracts signals and returns the seed. We do not store screenshots, HTML or content, and the seed is cached in memory for one hour only.
Yes, as long as the page is public and serves accessible HTML and CSS. Some sites block bots or render everything with JavaScript; in those cases the analysis may fall short, but the demo still responds with a local seed.
Yes. The playground generates a snippet with the seed embedded. The widget is under 5 KB, lives in Shadow DOM and only loads Tone.js when someone presses the button, so there is no cost per visitor and no AI calls.
Any modern browser with the Web Audio API: recent Chrome, Edge, Firefox or Safari, on desktop or mobile. Audio always starts after a gesture (pressing Play or Hear my site), as autoplay policies require.
Yes. The playground includes a shareable link that carries the full seed in the URL fragment. Anyone who opens it hears the same variation without spending AI credits or touching the backend.
Start with your own site
Paste your domain and listen. If you want to see the seed, open the playground; if you want to embed the sound, the snippet is ready.