Upload 4 files

app/globals.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,559 @@
+"use client"
+
+import { useState, useEffect, useRef, useMemo } from "react"
+import * as Tone from "tone"
+import { Slider } from "@/components/ui/slider"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Button } from "@/components/ui/button"
+import { Sparkles, Music, TreePine, RainbowIcon as Unicorn } from "lucide-react"
+
+// -------------------- Scales (No Pentatonics) --------------------
+const SCALES = {
+  ionian: [0, 2, 4, 5, 7, 9, 11, 12],
+  dorian: [0, 2, 3, 5, 7, 9, 10, 12],
+  phrygian: [0, 1, 3, 5, 7, 8, 10, 12],
+  lydian: [0, 2, 4, 6, 7, 9, 11, 12],
+  mixolydian: [0, 2, 4, 5, 7, 9, 10, 12],
+  aeolian: [0, 2, 3, 5, 7, 8, 10, 12], // Natural minor
+  locrian: [0, 1, 3, 5, 6, 8, 10, 12],
+  harmonicMinor: [0, 2, 3, 5, 7, 8, 11, 12],
+  melodicMinor: [0, 2, 3, 5, 7, 9, 11, 12],
+} as const
+
+// Chromatic root notes
+const ROOTS = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+
+// 8 distinct colors for on-screen keys
+const KEY_COLORS = [
+  "bg-red-400 hover:bg-red-500",
+  "bg-orange-400 hover:bg-orange-500",
+  "bg-yellow-400 hover:bg-yellow-500",
+  "bg-green-400 hover:bg-green-500",
+  "bg-teal-400 hover:bg-teal-500",
+  "bg-blue-400 hover:bg-blue-500",
+  "bg-indigo-400 hover:bg-indigo-500",
+  "bg-purple-400 hover:bg-purple-500",
+]
+
+// Keyboard mapping for A..K => indexes 0..7
+const KEY_MAPPING = ["a", "s", "d", "f", "g", "h", "j", "k"]
+
+// -------------------- MAIN COMPONENT --------------------
+export default function Fairyland() {
+  // ------ States ------
+  const [synth, setSynth] = useState<Tone.PolySynth | null>(null)
+
+  // Scale/Root/Octave
+  const [scale, setScale] = useState("ionian")
+  const [root, setRoot] = useState("C")
+  const [octave, setOctave] = useState(4)
+
+  // ADSR
+  const [attack, setAttack] = useState(0.1)
+  const [decay, setDecay] = useState(0.2)
+  const [sustain, setSustain] = useState(0.5)
+  const [release, setRelease] = useState(0.5)
+
+  // Effects
+  const [delayWet, setDelayWet] = useState(0.2)
+  const [reverbWet, setReverbWet] = useState(0.3)
+
+  // Forest pad toggle
+  const [forestOn, setForestOn] = useState(true)
+  const [forestPlaying, setForestPlaying] = useState(false)
+
+  // On-screen key states
+  const [activeKeys, setActiveKeys] = useState<Record<number, boolean>>({})
+  const activeNotesRef = useRef<Record<string, boolean>>({})
+
+  // Refs to nodes
+  const forestRef = useRef<Tone.Player | null>(null)
+  const delayRef = useRef<Tone.FeedbackDelay | null>(null)
+  const reverbRef = useRef<Tone.Reverb | null>(null)
+
+  // -------------- 1) Initialize Synth + Effects + Forest --------------
+  useEffect(() => {
+    // Create delay
+    const delay = new Tone.FeedbackDelay({
+      delayTime: 0.25,
+      feedback: 0.4,
+      wet: delayWet, // initial
+    })
+    delayRef.current = delay
+
+    // Create reverb
+    const reverb = new Tone.Reverb({
+      decay: 2.5,
+      wet: reverbWet,
+    })
+    reverbRef.current = reverb
+
+    // PolySynth => Delay => Reverb => Destination
+    const newSynth = new Tone.PolySynth(Tone.Synth, {
+      volume: -10,
+      oscillator: { type: "triangle" },
+      envelope: { attack, decay, sustain, release },
+    })
+    newSynth.connect(delay)
+    delay.connect(reverb)
+    reverb.toDestination()
+    setSynth(newSynth)
+
+    // Load forest loop
+    const forest = new Tone.Player({
+      // place "riverforest.wav" in /public => use "/riverforest.wav"
+      url: "/riverforest.wav",
+      loop: true,
+      autostart: false,
+      volume: -10,
+      onload: () => {
+        console.log("Forest pad loaded.")
+        if (forestOn) {
+          forest.start(0)
+          setForestPlaying(true)
+        }
+      },
+    }).toDestination()
+    forestRef.current = forest
+
+    // Start audio on first click or keydown
+    const handleFirstInteraction = () => {
+      if (Tone.context.state !== "running") {
+        Tone.start()
+      }
+      window.removeEventListener("click", handleFirstInteraction)
+      window.removeEventListener("keydown", handleFirstInteraction)
+    }
+    window.addEventListener("click", handleFirstInteraction)
+    window.addEventListener("keydown", handleFirstInteraction)
+
+    // Cleanup
+    return () => {
+      if (forest) {
+        if (forestPlaying) forest.stop()
+        forest.dispose()
+      }
+      newSynth.dispose()
+      delay.dispose()
+      reverb.dispose()
+      window.removeEventListener("click", handleFirstInteraction)
+      window.removeEventListener("keydown", handleFirstInteraction)
+      // No missing dependencies because we're removing only local references
+    }
+  // We add relevant states so ESLint doesn't complain about missing deps
+  }, [
+    forestOn, 
+    forestPlaying, 
+    delayWet, 
+    reverbWet, 
+    attack, 
+    decay, 
+    sustain, 
+    release
+  ])
+
+  // -------------- 2) Toggling forestOn --------------
+  useEffect(() => {
+    const forest = forestRef.current
+    if (!forest) return
+    if (!forest.loaded) return
+
+    if (forestOn) {
+      if (!forestPlaying) {
+        forest.start(0)
+        setForestPlaying(true)
+      }
+    } else {
+      if (forestPlaying) {
+        forest.stop()
+        setForestPlaying(false)
+      }
+    }
+  }, [forestOn, forestPlaying])
+
+  // -------------- 3) Envelope changes (Synth) --------------
+  useEffect(() => {
+    if (!synth) return
+    synth.set({
+      envelope: {
+        attack: Math.max(0.01, attack),
+        decay,
+        sustain,
+        release,
+      },
+    })
+  }, [synth, attack, decay, sustain, release])
+
+  // -------------- 4) Delay & Reverb updates --------------
+  useEffect(() => {
+    if (delayRef.current) {
+      delayRef.current.wet.value = delayWet
+    }
+  }, [delayWet])
+
+  useEffect(() => {
+    if (reverbRef.current) {
+      reverbRef.current.wet.value = reverbWet
+    }
+  }, [reverbWet])
+
+  // -------------- 5) Keyboard (A..K => scaleNotes) --------------
+  // Build scale notes
+  const scaleNotes = useMemo(() => {
+    const intervals = SCALES[scale as keyof typeof SCALES] || [0, 2, 4, 5, 7, 9, 11, 12]
+    return intervals.map(interval => {
+      const rootIndex = ROOTS.indexOf(root)
+      const totalSemitones = (octave * 12) + rootIndex + interval
+      const noteIndex = totalSemitones % 12
+      const noteOctave = Math.floor(totalSemitones / 12)
+      return `${ROOTS[noteIndex]}${noteOctave}`
+    })
+  }, [scale, root, octave])
+
+  // Listen for keydown/up
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const k = e.key.toLowerCase()
+      if (KEY_MAPPING.includes(k) && !activeNotesRef.current[k]) {
+        const idx = KEY_MAPPING.indexOf(k)
+        const note = scaleNotes[idx]
+        if (synth && note) {
+          synth.triggerAttack(note)
+        }
+        activeNotesRef.current[k] = true
+        setActiveKeys(prev => ({ ...prev, [idx]: true }))
+      }
+    }
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      const k = e.key.toLowerCase()
+      if (KEY_MAPPING.includes(k)) {
+        const idx = KEY_MAPPING.indexOf(k)
+        const note = scaleNotes[idx]
+        if (synth && note) {
+          synth.triggerRelease(note)
+        }
+        activeNotesRef.current[k] = false
+        setActiveKeys(prev => ({ ...prev, [idx]: false }))
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    window.addEventListener("keyup", handleKeyUp)
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+      window.removeEventListener("keyup", handleKeyUp)
+    }
+  }, [synth, scaleNotes])
+
+  // -------------- RENDER --------------
+  return (
+    <div
+      className="min-h-screen relative overflow-hidden flex flex-col items-center justify-center p-4"
+      style={{
+        backgroundImage: 'url("https://tonejs.github.io/audio/berklee/forest_ambience.jpg")',
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      <div className="max-w-4xl w-full bg-gradient-to-br from-purple-900/80 via-indigo-800/80 to-blue-900/80 backdrop-blur-xl rounded-xl p-6 shadow-2xl border border-white/30">
+        {/* Header */}
+        <div className="flex flex-col items-center justify-center mb-6">
+          <div className="flex items-center gap-2 justify-center">
+            <Sparkles className="text-pink-300 h-8 w-8" />
+            <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-teal-300 to-cyan-200">
+              Fairyland Web Synth
+            </h1>
+            <Sparkles className="text-pink-300 h-8 w-8" />
+          </div>
+          <div className="flex gap-4 mt-2">
+            <TreePine className="text-green-300 h-8 w-8" />
+            <Music className="text-blue-300 h-8 w-8" />
+            <Unicorn className="text-purple-300 h-8 w-8" />
+          </div>
+        </div>
+
+        {/* Controls */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <div className="space-y-4">
+            {/* Scale */}
+            <div className="flex flex-col gap-2">
+              <label className="text-white font-medium">Scale</label>
+              <Select value={scale} onValueChange={setScale}>
+                <SelectTrigger className="bg-white/10 border-purple-300/30 text-white">
+                  <SelectValue placeholder="Select scale" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="ionian">Ionian (Major)</SelectItem>
+                  <SelectItem value="dorian">Dorian</SelectItem>
+                  <SelectItem value="phrygian">Phrygian</SelectItem>
+                  <SelectItem value="lydian">Lydian</SelectItem>
+                  <SelectItem value="mixolydian">Mixolydian</SelectItem>
+                  <SelectItem value="aeolian">Aeolian (Minor)</SelectItem>
+                  <SelectItem value="locrian">Locrian</SelectItem>
+                  <SelectItem value="harmonicMinor">Harmonic Minor</SelectItem>
+                  <SelectItem value="melodicMinor">Melodic Minor</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Root Note */}
+            <div className="flex flex-col gap-2">
+              <label className="text-white font-medium">Root Note</label>
+              <Select value={root} onValueChange={setRoot}>
+                <SelectTrigger className="bg-white/10 border-purple-300/30 text-white">
+                  <SelectValue placeholder="Select root note" />
+                </SelectTrigger>
+                <SelectContent>
+                  {ROOTS.map(r => (
+                    <SelectItem key={r} value={r}>
+                      {r}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Octave */}
+            <div className="flex items-center gap-4">
+              <label className="text-white font-medium">Octave: {octave}</label>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setOctave(o => Math.max(1, o - 1))}
+                  disabled={octave <= 1}
+                  className="bg-white/20 border-teal-300/30 text-white hover:bg-white/30"
+                >
+                  -
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setOctave(o => Math.min(6, o + 1))}
+                  disabled={octave >= 6}
+                  className="bg-white/20 border-teal-300/30 text-white hover:bg-white/30"
+                >
+                  +
+                </Button>
+              </div>
+            </div>
+
+            {/* Forest Toggle */}
+            <Button
+              onClick={() => setForestOn(f => !f)}
+              className="bg-white/20 border-teal-300/30 text-white hover:bg-white/30 mt-4"
+            >
+              {forestOn ? "Mute Forest" : "Unmute Forest"}
+            </Button>
+          </div>
+
+          {/* ADSR & Effects */}
+          <div className="space-y-4">
+            <h3 className="text-white font-medium mb-2">ADSR & Effects</h3>
+
+            {/* Attack */}
+            <div className="space-y-1">
+              <div className="flex justify-between">
+                <label className="text-white text-sm">Attack: {attack.toFixed(2)}s</label>
+              </div>
+              <Slider
+                value={[attack]}
+                min={0.01}
+                max={2}
+                step={0.01}
+                onValueChange={([v]) => setAttack(v)}
+                className="py-1"
+              />
+            </div>
+
+            {/* Decay */}
+            <div className="space-y-1">
+              <div className="flex justify-between">
+                <label className="text-white text-sm">Decay: {decay.toFixed(2)}s</label>
+              </div>
+              <Slider
+                value={[decay]}
+                min={0.01}
+                max={2}
+                step={0.01}
+                onValueChange={([v]) => setDecay(v)}
+                className="py-1"
+              />
+            </div>
+
+            {/* Sustain */}
+            <div className="space-y-1">
+              <div className="flex justify-between">
+                <label className="text-white text-sm">Sustain: {sustain.toFixed(2)}</label>
+              </div>
+              <Slider
+                value={[sustain]}
+                min={0}
+                max={1}
+                step={0.01}
+                onValueChange={([v]) => setSustain(v)}
+                className="py-1"
+              />
+            </div>
+
+            {/* Release */}
+            <div className="space-y-1">
+              <div className="flex justify-between">
+                <label className="text-white text-sm">Release: {release.toFixed(2)}s</label>
+              </div>
+              <Slider
+                value={[release]}
+                min={0.01}
+                max={5}
+                step={0.01}
+                onValueChange={([v]) => setRelease(v)}
+                className="py-1"
+              />
+            </div>
+
+            {/* Delay */}
+            <div className="space-y-1 mt-2">
+              <div className="flex justify-between">
+                <label className="text-white text-sm">
+                  Delay: {(delayWet * 100).toFixed(0)}%
+                </label>
+              </div>
+              <Slider
+                value={[delayWet]}
+                min={0}
+                max={1}
+                step={0.01}
+                onValueChange={([v]) => setDelayWet(v)}
+                className="py-1"
+              />
+            </div>
+
+            {/* Reverb */}
+            <div className="space-y-1">
+              <div className="flex justify-between">
+                <label className="text-white text-sm">
+                  Reverb: {(reverbWet * 100).toFixed(0)}%
+                </label>
+              </div>
+              <Slider
+                value={[reverbWet]}
+                min={0}
+                max={1}
+                step={0.01}
+                onValueChange={([v]) => setReverbWet(v)}
+                className="py-1"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* On-Screen Keys */}
+        <OnScreenKeys
+          synth={synth}
+          scale={scale}
+          root={root}
+          octave={octave}
+          activeKeys={activeKeys}
+          setActiveKeys={setActiveKeys}
+        />
+
+        <p className="text-center text-white/80 mt-4">
+          Press A, S, D, F, G, H, J, K to play the scale!
+        </p>
+
+        {/* Decorations */}
+        <div className="absolute top-10 left-10 opacity-30">
+          <Sparkles className="text-pink-300 h-16 w-16" />
+        </div>
+        <div className="absolute bottom-10 right-10 opacity-30">
+          <Unicorn className="text-purple-300 h-16 w-16" />
+        </div>
+        <div className="absolute top-20 right-20 opacity-30">
+          <TreePine className="text-green-300 h-16 w-16" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// -------------------- OnScreenKeys COMPONENT --------------------
+function OnScreenKeys({
+  synth,
+  scale,
+  root,
+  octave,
+  activeKeys,
+  setActiveKeys,
+}: {
+  synth: Tone.PolySynth | null
+  scale: string
+  root: string
+  octave: number
+  activeKeys: Record<number, boolean>
+  setActiveKeys: React.Dispatch<React.SetStateAction<Record<number, boolean>>>
+}) {
+  // Recompute scale notes for the 8 on-screen keys
+  const scaleNotes = useMemo(() => {
+    const intervals = SCALES[scale as keyof typeof SCALES] || [0, 2, 4, 5, 7, 9, 11, 12]
+    return intervals.map(interval => {
+      const rootIndex = ROOTS.indexOf(root)
+      const totalSemitones = octave * 12 + rootIndex + interval
+      const noteIndex = totalSemitones % 12
+      const noteOctave = Math.floor(totalSemitones / 12)
+      return `${ROOTS[noteIndex]}${noteOctave}`
+    })
+  }, [scale, root, octave])
+
+  const handleMouseDown = (idx: number) => {
+    if (!synth) return
+    const note = scaleNotes[idx]
+    synth.triggerAttack(note)
+    setActiveKeys(prev => ({ ...prev, [idx]: true }))
+  }
+
+  const handleMouseUp = (idx: number) => {
+    if (!synth) return
+    const note = scaleNotes[idx]
+    synth.triggerRelease(note)
+    setActiveKeys(prev => ({ ...prev, [idx]: false }))
+  }
+
+  const handleMouseLeave = (idx: number) => {
+    if (!synth) return
+    if (activeKeys[idx]) {
+      const note = scaleNotes[idx]
+      synth.triggerRelease(note)
+      setActiveKeys(prev => ({ ...prev, [idx]: false }))
+    }
+  }
+
+  return (
+    <div className="flex justify-center gap-2 mb-2">
+      {scaleNotes.map((note, idx) => (
+        <button
+          key={idx}
+          className={`
+            ${KEY_COLORS[idx]}
+            ${activeKeys[idx] ? "opacity-80 translate-y-1" : "opacity-100"}
+            w-full h-32 rounded-lg shadow-lg transition-all duration-75 flex items-end justify-center pb-2
+            text-white font-medium border-b-4 border-white/20
+          `}
+          onMouseDown={() => handleMouseDown(idx)}
+          onMouseUp={() => handleMouseUp(idx)}
+          onMouseLeave={() => handleMouseLeave(idx)}
+          onTouchStart={() => handleMouseDown(idx)}
+          onTouchEnd={() => handleMouseUp(idx)}
+        >
+          {note}
+        </button>
+      ))}
+    </div>
+  )
+}