I Built a 3D Chord Progression Generator That Visualizes Music Theory in Your Browser

TL;DR: Music theory is hard to visualize. The 3D Chord Progression Generator makes chords visible on a 3D keyboard, generates progressions by mood, and shows wave harmonics alongside traditional theory - all in your browser with no install required.

Chords are easy to hear and hard to picture. You press three keys on a piano, sound comes out, and your ear knows whether it's happy or tense. But what are those notes doing together? Why does C-E-G sound different from C-E♭-G? And how do you move from one chord to the next without it sounding random?

I wanted to see the notes light up on a 3D keyboard, with the wave, the harmonics and the theory beside them. So I built the 3D Chord Progression Generator.

It runs in the browser. No install, no account, no downloads. You play a chord, pick a mood and a key to get a progression, then explore scales, modes and the circle of fifths. The sounds are made live in your browser, not from recordings.

This article covers what the tool is, how it compares with a plain piano app and a theory book, a walk-through on desktop and phone, how I built it and what it cannot do. I built it, so this is written by the person who made it, and that is also why I list the limits at the end.

What the 3D Chord Progression Generator is

The 3D Chord Progression Generator is a music theory tool that runs in a web browser. It is designed and built by me, Julian Neagu, a solo founder in London who builds AI tools, apps and websites under VisionVix. I made it for learners, songwriters and anyone curious about how chords work.

A 3D piano sits in the middle of the screen. Controls surround it. Every panel reacts to what you play, so the notes you press show up as a wave, as harmonics and as a named chord.

The header says it plainly: 3D keyboard, 7 instruments, chords, scales, theory. The keyboard spans 25 keys from C3 to C5 - two full octaves. Seven instruments are available, each with customizable parameters for warmth, brightness, and air noise. The analyzer shows the waveform, spectrum, harmonics, and theory in real time.

In short: open VisionVix World, press Open Simulators, and choose Chord Progression Generator. You get a 3D keyboard, seven instruments, an analyzer that shows the wave and harmonics of what you play, progressions for six moods, 14 scales and modes, and a circle of fifths.

Piano app vs theory book vs 3D chord tool

There are three common ways to learn chords, and they do different jobs.

The tool does not teach music on its own. It gives you something to press, hear and look at while you read or practice. A theory book tells you that a major chord is built from the root, major third and perfect fifth. The 3D Chord Progression Generator shows you those intervals lighting up on the keyboard, labels the chord as "C Major" and displays the frequency ratios.

The tool bridges the gap between reading rules and hearing sound. You press, you see, you hear - all at once.

If you want to see more of my projects in action, I share walkthroughs and builds on my YouTube channel, where I break down other tools like this one.

A walk-through of the 3D Chord Progression Generator

1. Open the tool

Everything starts at the VisionVix landing page. The hero shows the 3D Simulation Platform with a green Open Simulators button under the headline. It runs the tools right in your browser, with nothing to install.

Press Open Simulators. You arrive at the Choose Your 3D World Simulator page. At the time of writing it shows nine worlds: seven live, two coming soon. Each card has a green Enter Simulator button. Press it on the Chord Progression Generator card.

On a phone, the steps are the same. The cards stack in one column.

2. Play the 3D keyboard

Click or tap a key and it sounds. A card shows the note you played with its frequency in hertz and the tuning reference. Standard tuning is A4 = 440 Hz, with an alternative 442 Hz setting for European orchestras.

On a laptop you can play from the computer keyboard too:

• A W S E D F T G Y H U J K play C4 to C5
• Z X C V B N M play C3 to B3

The Sustain button decides whether a note holds until you press it again or stops when you let go.

3. Choose an instrument

Seven buttons across the top pick the sound:

• Piano
• Violin
• Flute
• Clarinet
• Guitar
• Organ
• Sine

A card shows the instrument with sliders for warmth, brightness and air noise, plus a hollow or reed control depending on the instrument. A one-line description explains why it sounds the way it does.

For example, the Violin card says: "Bright harmonic-rich tone with bowing texture simulated through filtered noise modulation." The Guitar card says: "Warm plucked tone with body resonance simulated through filtered harmonic decay."

4. Pick a scale, a root and a quick chord

The bar under the header has a scale dropdown (None, Major, Minor, Pentatonic, Blues or Chromatic), a root note from C to B, and four quick chords: Major, Minor, Dominant 7 and Diminished.

Choose a scale and root and the notes in that scale light up on the 3D keys. Press a quick chord and it plays from the root you chose.

Pressing "C Major" instantly lights up C, E and G on the keyboard, plays the chord and shows the waveform in the analyzer.

This is where the tool becomes more than a piano app. The theory reacts to what you do, not the other way around.

5. Read the analyzer

The Analyzer tab shows four panels:

1. Waveform - frequency, period, amplitude and RMS of what you play
2. Spectrum - Fourier components, peak frequency, spectral centroid, brightness and roll-off
3. Harmonics - shows why an instrument has its timbre, with a compare button to set one instrument against another
4. Theory - Notes, Intervals, Chords and Scales tabs; names the chord you are holding with its note ratios and a consonance score

The consonance score is a number that tells you how stable the chord sounds. A perfect fifth scores higher than a minor second. This is not opinion; it is math based on the frequency ratios.

The harmonics panel is where you see why a flute sounds different from a clarinet even when they play the same note. The flute has mostly odd harmonics. The clarinet has both. The tool shows the amplitude of each harmonic as a bar graph, and you can switch instruments to see the difference.

6. Generate a chord progression

Open the Chord Progressions tab. Pick a key, a mood and a tempo, then press Generate.

The six moods are:

• Happy
• Sad
• Tense
• Jazz
• Blues
• Epic

Tempo range is 50 to 180 beats per minute.

The tool shows the progression in Roman numerals - for example, I-V-vi-IV in C Major is C-G-Am-F. A card for each chord shows its notes and a short note on why it works.

Click a card to hear that chord on the 3D piano. Press Play to loop the whole progression. You can switch instrument while it plays to hear the same harmony with a new sound.

Each progression is built from tested harmonic rules. The "Happy" mood uses major triads and strong cadences. The "Tense" mood uses diminished chords and unresolved dominants.

This is not random. The tool does not generate progressions from AI or from a shuffle. It pulls from built-in sets based on music theory, and it tells you why each chord appears.

7. Explore scales and modes

The Scales & Modes tab lists 14 scales:

• Major (Ionian)
• Dorian
• Phrygian
• Lydian
• Mixolydian
• Natural Minor (Aeolian)
• Locrian
• Harmonic Minor
• Melodic Minor
• Major Pentatonic
• Minor Pentatonic
• Blues
• Whole Tone
• Chromatic

Pick one and you see its step pattern, its notes, and buttons to play it up and down or highlight it on the piano.

For example, the Dorian mode shows: W-H-W-W-W-H-W (whole step, half step, whole step, whole step, whole step, half step, whole step). Press Play Ascending and the tool plays D-E-F-G-A-B-C-D if your root is D. Press Highlight on Piano and those seven notes light up on the keyboard.

This is useful when you are writing and you want to stay in a mode. You pick Phrygian, you see the notes, you build chords from them.

8. Use the circle of fifths

The Circle of Fifths tab shows the keys in a ring. Click a wedge and the panel gives:

• Its key signature
• Its relative minor
• Its subdominant and dominant
• The chords in that key, each one clickable to hear

For example, click the C wedge. You see:

• Key: C Major
• Relative Minor: A minor
• Subdominant: F Major
• Dominant: G Major
• Chords in C Major: C, Dm, Em, F, G, Am, Bdim

Press the "C" button and it plays C Major. Press "Dm" and it plays D minor. The circle updates the 3D keyboard to highlight the notes in that key.

9. Tune it in Settings

The gear button opens Settings. You can change the tuning reference, which includes A4 = 440 Hz as standard and 442 Hz for European orchestras. Some historical tunings are also available, like 415 Hz for Baroque music.

10. Use it on a phone

On a phone, the controls stack in one column, the keyboard sits below them, and the analyzer, progressions, scales, and circle open as tabs underneath.

You can also adjust the master volume and toggle the sustain pedal behavior.

How I built it

The 3D Chord Progression Generator is built with WebGL for the 3D keyboard, Web Audio API for the sound synthesis, and React for the UI. The entire tool runs client-side. No server calls, no latency, no uploads. Your browser does all the work.

The 3D keyboard

The keyboard is rendered with Three.js. Each key is a mesh with collision detection. When you click or tap, the tool fires a raycaster to detect which key you hit, then triggers the corresponding note.

The keys light up when they are part of the active scale or when you press them. The lighting is done with emissive materials that change color based on state.

The sound synthesis

The sounds are not recordings. They are synthesized live using the Web Audio API. Each instrument is a chain of oscillators, filters and gain nodes.

For example, the Piano instrument uses:

1. A fundamental frequency oscillator (sine wave)
2. Seven harmonic oscillators at integer multiples of the fundamental
3. An envelope with attack, decay, sustain and release
4. A low-pass filter to soften high frequencies

The Violin adds noise modulation to simulate bow texture. The Guitar uses a different envelope with a fast attack and slow decay to mimic a plucked string.

const createPianoNote = (frequency, audioContext, destination) => { const fundamental = audioContext.createOscillator(); fundamental.type = 'sine'; fundamental.frequency.value = frequency; const gainNode = audioContext.createGain(); gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 2); fundamental.connect(gainNode); gainNode.connect(destination); fundamental.start(); fundamental.stop(audioContext.currentTime + 2); }; 

This is a simplified version. The real code adds harmonics, filters and envelope shaping.

The analyzer

The analyzer uses the AnalyserNode from Web Audio API. It pulls time-domain data for the waveform and frequency-domain data for the spectrum.

The waveform is drawn on a canvas. The spectrum uses FFT (Fast Fourier Transform) to break the sound into its frequency components. The harmonics panel filters the spectrum to show only the first 16 harmonics of the fundamental frequency.

The theory panel is pure logic. It takes the set of active notes, calculates the intervals between them, matches the pattern to a chord database, and returns the chord name and consonance score.

const identifyChord = (notes) => { const intervals = calculateIntervals(notes); const chordMatch = chordDatabase.find(chord => chord.intervals.every((interval, i) => interval === intervals[i]) ); return chordMatch ? chordMatch.name : 'Unknown'; }; 

The chord progression generator

The progression generator is not AI. It is a lookup table. I wrote six sets of progressions for the six moods, each one with 8-12 common patterns.

When you press Generate, the tool picks a progression from the set that matches your mood, transposes it to your key, and displays the chords with explanations.

For example, the "Happy" mood includes:

• I-IV-V-I (classic resolution)
• I-V-vi-IV (pop progression)
• I-vi-IV-V (doo-wop progression)

Each chord has a note attached: "I chord establishes the tonal center", "V chord creates tension that resolves to I", and so on.

The scales and modes

The scales are stored as step patterns. The tool takes your root note, applies the pattern and returns the notes in that scale.

For example, the Major scale pattern is: [2, 2, 1, 2, 2, 2, 1] (whole, whole, half, whole, whole, whole, half). If your root is C, the tool adds those steps to C and returns [C, D, E, F, G, A, B].

The circle of fifths

The circle is an SVG with clickable wedges. Each wedge is mapped to a key. When you click, the tool calculates the relative minor, subdominant and dominant using music theory rules:

• Relative minor: down a minor third from the major key
• Subdominant: up a perfect fourth
• Dominant: up a perfect fifth

The chords in the key are built by taking each note in the scale and stacking thirds.

If you are curious about other 3D educational tools I have built, check out the 3D History Globe, which visualizes historical events on a rotating Earth with timelines and categories.

What the tool cannot do

The 3D Chord Progression Generator is not a DAW (digital audio workstation). It does not record, mix or export audio files. It does not support MIDI input or output. It does not have a sequencer or a drum machine.

The progressions are pre-written, not generated by machine learning. The tool does not compose music for you. It gives you patterns to start from, but you write the song.

The keyboard range is two octaves, from C3 to C5. If you need a wider range, you will need a different tool or a real piano.

The instruments are synthesized approximations. They sound like a piano, a violin, a flute, but they are not recordings of real instruments. The timbre is close, but not identical.

The tool works best on a laptop or desktop. It works on a phone, but the 3D keyboard is small on a 6-inch screen. The controls are touch-friendly, but you will not play complex chords easily on a phone keyboard.

Why I built it

I wanted to see chords. I have read theory books. I have used piano apps. Neither one gave me the full picture. The books showed me the rules. The apps let me press keys. But I wanted to see the wave, the harmonics and the theory at the same time, in one place, reacting to what I played.

So I built it. The 3D Chord Progression Generator is the tool I wanted when I was learning chords. It does not replace a teacher or a book, but it gives you something to explore while you learn.

You can try it now at VisionVix World. Press Open Simulators, choose Chord Progression Generator, and start playing.