Tune Sprout is a generative music visualizer. It begins as empty space and grows a living world outward from the center in response to sound. Every note adds new forms, so a piece of music paints itself into feathers, blossoms, orbits, lotuses, waves, or peonies depending on the world you choose. The project runs in any modern browser and also ships as a native macOS desktop application.
- Overview
- Showcase
- How It Works
- Audio Reactivity
- Worlds
- Controls
- Download
- Getting Started
- Building the Desktop Application
- Project Structure
- Architecture Notes
- Extending the Project
- Compatibility
- Credits
- License
The application listens to an audio source, analyzes it many times per second, and translates the sound into fine line art that accumulates on screen. The experience is meant to feel calm and painterly rather than clinical. Each of the six worlds carries its own palette, ground color, and vocabulary of shapes, all rendered as thin luminous strokes that unfurl as they grow.
Three input sources are supported. You can load an audio file from disk, listen through the microphone, or run a built in demo that synthesizes an evolving melody so the world grows with no setup.
Each image below captures one world after a short passage of music. From top to bottom the worlds shown are Plumes, Waves, Cosmos, and Blossoms.
The world starts empty. As audio plays, the visualizer spawns line art elements from the center of the canvas. The field keeps expanding while sound continues, and the camera zooms out to follow the growing edge, so the composition never stops evolving. Elements persist as the world grows, gradually building a dense tapestry rather than fading away.
A short warm up accelerates the first few seconds of playback so the full range of forms appears quickly. After roughly six seconds the growth settles into a slow and continuous pace. Switching worlds or returning to the home screen resets the canvas so each session begins fresh from empty space.
The analyzer extracts three signals from the audio stream and maps each to a visual property.
| Musical quality | Signal measured | Visual effect |
|---|---|---|
| Note speed | Rate of spectral flux, used as onset detection | How fast each element unfurls and how quickly the world expands |
| Pitch | Spectral centroid | Color selection within the active palette and overall brightness |
| Volume | Root mean square amplitude | Size of each element and the rate of outward expansion |
Louder and faster passages produce larger, quicker, brighter growth, while quiet passages produce small and slow detail.
Each world is a self contained visual language. The starting flowers, forms, palette, and background all change with the selected world.
| World | Ground and palette | Characteristic forms |
|---|---|---|
| Plumes | Jade and gold | Feathers, soft plumes, broad fronds, sickle leaves, lanceolate leaves |
| Blossoms | Dusty pink on warm mauve | Cosmos daisies, layered dahlias, chrysanthemum pom poms |
| Cosmos | Silver and gold on near black | Orbit rings, spiral galaxies, planet systems, nebula filaments, sparkle stars |
| Lotus | Ink and gold on black | Fine line lotus blossoms in ivory or gold, long gold threads and loops |
| Waves | Silver and gold on indigo | Curling wave swells, whirlpools, gold dotted threads, small eddies |
| Peony | Terracotta and gold on cream | Layered peonies and roses, ray petal chrysanthemums, red stamen centers |
Controls live in a magnifying dock at the bottom of the screen. The dock is a vanilla JavaScript port of a proximity magnification component, so items grow as the pointer approaches them.
| Control | Action |
|---|---|
| Home | Return to the world chooser. Playback stops and the canvas resets |
| Music | Open a file picker and load an audio track from disk |
| Play or Pause | Toggle playback of the loaded track |
| Microphone | Start listening through the microphone. Clicking again turns it off |
| Demo | Toggle a synthesized melody so the world grows with no external audio |
Prebuilt macOS disk images are attached to the latest release.
| File | For |
|---|---|
Tune.Sprout-1.0.0-arm64.dmg |
Apple Silicon (M1 and newer) |
Tune.Sprout-1.0.0.dmg |
Intel |
The build is not signed with an Apple Developer certificate, so macOS quarantines it after download and refuses the first launch. This is expected. To open it, either use System Settings → Privacy & Security, where a button offering to open Tune Sprout anyway appears just after the blocked attempt, or clear the quarantine flag directly.
xattr -dr com.apple.quarantine "/Applications/Tune Sprout.app"
On macOS Sequoia and later, opening the app through the right click menu no longer bypasses this. Use one of the two methods above.
- A modern web browser for the browser version.
- Node.js version 18 or newer if you intend to run or build the desktop application.
The project is a single HTML file with a locally bundled copy of Three.js, so any static file server will serve it.
python3 -m http.server 8778
Then open http://localhost:8778 in your browser. Choose a world, then press Demo or load a track.
npm install
npm start
This launches the Electron shell, which loads the same index.html and grants microphone access.
To produce a distributable macOS build, run the following command.
npm run dist
This builds both architectures and writes them into the dist directory: an application bundle and a disk image installer for Apple Silicon, and the same pair for Intel. The packaged application installs under the name Tune Sprout. Building the architecture the host machine is not takes noticeably longer on a first run, because the matching Electron binary has to be downloaded.
One note applies to the current build configuration. The build is unsigned, because it does not include an Apple Developer certificate. A bundle copied straight out of dist opens without a warning, since it was never quarantined. A bundle installed from a downloaded disk image is quarantined, and clearing that is covered under Download.
Tune-Sprout/
index.html The complete visualizer: scene, audio analysis, all worlds, and the dock
main.js Electron entry point that creates the window and allows microphone access
vendor/
three.module.js A pinned local copy of Three.js so the application works offline
assets/
icon.icns, icon.png The application icon used by electron builder
docs/screenshots/ The showcase images embedded in this README
package.json Scripts, metadata, and electron builder configuration
package-lock.json Locked dependency versions
LICENSE MIT license text
README.md This document
The visualizer is intentionally contained in a single index.html file for portability. The following notes describe the main design choices.
- Rendering uses Three.js with an orthographic camera facing a flat plane, which makes the output read as elegant two dimensional line art while still benefiting from GPU accelerated drawing.
- Every element is a set of colored line segments. Colors are stored per vertex, so a single flower can carry petals in one hue and a contrasting center in another. Elements unfurl by progressively revealing their geometry through the draw range of the buffer.
- Audio analysis uses the Web Audio API. A single analyser node feeds both the frequency and time domain readings that drive onset detection, pitch estimation, and volume.
- The desktop shell is Electron. Three.js is bundled locally rather than loaded from a content delivery network, so the packaged application runs without a network connection.
Adding a new world is straightforward because each world is described by a single entry in the MODES object inside index.html. An entry defines the background color, the fleck color, a color palette, a size scale, a spawn rate, and a build function that returns the line geometry for one element. To surface the new world in the interface, add a matching card to the home screen markup.
Two per world values are useful for tuning density and pacing.
spawnRatecontrols how many elements are produced per musical onset. Lower values thin out the world.sizeScalecontrols the base size of elements relative to the current zoom level.
The browser version requires support for Web Audio, WebGL, ECMAScript modules, and import maps, which are available in current versions of Chrome, Edge, Firefox, and Safari. The desktop build is produced for macOS. Other platforms can be targeted by changing the electron builder configuration, since the application code itself is platform neutral.
- Rendering is powered by Three.js.
- The dock control is adapted to vanilla JavaScript from an open source proximity magnification component.
- The visual direction draws on contemporary ink and gold line art and traditional botanical and celestial motifs.
Released under the MIT License. See the LICENSE file for the full text.