The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Music Theory Interactive Lesson

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a single-page interactive music theory lesson for [BRAND], an invented evening music school, on the topic '[LESSON_TOPIC]'. The page is one long scroll that repeats a fixed rhythm: short concept, hands-on widget, small win. It contains a playable two-octave piano voiced by Web Audio oscillators, a rotating SVG circle of fifths, a chord builder that lights notes and names intervals, an eight-round ear-training quiz with a score, and a closing section about the instructor and the school. All widgets read one shared state, and twelve pitch-class colors stay consistent everywhere, so color itself teaches the relationships. Copy below is written for the default values. If the values change, rewrite all copy in the one content file to fit them, and keep the widgets, layout, colors and motion exactly the same.

- Audience: [AUDIENCE]. They may not read staff notation and may not own an instrument; a laptop keyboard or a phone is enough.
- Goal: Within ten seconds the visitor presses a key, hears it and sees the theory respond. By the end of the page they can name common intervals and chords by ear, have earned four small wins and a quiz score, and know what the [BRAND] evening course offers.
- Tone: Playful, bold and plainspoken, like a good teacher on a small stage at night. Short sentences. Describes how things sound in everyday words. Never academic, never cute for its own sake.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (MIT), lucide-react (ISC), @fontsource-variable/unbounded (OFL-1.1), @fontsource-variable/figtree (OFL-1.1), @fontsource-variable/jetbrains-mono (OFL-1.1), vite (MIT), @vitejs/plugin-react (MIT), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), typescript (Apache-2.0)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - vite.config.ts: set base to './' and build.sourcemap to false. Import Motion from 'motion/react'.
  - File layout: src/content.ts (all copy, sample data, win tasks, quiz rounds), src/theory.ts (note tables, scales, chord spelling), src/audio.ts (Web Audio engine), src/store.tsx (React context plus useReducer, no state library), src/components/ (Piano, CircleOfFifths, IntervalPicker, ChordBuilder, ChordShape, Quiz, WinBar, Dock, TopBar), src/App.tsx. Images in public/images/.
  - Add the colors and fonts from the Design section to tailwind.config theme.extend under the names given there, and export the same pitch color table from src/theory.ts as a typed array indexed by pitch class 0 to 11.
  - Note tables: DEFAULT_NAMES by pitch class = C, Db, D, Eb, E, F, F#, G, Ab, A, Bb, B. Write accidentals with plain # and b characters everywhere, with no music glyphs. FIFTHS_ORDER clockwise from the top = C, G, D, A, E, B, F#, Db, Ab, Eb, Bb, F. RELATIVE_MINORS in the same order = Am, Em, Bm, F#m, C#m, G#m, D#m, Bbm, Fm, Cm, Gm, Dm.
  - Scale spelling table: C = C D E F G A B; G = G A B C D E F#; D = D E F# G A B C#; A = A B C# D E F# G#; E = E F# G# A B C# D#; B = B C# D# E F# G# A#; F# = F# G# A# B C# D# E#; Db = Db Eb F Gb Ab Bb C; Ab = Ab Bb C Db Eb F G; Eb = Eb F G Ab Bb C D; Bb = Bb C D Eb F G A; F = F G A Bb C D E. Key signatures: C none; G 1 sharp; D 2 sharps; A 3 sharps; E 4 sharps; B 5 sharps; F# 6 sharps; Db 5 flats; Ab 4 flats; Eb 3 flats; Bb 2 flats; F 1 flat.
  - Chord spelling function: start from the root name, take the letter that many steps up for each degree (2nd +1, 3rd +2, 4th +3, 5th +4, 7th +6), then add the # or b characters needed to hit the pitch class. Double flats are written bb, for example Ebdim = Eb Gb Bbb.
  - src/audio.ts: create one AudioContext lazily inside the first pointerdown or keydown handler and call resume() there; never touch audio on page load. Graph: voices to a lowpass BiquadFilter (3200 Hz, Q 0.6), to a master GainNode (0.7), to a DynamicsCompressor, to destination. Each voice is a triangle oscillator at the note frequency plus a sine an octave up at gain 0.25, through a voice gain with attack 0.008 s to peak 0.5, decay 0.25 s to sustain 0.28 and release 0.35 s. Equal temperament with A4 = 440 Hz. Limit to 10 voices and steal the oldest. Mute ramps the master gain to 0 over 20 ms and back to 0.7 on unmute.
  - Playback helpers in src/audio.ts: playNote(midi, ms); playMelodic(midis) with 450 ms between notes, then all notes together for 900 ms; strum(midis) with 45 ms between notes and a 1200 ms hold; playScale(midis) with 170 ms between notes; tick(midi), a 60 ms note at gain 0.15. Each helper also reports notes on and off to the store, so every piano lights in sync. Each one takes a silent flag that skips this reporting; quiz playback uses it until the round is answered, so the dock cannot give away the answer.
  - src/store.tsx state: selectedKey (index into FIFTHS_ORDER, starts at [START_KEY]), activeNotes (set of midi numbers now sounding), interval {rootMidi, semitones: 7}, chord {rootName, quality: 'major'}, lastEvent {label, midis, playback}, wins [false, false, false, false], muted false, heroPlayed (last two midi notes pressed on the hero piano). The dock, top bar and all pianos read from this one store.
  - Linking rules: (1) changing selectedKey sets interval.rootMidi to the tonic in octave 4 and sets chord.rootName to the tonic, keeping the quality. (2) Choosing a root chip or quality in the chord builder rotates the circle: for major, dominant 7th, major 7th, augmented and sus chords, to the root's own wedge; for minor, minor 7th and diminished chords, to the major key whose inner wedge has that root (root + 3 half steps). This rotation must not overwrite the chord that triggered it, so pass a source flag. (3) Diatonic chord chips in the circle panel set the chord builder and keep the circle where it is. (4) A press on the hero piano sets selectedKey to that pitch class. A press on the Chapter 1 piano sets interval.rootMidi to that pitch class in octave 4 and leaves selectedKey alone. Presses on other pianos only play and pulse the matching circle wedge.
  - Keyboard map on window keydown, ignoring e.repeat, any modifier key, and focus inside an input: A=C, W=C#, S=D, E=D#, D=E, F=F, T=F#, G=G, Y=G#, H=A, U=A#, J=B, K=C up an octave, O=C# up, L=D up, P=D# up, ;=E up, '=F up. Base octave starts at 4; Z sets it to 4 and X sets it to 5; notes above B5 are ignored. The press counts as a press on the piano of the hero or chapter now in view (tracked with IntersectionObserver); anywhere else it only plays the note.
  - npm scripts: dev, build (tsc --noEmit && vite build), preview. Add public/favicon.svg, a 12-wedge pinwheel in the note colors, and a plain title '[BRAND] | [LESSON_TOPIC]'.

## Variables
- [BRAND] — School or course brand (default: "Overtone Night School"). An invented name. Shown in the top bar, the instructor section, the final band and the footer.
- [LESSON_TOPIC] — Lesson topic (default: "Intervals and chords"). Sets the hero eyebrow and the chapter copy. The piano, circle, chord builder and quiz stay; reorder the chord list and quiz rounds to suit.
- [AUDIENCE] — Who the lesson is for (default: "Beginners who play by ear and want to name what they hear"). Shapes the hero lead and the FAQ.
- [START_KEY] — Starting key (default: "C"). One of C, G, D, A, E, B, F#, Db, Ab, Eb, Bb, F. The circle, interval root and chord builder open here.
- [INSTRUCTOR_NAME] — Instructor name (default: "Marisol Adeyemi"). An invented person. Swap the portrait for your own photo if you use a real name.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/music-theory-interactive-lesson in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- stage `#1B0B4B` — Deep ultraviolet page ground; hero scrim tint and odd chapters
- pit `#120634` — Darkest ground for the top bar, dock and footer, and the ink on all bright fills
- curtain `#2A0F73` — Saturated violet ground for even chapters
- panel `#351A8C` — Widget panels and cards
- coral `#FF5A47` — Electric coral: secondary buttons, wrong answers, final band, chapter 1 accent. Must appear large in the hero
- acid `#E6FF2E` — Acid yellow: primary buttons, win bars, correct answers, circle pointer, focus rings. Must appear large in the hero
- text `#F6F1FF` — Body and heading text on dark grounds
- muted `#C9BEF2` — Secondary text on dark grounds
- ivory-key `#F1EBFF` — Pale lilac natural piano keys
- pc-C `#FF5A47` — Pitch class C
- pc-G `#FF8A2B` — Pitch class G
- pc-D `#FFC21F` — Pitch class D
- pc-A `#E6FF2E` — Pitch class A
- pc-E `#8CF23C` — Pitch class E
- pc-B `#2EE87F` — Pitch class B
- pc-Gb `#1FE5C4` — Pitch class F#/Gb
- pc-Db `#29C9FF` — Pitch class C#/Db
- pc-Ab `#6FA3FF` — Pitch class G#/Ab
- pc-Eb `#A98BFF` — Pitch class D#/Eb
- pc-Bb `#E872FF` — Pitch class A#/Bb
- pc-F `#FF5CB0` — Pitch class F

### Typography
- Display: headlines, chapter numerals, chord and key names. Weight 800, line-height 1.04, letter-spacing -0.02em.: Unbounded Variable (OFL), weights 500/800
- Text: body at 18px desktop and 16px mobile, line-height 1.55; buttons at weight 700.: Figtree Variable (OFL), weights 400/500/700
- Mono: note names on keys, half-step counts, score, key caps, small labels at 12 to 14px, uppercase with 0.08em tracking where labels are words.: JetBrains Mono Variable (OFL), weights 500/700

### Layout & motion
- Spacing: Base unit 8px. Page container max width 1320px with 40px side gutters on desktop and 16px on mobile. Chapters use 120px vertical padding on desktop and 72px on mobile. Widget panels use 32px padding on desktop and 16px on mobile. Gaps between panel groups are 24px.
- Radius: Panels 28px, cards 20px, buttons and chips fully round (999px), piano keys square at the top and 10px at the bottom on naturals, 6px at the bottom on sharps.
- Motion: Stage beam: on every press of a hero piano key, a vertical beam in that note's color rises from the key to the top of the hero, 2 key-widths wide with a linear gradient fading to transparent, scaleY 0 to 1 in 120 ms, then fades out over 600 ms. Several beams may overlap. This is the signature effect.
- Motion: Key press: a pressed key moves down 3px in 60 ms, its fill becomes the pitch color and it gains a soft outer glow in that color. On release it returns over 140 ms.
- Motion: Circle rotation: Motion spring with stiffness 180 and damping 22 to the nearest 30-degree snap, taking the shortest path. While dragging, the rotation follows the pointer directly and a tick() plays each time a new wedge crosses the pointer. Wedge labels counter-rotate to stay upright.
- Motion: Win bar: the dashed outline fills from left to right with acid yellow in 350 ms, the check icon pops in with a spring (scale 0.4 to 1), and the top bar's win count bumps to scale 1.2 and back.
- Motion: Chord change: chips animate in with a 40 ms stagger, moving up 8px and fading in; the chord shape polygon morphs to its new vertices with a spring (stiffness 140, damping 18).
- Motion: Scroll reveal: chapter text and panels move up 24px and fade in once over 500 ms as they enter the viewport.
- Motion: Idle hero: on load, a 2.4 s wave of light passes left to right across the piano's color strips, once only, with no sound.
- Motion: With prefers-reduced-motion: no beams, wave or scroll reveals. The circle jumps to its position with no spring, and key presses only change color. Sound and all widgets still work.
- Imagery: A stage at night. Four matching photographs in one shoot style (ultraviolet haze, coral key light, thin acid yellow accent) set the mood for the hero, the instructor, the evening class and the final band. Everything interactive is drawn in SVG and HTML: the piano, circle, chord shape and color strips. Instruments carry no maker names.

## Pages & Sections
### [BRAND] | [LESSON_TOPIC] (`index.html`)
1. **Shared layout: top bar and dock** — Top bar: left, a 24px pinwheel of twelve note-colored wedges plus '[BRAND]' in Unbounded 500. Center, anchor links 'Intervals' (#intervals), 'Circle' (#circle), 'Chords' (#chords), 'Quiz' (#quiz). Right, a mono pill showing '0/4 wins' that counts up and a round sound button using Lucide Volume2 or VolumeX with the visible label 'Sound on' or 'Sound off'. Dock: a fixed bottom bar with a static mini keyboard showing the notes now lit or sounding, a mono readout of lastEvent.label such as 'C major chord: C E G' or 'G major scale' or 'E4', a round Lucide Play button that replays lastEvent, and the same sound button. Before any event the readout says 'Press any key'.
   Layout: Top bar is sticky, 64px tall on desktop and 56px on mobile, pit background at 85% opacity with backdrop blur. On mobile hide the center links and the 'Sound on' label, keeping the icon and win pill. Dock is 64px tall on desktop and 56px on mobile, with a pit background and a 1px panel-colored top border. Mini keyboard is an SVG 336x40 on desktop and 150x32 on mobile. Body gets matching bottom padding so the dock never covers content.
   Motion: The dock slides up 200 ms after the hero leaves the viewport (IntersectionObserver) and slides away when the hero returns. The dock's mini keys change color instantly.
2. **Hero** — Mono eyebrow in acid: '[LESSON_TOPIC] · a free lesson from [BRAND]'. Headline with forced breaks: 'Press a key. / Hear why / it works.' with 'Hear why' in acid and the rest in text color. Lead: 'For beginners who play by ear and want to name what they hear. Four short chapters, about 20 minutes, no sign-up.' Primary button 'Start the lesson' (acid, links to #intervals). Secondary button 'Jump to the quiz' (coral fill with pit ink, links to #quiz). Mono chips under the buttons on desktop only: '4 chapters', '20 minutes', 'Keyboard, mouse or touch'. Right side: the circle of fifths. Below everything: the full two-octave piano from C4 to B5, with a one-line live readout directly above it. Readout before any press: 'Press any key, or try A S D F G H J on your keyboard.' After one press: 'E4. Now press another key.' After two: 'E4 to B4: perfect fifth, 7 half steps.' using the interval names from Chapter 1. Count the distance in either direction. Beyond an octave, name the interval reduced to within an octave and add 'plus an octave'. The same note twice reads 'E4 again: same note.'
   Layout: Min height 100svh. Full-bleed background photo hero-stage.webp with object-fit cover and a scrim: linear gradient from pit at 88% on the left to stage at 45% on the right, and pit at 90% over the bottom 40%. Add a large blurred coral radial glow (600px) behind the circle and an acid glow (360px) at the top-left corner of the photo, both clearly visible. At 1440x900: two columns above the piano, left 58% holding the text with headline font-size clamp(36px, 4.6vw, 66px), right 42% holding a 440px circle centered. The piano spans the full container at the bottom of the screen, height clamp(170px, 23vh, 210px), so the whole composition fits inside 900px with no scrolling. Mobile at 390x844: single column in the order eyebrow, headline, lead, primary button only, 216px circle (outer ring only), readout, then piano in two rows (C4 to B4, then C5 to B5), each row 88px tall with 7 natural keys spanning the full width. All of it must fit within about 844px.
   Motion: Stage beams on every press, plus the idle wave on load. The first press also makes the circle turn to that pitch class, so the composition visibly responds. Headline lines reveal with a 60 ms stagger on load.
3. **Piano component (used in the hero and all four chapters)** — 24 keys, C4 to B5. Natural keys are ivory-key with a 14px color strip at the bottom in their pitch color, and show the note letter in mono above the strip in pit ink. Sharps are pit with an 8px color strip, and show their name only when lit. Lit notes (scale, interval or chord) fill with the pitch color and display the spelling from the current scale or chord, such as F# in G major or Eb in C minor. Notes sounding right now get the glow as well. Show the computer key letter in a tiny mono cap on each key on desktop when a hover-capable pointer is present, with the current octave mapping.
   Layout: A rounded pit tray with 12px padding. Naturals are each 1/14 of the width; sharps are 62% of a natural's width and 62% of the height, centered on the gap with the usual slight offset. Chapter pianos are 180px tall on desktop. On mobile, two rows of 7 naturals, 110px tall per row, with an 8px gap.
   Motion: Use Pointer Events without setPointerCapture: track each pointerId to a midi note so multi-touch chords work, and let mouse glissando use elementFromPoint on pointermove. Apply touch-action: none on the keys. Each key is a real button with aria-label such as 'C sharp 4'; Enter or Space plays it.
4. **Color key band** — Small heading: 'Every note has a color.' Line: 'It keeps that color on this whole page. Neighbors in this row are a perfect fifth apart, so colors that look close also sound close.' Then 12 round chips in FIFTHS_ORDER, filled with their pitch color and named in mono with pit ink. Tapping a chip plays that note in octave 4.
   Layout: Full-width pit band with 48px vertical padding. On desktop the text sits left in 4 columns and the 12 chips run in one row in the remaining 8 columns, each 56px wide. On mobile the text stacks above a 6-by-2 grid of chips.
   Motion: Chips scale to 1.12 with a spring when played.
5. **Chapter 1: Intervals (id intervals)** — Outlined numeral '01' in coral. Title: 'Intervals are distances.' Concept: 'An interval is the gap between two notes, counted in half steps. One half step is the very next key, black or white. Count seven from C and you land on G.' Second line: 'Each gap has its own feel. Learn the feel first and the names follow.' Widget: 12 chips in order, each with mono half-step number, short name and feel: 1 Minor second, tense like a held breath; 2 Major second, a step forward; 3 Minor third, soft and a little sad; 4 Major third, bright and settled; 5 Perfect fourth, open like a call; 6 Tritone, restless and wants to move; 7 Perfect fifth, wide and stable; 8 Minor sixth, bittersweet; 9 Major sixth, warm and open; 10 Minor seventh, bluesy and unresolved; 11 Major seventh, dreamy, almost home; 12 Octave, the same note, higher. Selecting a chip calls playMelodic on root and upper note. Below the chips a large readout such as 'C to G · 7 half steps' in Unbounded with the two notes in their colors, then the piano. Pressing a piano key makes it the new bottom note. Helper: 'Press any key to move the bottom note.' Win task: 'Small win: play a perfect fifth. Press any key, then the key seven half steps above it.' On success, for two consecutive presses on this piano exactly 7 apart: 'Win 1. You found a perfect fifth: C up to G.' using the real notes.
   Layout: 12-column grid. Left 4 columns are sticky at top 96px and hold a 120px outlined numeral (transparent fill, 2px stroke), the title at 44px and the concept. Right 8 columns hold a panel-colored widget panel: chips in a 4-by-3 grid, then readout, then piano. Win bar spans the full container below, 72px tall, dashed 2px acid outline with the Lucide Trophy icon and task text. Chapter ground is stage. On mobile, one column, chips in a 2-by-6 grid with the feel text hidden until selected, and the left column is not sticky. An SVG arc above the piano joins root and upper note, labeled '7 half steps'; on mobile, when the two notes fall on different rows, replace the arc with a pill above the piano.
   Motion: The arc draws in with pathLength over 300 ms in the upper note's color. Selected chip fills with that note's color. Scroll reveal on the left text and panel.
6. **Chapter 2: Circle of fifths (id circle)** — Outlined numeral '02' in acid. Title: 'Fifths go in a circle.' Concept: 'Start anywhere and climb by perfect fifths. After twelve steps you are back where you began. Each step clockwise adds one sharp to the key; each step the other way adds one flat.' Second line: 'Keys next to each other share almost all their notes, which is why they sound like family.' Circle: SVG viewBox 600x600, center 300,300. Outer ring radius 200 to 290 with 12 wedges for the major keys in FIFTHS_ORDER, each 30 degrees with a 1.5 degree gap, filled in pitch color. Inner ring radius 130 to 200 with RELATIVE_MINORS in the same pitch color as their own root. Center disc radius 124 in pit, showing the selected key name in Unbounded with its signature in mono underneath ('3 sharps'), and acting as a play button for the scale. A fixed acid triangle above the ring marks the selected key at 12 o'clock. Selected, neighboring majors and the three neighboring minors stay at full fill with pit ink; all other wedges drop to 28% fill opacity with text-colored labels. Info panel: key name 'A major'; line 'Relative minor: F# minor'; signature 'Sharps: F# C# G#'; 7 scale note chips in color; 'Play scale' button (acid); 7 diatonic chord chips labeled I, ii, iii, IV, V, vi, vii° with the chord name beneath, such as 'V · E'. Tapping a chord chip strums it and sets the chord builder. Piano below shows the scale lit. Drag anywhere on the ring to turn it, tap a wedge to bring it to the top, or use Left and Right arrow keys when focused (role slider, aria-valuetext 'A major, 3 sharps'). Win task: 'Small win: turn the circle to the key with three sharps.' On success, from a user turn in this chapter: 'Win 2. A major: three sharps, F#, C# and G#.'
   Layout: Mirrored: widget left in 8 columns, text right in 4 columns, on the curtain ground. Inside the panel, a 520px circle sits left with the info panel right, and the piano spans the full panel below. On mobile, one column with text first, a 340px circle, then info, then piano. Hero uses the same component at 440px; at 216px on mobile it hides the inner ring. Win bar spans the full container below.
   Motion: Spring rotation with ticks as described in Design. Touch-action none on the ring. Selected wedge grows its outer radius to 298. Pressing a note on any piano pulses the matching wedge to full opacity for 300 ms.
7. **Chapter 3: Chord builder (id chords)** — Outlined numeral '03' in pc-F pink. Title: 'Stack notes, change the mood.' Concept: 'A chord is three or more notes played together. Move one note by one half step and the whole mood flips.' Widget: Root row with 12 color chips in chromatic order using DEFAULT_NAMES. Quality row with 9 chips: Major (0 4 7, bright and settled), Minor (0 3 7, soft and inward), Diminished (0 3 6, tight and unstable), Augmented (0 4 8, floating and unresolved), Sus2 (0 2 7, open, neither happy nor sad), Sus4 (0 5 7, leaning, wants to land), Dominant 7th (0 4 7 10, restless, pushes home), Major 7th (0 4 7 11, warm and dreamy), Minor 7th (0 3 7 10, mellow and smooth). Result block: large chord name 'C major' in Unbounded, mood line, note chips in color (C E G), each with interval label below (Root, Major 3rd, Perfect 5th; others Major 2nd, Minor 3rd, Perfect 4th, Diminished 5th, Augmented 5th, Minor 7th, Major 7th), then a mono formula 'Half steps: 4 + 3'. 'Strum' button (acid). Chord shape: 240px SVG ring of 12 dots in FIFTHS_ORDER with a polygon joining the chord's notes, filled in the root color at 35% with an acid stroke; caption 'The same chord type makes the same shape in every key.' Piano below with the chord lit, root in octave 4 and other notes above. Progressions row: 'Try it in [the selected key]' with three buttons, 'I V vi IV', 'ii V I', 'I IV V'. Each plays its chords in the selected key at 700 ms per chord, updating the chord block and piano as it goes. Any change of root or quality strums automatically. Win task: 'Small win: turn a major chord into a minor one.' On success, when quality changes from major to minor on the same root: 'Win 3. You lowered one note by a half step, E to Eb, and the mood changed.' using the real notes.
   Layout: Same left-text, right-panel layout as Chapter 1 on the stage ground. In the panel: root row full width, quality row full width in a 3-by-3 grid; then a two-column row with result block left and chord shape right; then piano; then progressions. On mobile, one column, root chips in a 6-by-2 grid, quality chips in a 2-column grid, chord shape 200px centered under the result.
   Motion: Chip stagger and polygon morph as described in Design. Triads repeat the last vertex so the polygon always has 4 points to morph between.
8. **Chapter 4: Ear-training quiz (id quiz)** — Outlined numeral '04' in pc-Gb teal. Title: 'Now use your ears.' Line: 'Eight rounds. Listen, then answer. You can replay each sound as often as you like.' Start button 'Start the quiz' (acid). Rounds in this data shape in content.ts, shuffled per attempt, with a random root between C4 and G4. 1 interval Major third, options Minor third, Major third, Perfect fourth, Perfect fifth; note 'A major third: four half steps, bright and settled.' 2 interval Perfect fifth, options Perfect fourth, Perfect fifth, Major sixth, Octave; note 'A perfect fifth: seven half steps, wide and stable.' 3 chord Major, options Major, Minor, Diminished, Augmented; note 'A major chord: a major third with a minor third on top.' 4 interval Minor third, options Minor third, Major third, Perfect fifth, Minor seventh; note 'A minor third: three half steps, soft and a little sad.' 5 chord Minor, options Major, Minor, Diminished, Augmented; note 'A minor chord: same outer notes as major, with the middle note a half step lower.' 6 interval Octave, options Perfect fifth, Major sixth, Minor seventh, Octave; note 'An octave: twelve half steps, the same note name, higher.' 7 interval Perfect fourth, options Major second, Perfect fourth, Tritone, Perfect fifth; note 'A perfect fourth: five half steps, open like a call.' 8 chord Dominant 7th, options Major 7th, Dominant 7th, Minor 7th, Sus4; note 'A dominant seventh: a major chord with a minor seventh on top, restless and ready to move.' Each round: a large round 'Play the sound' button with Lucide Play icon, mono 'Round 3 of 8 · Score 2', an 8-segment bar, 4 answer buttons. The piano stays hidden until the round is answered, so it cannot give away the answer; then it shows the notes in their colors. While a round is unanswered, the dock readout says 'Quiz: listen and answer' and its mini keyboard stays unlit. On answering, the chosen button turns acid with Lucide Check if right, or coral with Lucide X if wrong, and the right answer also turns acid. Show the note and a 'Next round' button. If muted, show 'Sound is off' with an inline 'Turn sound on' button in place of the play button. Results card: big score '6/8'; title 0 to 3 'Warming up', 4 to 6 'Your ears are waking up', 7 to 8 'Sharp ears'; a list of missed rounds, each with a replay button; 'Play again' (acid) reshuffles. Finishing eight rounds earns win 4: 'Win 4. You trained your ears for eight rounds.'
   Layout: A single centered panel with max width 880px on the curtain ground, with numeral and title centered above. The play button is 96px across and centered. Answer buttons in a single row of 4 on desktop and 2-by-2 on mobile, 64px tall. Segment bar spans the panel width; each segment fills acid for right and coral for wrong. Results card replaces the round view at the same size, with the score at 120px on desktop and 72px on mobile in Unbounded, in acid.
   Motion: Rounds slide left and fade in 250 ms using AnimatePresence. Wrong answers shake 6px twice in 240 ms. The play button emits an expanding ring in coral while sound plays. The results score counts up from 0 over 600 ms.
9. **Keep this: cheat sheet** — Heading: 'Keep this page open while you play.' Two lists. Left 'Intervals' with all 12 from Chapter 1: half-step count, name and feel. Right 'Chords' with all 9 qualities: name, half-step formula and mood. Every row has a small play button that plays it from the selected key's tonic and updates the dock.
   Layout: Stage ground, two columns on desktop and one on mobile. Rows are 52px tall with thin panel-colored dividers. The half-step number sits in mono in a 32px round chip tinted with the color of the note it lands on from the current tonic.
   Motion: Row hover background changes to panel in 120 ms.
10. **Instructor and school** — Eyebrow: 'Who wrote this lesson'. Heading: 'Taught by [INSTRUCTOR_NAME].' Bio: '[INSTRUCTOR_NAME] spent eleven years playing keys in touring bands before opening [BRAND] above a bike shop at 418 Marlow Street, Eastfield. She teaches the way she learned: by ear first, with the names right after.' Stats: '2,140 students since the first class', '10 seats per room', '86% finish all six classes'. Course heading: 'Six evenings on real keyboards.' Facts: 'Tuesdays and Thursdays, 7:30 to 9:00 pm', 'Room 2B, 418 Marlow Street', '$186 for all six, or $34 drop-in'. Numbered classes: 1 Intervals by ear; 2 Triads and inversions; 3 Keys and the circle; 4 Seventh chords; 5 Common progressions; 6 Write your own eight bars. Quotes: 'I stopped guessing at chords after two weeks. Now I name them on the bus.' Theo Lindqvist, night-shift nurse. 'I had played for years without knowing why anything worked. Class three fixed that.' Priya Venkataraman, wedding band guitarist.
   Layout: Curtain ground. Row 1: instructor-portrait.webp left in 5 columns at 3:4 with 28px radius and a 6px coral offset block behind it, bio and 3 large stats right in 7 columns. Row 2: evening-class.webp left in 6 columns at 4:3 with 28px radius, and on the right the course facts and a 2-by-3 grid of numbered class cards in panel color. Row 3: two quote cards side by side, with one acid fill and pit ink and one coral fill and pit ink. Stack everything on mobile.
   Motion: Scroll reveal only.
11. **FAQ** — Heading: 'Before you ask.' Q 'Do I need a piano?' A 'No. A laptop keyboard, a mouse or a phone screen is enough. If you own a keyboard, try each exercise on it afterward.' Q 'Do I have to read music?' A 'No. This lesson uses note names and half steps only, with no staff notation.' Q 'I hear nothing. What now?' A 'Browsers keep sound off until your first tap, so press a key once. Then check the Sound button at the top and the silent switch on your phone.' Q 'What does the evening course add?' A 'Real keyboards, a teacher listening to you, and live ear training in a room of ten. You also leave with eight bars you wrote yourself.'
   Layout: Stage ground, max width 880px, native details and summary rows with a Lucide Plus icon that rotates into a cross. First item open by default.
   Motion: Answer height animates over 200 ms; the icon rotates 45 degrees.
12. **Final band and footer** — Coral band heading in pit ink: 'Come play it in the room.' Line: 'New groups start the first Tuesday of each month. Call or write to save a seat.' Contact as text, with no form: '(555) 014-2277' and '[email protected]', rewritten for the brand when it changes. Button 'Replay the quiz' (pit fill with text color) links to #quiz. Footer in pit: [BRAND], address, hours 'Office open Monday to Friday, 4 to 7 pm', anchor links, 'All sounds in this lesson are made live in your browser.', then the optional [CREDIT] link.
   Layout: Band is full-bleed coral with a two-column layout: text left at 55%, keys-closeup.webp right at 45%, full band height with no radius, on desktop. On mobile the photo sits above the text at 16:9. Footer is 3 columns on desktop and stacked on mobile, with padding that clears the dock.
   Motion: Scroll reveal on the heading only.

## Assets
- image: Download https://media.vibefather.ai/assets/cf319907-f8d2-4e65-990a-90703b5a0bec/hero-stage.webp to public/images/hero-stage.webp. Alt: 'An empty small club stage at night, hazy with ultraviolet light and crossed by a coral beam'. Used as the hero background. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/cf319907-f8d2-4e65-990a-90703b5a0bec/instructor-portrait.webp to public/images/instructor-portrait.webp. Alt: 'The instructor at a keyboard on a small stage, seen from behind under violet and coral light'. A fictional AI-generated person, used in the instructor section as a placeholder to swap for a real photo. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/cf319907-f8d2-4e65-990a-90703b5a0bec/evening-class.webp to public/images/evening-class.webp. Alt: 'Adult students seen from behind, practicing at small keyboards in a dim violet rehearsal room'. Used beside the course facts. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/cf319907-f8d2-4e65-990a-90703b5a0bec/keys-closeup.webp to public/images/keys-closeup.webp. Alt: 'A close view of piano keys glowing under coral and ultraviolet stage light'. Used in the final band. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Draw all interactive graphics in code as inline SVG or HTML: piano, circle of fifths, chord shape ring, stage beams, mini keyboard, pinwheel mark and favicon. Original work for this template; note them as code-drawn in ASSETS.md.
- icon: Lucide icons through the lucide-react package (ISC): Volume2, VolumeX, Play, Check, X, Plus, Trophy, RotateCcw.
- font: Self-host Unbounded, Figtree and JetBrains Mono through the listed @fontsource-variable packages (OFL-1.1), imported in src/main.tsx. List each one in ASSETS.md.

## Don'ts
- No backend: no server code, API routes, databases, auth, third-party APIs, analytics, or forms that submit anywhere. The contact details are plain text.
- Static output only in dist/, built with npm run build, using relative asset paths (Vite base './'). Minified, no source maps, no src/ copied into dist/, total under 20 MB.
- Keep this as one page, index.html. In-page links use anchors (#quiz); any link to a file uses a file name, never a bare directory.
- Self-host every font through the listed Fontsource packages. Never load fonts from fonts.googleapis.com, fonts.gstatic.com or any other CDN. No CDN script or link tags. Download every image into the project; never hotlink.
- Keep all copy, sample data, win tasks and quiz rounds in src/content.ts. When variable values change, rewrite that file so no default brand, person or topic remains. The widgets, layout, colors and motion stay the same.
- No audio files of any kind: no samples, recordings or sound fonts. All sound is synthesized in the browser with oscillators.
- Do not create or resume an AudioContext before a user gesture, and never autoplay sound on load. The page must run with zero console errors or warnings at 1440x900 and 390x844.
- No instrument maker names or logos on the piano, in images or anywhere else.
- No melodies, riffs or chord charts from existing songs, as examples or in the quiz, and no 'sounds like the start of' song references. Use only intervals, scales and generic progressions.
- No lesson text, diagrams or exercise wording from existing theory sites, books or courses. Use the copy in this prompt.
- No commercial music notation fonts, no staff notation, and no music glyph characters; write accidentals as # and b.
- No Aceternity UI, Tailwind Plus or other restricted UI library source, and no audio or piano component libraries; write the widgets yourself.
- No likeness of real musicians or teachers. The instructor image shows a fictional AI-generated person. No named mascots or characters from music education apps or games.
- No off-white or cream page sections. The whole page stays on the ultraviolet and violet grounds, apart from the coral band.
- Respect prefers-reduced-motion as described in Design, and keep body text at WCAG AA contrast. Never put text-colored labels on bright note colors; use pit ink #120634 there.
- No horizontal page scrolling at any width, and no fixed dock covering the piano or answer buttons.
- List every third-party file in ASSETS.md at the project root with path, source URL, author and license. No mention of VibeFather inside the site except the optional [CREDIT] footer link.

---
— Prompt by VibeFather · https://vibefather.ai/t/music-theory-interactive-lesson · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.