Interactive Camelot Wheel Harmonic Mixing Utility

Overview

A high-precision, interactive canvas-based utility that maps the Camelot Wheel to help DJs identify harmonically compatible musical keys. Designed for instant utility, it provides a clean, visual way to determine the next song's key.

Core Features

• Interactive Canvas Wheel: A high-resolution, vector-like rendering of the 12-position Camelot Wheel.
• Instant Compatibility Highlighting: Click any key to instantly highlight the 'Perfect Mix' (same key), 'Energy Boost' (move up/down), and 'Sub-harmonic' (adjacent inner/outer ring) keys.
• Key Metadata Display: When a key is selected, the interface displays the musical key (e.g., 8A / A-flat minor) and the recommended mix theory behind each suggestion.
• Mobile-Responsive Design: Canvas scales fluidly with the viewport to ensure usability on tablets and smartphones.
• Performance Optimized: Built with pure Vanilla JS and HTML5 Canvas for zero-latency interactions.

UI Layout

• Header: Simple, clean centered title with a brief "How to use" toggle button.
• Main Content Area: Centered container housing the responsive HTML5 Canvas element.
• Interactive Sidebar/Panel: Displays the current active key and a list of "Recommended Compatible Keys" with color-coded descriptions of why they work (e.g., "Energy Boost").
• Instructions Section: Minimalist text block below the wheel explaining the harmonic mixing method.

Design & Aesthetics

• Palette: High-key, vibrant light mode. Use whites (#FFFFFF) and light slates (#F1F5F9) for the background. Accent the wheel segments with soft pastels (Muted Teal, Soft Coral, Pale Yellow, Lavender) to indicate key sectors.
• Transitions: Use CSS transition properties for smooth hover effects on canvas sectors and modal entry/exit animations.
• Typography: Utilize clean, modern sans-serif fonts (e.g., Inter or system UI stacks) for maximum readability.

Developer Directives (CRITICAL)

• Single File: Everything (HTML, CSS, JS) must reside in one file. Use CDNs for any necessary assets.
• No Persistence: Do not use localStorage, sessionStorage, IndexedDB, or cookies. Maintain state using simple JS objects/variables.
• Security: Ensure the application works within a sandboxed iframe. Do not use alert(), prompt(), or confirm(). Use custom DIV-based modals if user interaction is needed.
• Light Mode Only: Strictly avoid dark mode implementation. Maintain a clean, professional SaaS aesthetic throughout.
• External Links: All links must have target="_blank" rel="noopener noreferrer".