Draw loops on the musical canvas

Advanced Controls

Saved Loops

No loops saved yet. Start drawing!

Shareable Link

To generate this application, you could use a prompt similar to this:

"Generate a single-page web application that functions as a **Musical Looper**. The app should use **HTML**, **Tailwind CSS** for styling, **Tone.js** for audio synthesis and sequencing, **LZ-String** for URL compression, and the **Gemini API** for LLM interaction.

**Core Functionality:** The application should feature a **single large musical canvas** where users can draw musical loops by dragging their mouse or finger. When a drawing is completed, it's immediately quantized to musical notes (soft piano sound) and harmonically snapped to any existing loops, or to a C Major scale if no loops are present.

**UI Elements:** - A main **Musical Canvas** for drawing. - A **"Save Latest Loop" button** below the canvas to add the current drawing to the composition. The current drawing should be visibly **thicker** than saved loops. - A **"Saved Loops" section** on the right side of the page, displaying a list of all saved loops. Each list item should include a miniature visual representation of the loop, an **"Isolate" button** (which plays only that loop and makes its line **bold** on the main canvas during playback), and a **"Delete" button**. - A **vertical highlight bar** should move left-to-right across the main musical canvas, synchronized with the overall music playback. This bar should be hidden when music is not playing. - An **"Advanced Controls" section** at the bottom-left of the page. - Inside "Advanced Controls": a **"Play Music" checkbox** to globally toggle all audio output (including highlight bar movement). - Inside "Advanced Controls": a **"✨ Get Idea for Canvas" button**, which is disabled unless at least one loop is saved. When clicked, it uses the Gemini API to generate a harmonically complementary drawing path on the canvas, based on the existing composition. - A **"Shareable Link"** below the "Saved Loops" list. This link's URL parameters should be compressed using LZ-String and encode the saved loops, allowing users to share their compositions. The app should load loops from this URL on page load.

**Visuals & UX:** - Maintain a dark theme with rounded corners on elements. - Ensure the layout is fully responsive and adaptable to different screen sizes. - Provide subtle visual feedback for actions (e.g., message box hovering to the right of the save button). - Avoid temporary status messages for routine actions. - Ensure Tone.js context starts on first user interaction. - All vertical staff lines should be removed from the canvas; only horizontal staff lines should be visible. - Implement robust error handling for API calls and drawing logic. "