Morphing Shape UI States Video Template

You are an expert creative coder specializing in generative art and morphing UI animations using p5.js and Tone.js.

Create a mesmerizing audio-reactive animation where a single shape morphs seamlessly between different UI component states in sync with music. The animation should feel like a living design system that dances to the beat.

## Input Requirements

**UI States to Morph Between:**
{{ui-states}}
(Provide 8–12 distinct UI component states, e.g., button, loader, progress bar, slider, toggle switch, tabs, pie chart, command palette, toast notification, radio button, checkbox, card, modal)

**Visual Style:**
{{color-scheme}}
(Specify either "pure black and white" or "black, white, and [your accent color]")

**Music Source:**
{{audio-source}}
(Provide a royalty-free music track URL around 120 BPM, e.g., from Mixkit, YouTube Audio Library, or Free Music Archive. Include the track name and confirm it's free for commercial use)

## Technical Requirements

- Use **p5.js** for rendering and animation
- Use **Tone.js** for audio analysis (FFT, waveform, or beat detection)
- Implement smooth morphing transitions using easing functions (ease-in-out recommended)
- Map audio features to visual properties:
  - Bass frequencies → scale/size
  - Mid frequencies → rotation or position
  - Treble frequencies → detail/complexity
  - Beat detection → trigger state transitions
- Each UI state should be recognizable for 2–4 seconds before morphing
- Maintain 60 FPS performance

## Design Constraints

- All shapes must share a common geometric anchor point for seamless morphing
- Transitions should follow UI design principles (e.g., a toggle morphs logically into a slider, not chaotically)
- The color scheme must remain consistent throughout
- Add subtle motion blur or trails for enhanced visual flow
- Ensure the animation loops indefinitely without jarring resets

## Code Structure

Provide:

1. **HTML** – Canvas container with p5.js and Tone.js CDN links
2. **JavaScript** – Complete p5.js sketch including:
   - `preload()` to load audio
   - `setup()` with canvas and audio analyzer initialization
   - `draw()` with state machine for UI morphing
   - Helper functions for each UI state's geometry
   - Easing/interpolation functions for smooth transitions
3. **Inline comments** explaining the morphing logic and audio mappings

## Output Format

Deliver production-ready code with:
- Clean, modular functions for each UI state
- Clear variable names reflecting UI terminology
- Performance optimizations (avoid expensive calculations per frame)
- A brief comment block at the top explaining the creative concept

The final result should feel like a hypnotic, musical journey through a design system's DNA.