Music visualization tools are often locked behind expensive software, require technical setup, or are limited to basic waveform displays. Casual users and creators who want immersive, beautiful audio-reactive visuals have few accessible options that work directly in the browser without installation.
The challenge was to build a lightweight, browser-based audio visualizer that feels polished and responsive, supports multiple input methods, and offers enough visual variety to keep users engaged — all without any dependencies or frameworks.
SynthViz is a real-time audio visualization engine built entirely with vanilla JavaScript and the HTML Canvas API. It analyzes audio frequency data from either a microphone input, system audio capture, or uploaded audio files and renders dynamic, colorful animations synchronized to the music.
The application features three distinct visualization modes — Rings (concentric frequency-reactive circles), Aurora (flowing horizontal wave bands), and Pulse (radial line bursts from center) — each with unique rendering logic and sensitivity tuning. Users can switch between three color palettes (Ember, Frost, and Jade) that theme the entire interface and visualization in real time.
The project also includes a freemium UI design with a Pro upgrade modal, demonstrating product design thinking alongside the technical implementation.
SynthViz — Rings mode with Ember palette (live canvas rendering)
Like FocusFlow, SynthViz was built through VibeCoding — an iterative AI-assisted development approach. As the Prompter, I provided creative direction for each visualization mode, describing the desired aesthetic, motion behavior, and color interaction. The AI generated the Canvas rendering code, and I reviewed each output for visual quality, performance, and responsiveness.
Prompt reiteration was essential throughout this project. Early outputs often needed refinement — adjusting sensitivity curves so the visuals responded properly to bass frequencies, tuning trail opacity for each mode, and getting the color palette system to re-theme the entire interface seamlessly. Each round of feedback narrowed in on the final result through targeted, specific revision prompts.
The workflow diagram below shows the iterative cycle used to develop each feature, from initial prompt through review, revision, and final approval.
VibeCoding workflow — iterative prompt engineering cycle used to develop SynthViz
Single-file web application with zero dependencies. Built through VibeCoding with vanilla JavaScript, HTML5 Canvas, and the Web Audio API. Features real-time FFT analysis, three visualization modes, three color palettes, and a polished freemium UI.