a dancing cartoon

README.md

@@ -1,10 +1,13 @@
 ---
-title: Groovetoon Interactive
-emoji: 📊
-colorFrom: green
-colorTo: red
+title: GrooveToon Interactive 🎭
+colorFrom: gray
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/groove-character.js

@@ -0,0 +1,290 @@
+// GrooveToon Character Component - Animated SVG Character
+class GrooveCharacter extends HTMLElement {
+    constructor() {
+        super();
+        this.mood = 'happy';
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupInteractions();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 320px;
+                    height: 420px;
+                    position: relative;
+                }
+                
+                .character-container {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                }
+                
+                /* Body Parts with Animation Support */
+                .char-svg {
+                    width: 100%;
+                    height: 100%;
+                    filter: drop-shadow(0 20px 40px rgba(244, 63, 94, 0.3));
+                }
+                
+                #char-body {
+                    transform-origin: center bottom;
+                    transition: filter 0.1s ease;
+                }
+                
+                #char-head {
+                    transform-origin: center bottom;
+                }
+                
+                #char-arm-left, #char-arm-right {
+                    transform-origin: top center;
+                }
+                
+                #char-leg-left, #char-leg-right {
+                    transform-origin: top center;
+                }
+                
+                /* Mood-Based Face Styles */
+                .face-happy .eye { ry: 8; }
+                .face-happy .mouth {
+                    d: path("M 95 130 Q 120 150 145 130");
+                }
+                
+                .face-excited .eye {
+                    ry: 12;
+                    rx: 10;
+                }
+                .face-excited .mouth {
+                    d: path("M 100 125 Q 120 160 140 125 Z");
+                }
+                
+                .face-chill .eye { ry: 4; }
+                .face-chill .mouth {
+                    d: path("M 105 135 Q 120 140 135 135");
+                }
+                
+                .face-hype .eye {
+                    ry: 6;
+                    rx: 12;
+                }
+                .face-hype .mouth {
+                    d: path("M 90 120 Q 120 170 150 120");
+                }
+                
+                /* Gradient Definitions */
+                .grad-primary { fill: url(#gradPrimary); }
+                .grad-secondary { fill: url(#gradSecondary); }
+                .grad-accent { fill: url(#gradAccent); }
+                
+                /* Interactive Hover States */
+                .character-container:hover #char-body {
+                    filter: brightness(1.1);
+                }
+                
+                /* Glow Effects */
+                .glow-layer {
+                    position: absolute;
+                    inset: -20px;
+                    background: radial-gradient(ellipse at center, rgba(244, 63, 94, 0.2) 0%, transparent 70%);
+                    pointer-events: none;
+                    opacity: 0.5;
+                    animation: glow-pulse 2s ease-in-out infinite;
+                }
+                
+                @keyframes glow-pulse {
+                    0%, 100% { opacity: 0.3; transform: scale(1); }
+                    50% { opacity: 0.6; transform: scale(1.02); }
+                }
+                
+                /* Floating particles around character */
+                .orbit-particle {
+                    position: absolute;
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
+                    animation: orbit 4s linear infinite;
+                }
+                
+                .orbit-particle:nth-child(2) {
+                    animation-delay: -1.5s;
+                    width: 8px;
+                    height: 8px;
+                }
+                
+                .orbit-particle:nth-child(3) {
+                    animation-delay: -3s;
+                    width: 6px;
+                    height: 6px;
+                }
+                
+                @keyframes orbit {
+                    0% { transform: rotate(0deg) translateX(180px) rotate(0deg); }
+                    100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
+                }
+            </style>
+            
+            <div class="character-container">
+                <!-- Orbiting Particles -->
+                <div class="orbit-particle" style="left: 50%; top: 50%;"></div>
+                <div class="orbit-particle" style="left: 50%; top: 50%;"></div>
+                <div class="orbit-particle" style="left: 50%; top: 50%;"></div>
+                
+                <!-- Glow Background -->
+                <div class="glow-layer"></div>
+                
+                <!-- Main Character SVG -->
+                <svg class="char-svg" viewBox="0 0 240 320" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <!-- Dynamic Gradients -->
+                        <linearGradient id="gradPrimary" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stop-color="#f43f5e" />
+                            <stop offset="50%" stop-color="#e11d48" />
+                            <stop offset="100%" stop-color="#be123c" />
+                        </linearGradient>
+                        <linearGradient id="gradSecondary" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stop-color="#8b5cf6" />
+                            <stop offset="50%" stop-color="#7c3aed" />
+                            <stop offset="100%" stop-color="#6d28d9" />
+                        </linearGradient>
+                        <radialGradient id="gradAccent" cx="50%" cy="50%" r="50%">
+                            <stop offset="0%" stop-color="#fb7185" />
+                            <stop offset="100%" stop-color="#f43f5e" />
+                        </radialGradient>
+                        <filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                            <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
+                        </filter>
+                    </defs>
+                    
+                    <!-- Shadow -->
+                    <ellipse cx="120" cy="305" rx="60" ry="15" fill="rgba(0,0,0,0.3)" filter="url(#glow)"/>
+                    
+                    <!-- Left Arm (Behind Body) -->
+                    <g id="char-arm-left">
+                        <path d="M 75 140 Q 45 180 40 230" stroke="url(#gradSecondary)" stroke-width="20" fill="none" stroke-linecap="round"/>
+                        <circle cx="40" cy="235" r="15" fill="url(#gradAccent)"/>
+                    </g>
+                    
+                    <!-- Right Arm (Behind Body) -->
+                    <g id="char-arm-right">
+                        <path d="M 165 140 Q 195 180 200 230" stroke="url(#gradSecondary)" stroke-width="20" fill="none" stroke-linecap="round"/>
+                        <circle cx="200" cy="235" r="15" fill="url(#gradAccent)"/>
+                    </g>
+                    
+                    <!-- Left Leg -->
+                    <g id="char-leg-left">
+                        <path d="M 95 220 L 90 280" stroke="url(#gradSecondary)" stroke-width="18" fill="none" stroke-linecap="round"/>
+                        <ellipse cx="90" cy="285" rx="14" ry="10" fill="#fb7185"/>
+                    </g>
+                    
+                    <!-- Right Leg -->
+                    <g id="char-leg-right">
+                        <path d="M 145 220 L 150 280" stroke="url(#gradSecondary)" stroke-width="18" fill="none" stroke-linecap="round"/>
+                        <ellipse cx="150" cy="285" rx="14" ry="10" fill="#fb7185"/>
+                    </g>
+                    
+                    <!-- Body -->
+                    <g id="char-body">
+                        <!-- Main Body Shape -->
+                        <ellipse cx="120" cy="190" rx="55" ry="65" fill="url(#gradPrimary)"/>
+                        
+                        <!-- Body Details -->
+                        <circle cx="120" cy="170" r="25" fill="rgba(255,255,255,0.15)"/>
+                        <ellipse cx="120" cy="210" rx="30" ry="25" fill="rgba(255,255,255,0.1)"/>
+                        
+                        <!-- Music Note Decoration -->
+                        <g transform="translate(140, 160) rotate(15)">
+                            <text x="0" y="0" fill="rgba(255,255,255,0.4)" font-size="30" font-family="Fredoka One">♪</text>
+                        </g>
+                    </g>
+                    
+                    <!-- Head -->
+                    <g id="char-head">
+                        <!-- Head Base -->
+                        <circle cx="120" cy="85" r="60" fill="url(#gradPrimary)"/>
+                        
+                        <!-- Headphones -->
+                        <g id="headphones">
+                            <path d="M 55 85 Q 55 20 120 20 Q 185 20 185 85" stroke="url(#gradSecondary)" stroke-width="12" fill="none"/>
+                            <rect x="45" y="65" width="20" height="40" rx="10" fill="url(#gradSecondary)"/>
+                            <rect x="175" y="65" width="20" height="40" rx="10" fill="url(#gradSecondary)"/>
+                            <rect x="50" y="70" width="10" height="30" rx="5" fill="#a78bfa"/>
+                            <rect x="180" y="70" width="10" height="30" rx="5" fill="#a78bfa"/>
+                        </g>
+                        
+                        <!-- Face Group -->
+                        <g id="char-face" class="face-happy" data-mood="happy">
+                            <!-- Eyes -->
+                            <ellipse class="eye left" cx="95" cy="90" rx="10" ry="8" fill="white"/>
+                            <circle cx="95" cy="90" r="5" fill="#1a1a2e"/>
+                            <ellipse class="eye right" cx="145" cy="90" rx="10" ry="8" fill="white"/>
+                            <circle cx="145" cy="90" r="5" fill="#1a1a2e"/>
+                            
+                            <!-- Cheeks -->
+                            <ellipse cx="85" cy="105" rx="8" ry="5" fill="rgba(251,113,133,0.5)"/>
+                            <ellipse cx="155" cy="105" rx="8" ry="5" fill="rgba(251,113,133,0.5)"/>
+                            
+                            <!-- Mouth (dynamic path) -->
+                            <path class="mouth" d="M 95 110 Q 120 135 145 110" stroke="#1a1a2e" stroke-width="4" fill="none" stroke-linecap="round"/>
+                        </g>
+                        
+                        <!-- Antenna -->
+                        <line x1="120" y1="25" x2="120" y2="5" stroke="url(#gradSecondary)" stroke-width="4"/>
+                        <circle cx="120" cy="5" r="8" fill="url(#gradAccent)">
+                            <animate attributeName="opacity" values="1;0.5;1" dur="0.5s" repeatCount="indefinite"/>
+                        </circle>
+                    </g>
+                </svg>
+            </div>
+        `;
+    }
+
+    setupInteractions() {
+        // Click to change mood
+        this.shadowRoot.querySelector('.character-container').addEventListener('click', () => {
+            const moods = ['happy', 'excited', 'chill', 'hype'];
+            const currentIndex = moods.indexOf(this.mood);
+            this.mood = moods[(currentIndex + 1) % moods.length];
+            
+            const face = this.shadowRoot.getElementById('char-face');
+            face.setAttribute('class', `face-${this.mood}`);
+            face.setAttribute('data-mood', this.mood);
+            
+            // Create burst effect
+            const rect = this.getBoundingClientRect();
+            document.dispatchEvent(new CustomEvent('character-click', {
+                detail: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+            }));
+        });
+    }
+
+    // Public methods for external control
+    setMood(mood) {
+        this.mood = mood;
+        const face = this.shadowRoot?.getElementById('char-face');
+        if (face) {
+            face.setAttribute('class', `face-${mood}`);
+        }
+    }
+
+    pulse() {
+        const body = this.shadowRoot?.getElementById('char-body');
+        if (body) {
+            body.style.filter = 'brightness(1.4) drop-shadow(0 0 20px #f43f5e)';
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    body.style.filter = '';
+                }, 100);
+            });
+        }
+    }
+}
+
+customElements.define('groove-character', GrooveCharacter);

components/groove-controls.js

@@ -0,0 +1,404 @@
+// GrooveToon Controls Component
+class GrooveControls extends HTMLElement {
+    constructor() {
+        super();
+        this.isPlaying = false;
+        this.currentDance = 'bounce';
+        this.tempo = 120;
+        this.primaryColor = '#f43f5e';
+        this.secondaryColor = '#8b5cf6';
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+        this.setupAudioVisualization();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    max-width: 800px;
+                    margin: 0 auto;
+                    padding: 1.5rem;
+                }
+                
+                .controls-panel {
+                    background: rgba(0, 0, 0, 0.4);
+                    backdrop-filter: blur(20px);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 24px;
+                    padding: 1.5rem;
+                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+                }
+                
+                .main-controls {
+                    display: flex;
+                    gap: 1rem;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 1.5rem;
+                    flex-wrap: wrap;
+                }
+                
+                .play-btn {
+                    width: 72px;
+                    height: 72px;
+                    border-radius: 50%;
+                    border: none;
+                    background: linear-gradient(135deg, #f43f5e, #e11d48);
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    box-shadow: 0 10px 40px rgba(244, 63, 94, 0.4);
+                }
+                
+                .play-btn:hover {
+                    transform: scale(1.05);
+                    box-shadow: 0 15px 50px rgba(244, 63, 94, 0.5);
+                }
+                
+                .play-btn.playing {
+                    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+                    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
+                }
+                
+                .play-btn svg {
+                    width: 32px;
+                    height: 32px;
+                    color: white;
+                    margin-left: 4px;
+                }
+                
+                .play-btn.playing svg {
+                    margin-left: 0;
+                }
+                
+                .dance-grid {
+                    display: grid;
+                    grid-template-columns: repeat(4, 1fr);
+                    gap: 0.75rem;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .dance-btn {
+                    padding: 0.875rem 1rem;
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 12px;
+                    background: rgba(255, 255, 255, 0.05);
+                    color: rgba(255, 255, 255, 0.8);
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+                
+                .dance-btn:hover {
+                    background: rgba(255, 255, 255, 0.1);
+                    transform: translateY(-2px);
+                }
+                
+                .dance-btn.active {
+                    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(139, 92, 246, 0.2));
+                    border-color: #f43f5e;
+                    color: white;
+                }
+                
+                .dance-btn svg {
+                    width: 20px;
+                    height: 20px;
+                }
+                
+                .sliders-section {
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
+                    gap: 1.5rem;
+                    margin-bottom: 1.5rem;
+                }
+                
+                @media (max-width: 640px) {
+                    .sliders-section {
+                        grid-template-columns: 1fr;
+                    }
+                    .dance-grid {
+                        grid-template-columns: repeat(2, 1fr);
+                    }
+                }
+                
+                .slider-group {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .slider-label {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: rgba(255, 255, 255, 0.7);
+                    font-size: 0.875rem;
+                    font-weight: 600;
+                }
+                
+                .slider-value {
+                    color: #f43f5e;
+                    font-weight: 700;
+                }
+                
+                input[type="range"] {
+                    -webkit-appearance: none;
+                    width: 100%;
+                    height: 6px;
+                    border-radius: 3px;
+                    background: rgba(255, 255, 255, 0.1);
+                    outline: none;
+                    cursor: pointer;
+                }
+                
+                input[type="range"]::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 50%;
+                    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
+                    cursor: pointer;
+                    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
+                    transition: transform 0.2s;
+                }
+                
+                input[type="range"]::-webkit-slider-thumb:hover {
+                    transform: scale(1.1);
+                }
+                
+                .visualizer {
+                    height: 60px;
+                    display: flex;
+                    align-items: flex-end;
+                    justify-content: center;
+                    gap: 4px;
+                    padding: 1rem;
+                    background: rgba(0, 0, 0, 0.3);
+                    border-radius: 12px;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .viz-bar {
+                    width: 8px;
+                    background: linear-gradient(to top, #f43f5e, #8b5cf6);
+                    border-radius: 4px;
+                    transition: height 0.1s ease;
+                    min-height: 4px;
+                }
+                
+                .color-controls {
+                    display: flex;
+                    gap: 1rem;
+                    justify-content: center;
+                    flex-wrap: wrap;
+                }
+                
+                .color-group {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem 1rem;
+                    background: rgba(255, 255, 255, 0.05);
+                    border-radius: 12px;
+                }
+                
+                .color-label {
+                    font-size: 0.875rem;
+                    color: rgba(255, 255, 255, 0.7);
+                    font-weight: 600;
+                }
+                
+                input[type="color"] {
+                    width: 48px;
+                    height: 48px;
+                    border: none;
+                    border-radius: 12px;
+                    cursor: pointer;
+                    background: transparent;
+                }
+                
+                input[type="color"]::-webkit-color-swatch-wrapper {
+                    padding: 0;
+                    border-radius: 12px;
+                }
+                
+                input[type="color"]::-webkit-color-swatch {
+                    border: 2px solid rgba(255, 255, 255, 0.2);
+                    border-radius: 12px;
+                }
+            </style>
+            
+            <div class="controls-panel">
+                <!-- Audio Visualizer -->
+                <div class="visualizer" id="visualizer">
+                    ${Array(16).fill(0).map((_, i) => `<div class="viz-bar" style="height: ${4 + Math.random() * 20}px"></div>`).join('')}
+                </div>
+                
+                <!-- Main Play Control -->
+                <div class="main-controls">
+                    <button class="play-btn ${this.isPlaying ? 'playing' : ''}" id="playBtn">
+                        ${this.isPlaying ? 
+                            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>' :
+                            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'
+                        }
+                    </button>
+                </div>
+                
+                <!-- Dance Style Selector -->
+                <div class="dance-grid">
+                    <button class="dance-btn ${this.currentDance === 'bounce' ? 'active' : ''}" data-dance="bounce">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+                        Bounce
+                    </button>
+                    <button class="dance-btn ${this.currentDance === 'sway' ? 'active' : ''}" data-dance="sway">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M4 18h16M4 6h16"/></svg>
+                        Sway
+                    </button>
+                    <button class="dance-btn ${this.currentDance === 'spin' ? 'active' : ''}" data-dance="spin">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
+                        Spin
+                    </button>
+                    <button class="dance-btn ${this.currentDance === 'wave' ? 'active' : ''}" data-dance="wave">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s4-4 6-4 4 4 6 4 4-4 6-4"/></svg>
+                        Wave
+                    </button>
+                </div>
+                
+                <!-- Sliders -->
+                <div class="sliders-section">
+                    <div class="slider-group">
+                        <div class="slider-label">
+                            <span>Tempo (BPM)</span>
+                            <span class="slider-value" id="bpmValue">${this.tempo}</span>
+                        </div>
+                        <input type="range" id="tempoSlider" min="60" max="200" value="${this.tempo}">
+                    </div>
+                    <div class="slider-group">
+                        <div class="slider-label">
+                            <span>Groove Level</span>
+                            <span class="slider-value" id="grooveValue">⚡ Max</span>
+                        </div>
+                        <input type="range" id="grooveSlider" min="1" max="10" value="10">
+                    </div>
+                </div>
+                
+                <!-- Color Picker -->
+                <div class="color-controls">
+                    <div class="color-group">
+                        <span class="color-label">Primary</span>
+                        <input type="color" id="primaryColor" value="${this.primaryColor}">
+                    </div>
+                    <div class="color-group">
+                        <span class="color-label">Accent</span>
+                        <input type="color" id="secondaryColor" value="${this.secondaryColor}">
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    setupEventListeners() {
+        // Play button
+        const playBtn = this.shadowRoot.getElementById('playBtn');
+        playBtn.addEventListener('click', () => {
+            this.isPlaying = !this.isPlaying;
+            playBtn.classList.toggle('playing', this.isPlaying);
+            playBtn.innerHTML = this.isPlaying ? 
+                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>' :
+                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
+            
+            document.dispatchEvent(new CustomEvent('toggle-play', { 
+                detail: { playing: this.isPlaying } 
+            }));
+        });
+
+        // Dance buttons
+        this.shadowRoot.querySelectorAll('.dance-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.shadowRoot.querySelectorAll('.dance-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                this.currentDance = btn.dataset.dance;
+                document.dispatchEvent(new CustomEvent('dance-select', {
+                    detail: { dance: this.currentDance }
+                }));
+            });
+        });
+
+        // Tempo slider
+        const tempoSlider = this.shadowRoot.getElementById('tempoSlider');
+        const bpmValue = this.shadowRoot.getElementById('bpmValue');
+        tempoSlider.addEventListener('input', (e) => {
+            this.tempo = parseInt(e.target.value);
+            bpmValue.textContent = this.tempo;
+            document.dispatchEvent(new CustomEvent('tempo-change', {
+                detail: { tempo: this.tempo }
+            }));
+        });
+
+        // Color pickers
+        const primaryPicker = this.shadowRoot.getElementById('primaryColor');
+        const secondaryPicker = this.shadowRoot.getElementById('secondaryColor');
+        
+        const updateColors = () => {
+            this.primaryColor = primaryPicker.value;
+            this.secondaryColor = secondaryPicker.value;
+            
+            // Update CSS custom properties
+            const style = this.shadowRoot.style;
+            style.setProperty('--primary', this.primaryColor);
+            style.setProperty('--secondary', this.secondaryColor);
+            
+            document.dispatchEvent(new CustomEvent('color-change', {
+                detail: { primary: this.primaryColor, secondary: this.secondaryColor }
+            }));
+        };
+
+        primaryPicker.addEventListener('input', updateColors);
+        secondaryPicker.addEventListener('input', updateColors);
+    }
+
+    setupAudioVisualization() {
+        const visualizer = this.shadowRoot.getElementById('visualizer');
+        const bars = visualizer.querySelectorAll('.viz-bar');
+        
+        // Beat animation
+        document.addEventListener('beat', () => {
+            if (!this.isPlaying) return;
+            
+            bars.forEach((bar, i) => {
+                const height = 4 + Math.random() * 50 + (Math.sin(Date.now() / 200 + i) * 20);
+                bar.style.height = `${Math.min(height, 56)}px`;
+                bar.style.opacity = 0.5 + Math.random() * 0.5;
+            });
+        });
+
+        // Idle animation
+        const animate = () => {
+            if (!this.isPlaying) {
+                bars.forEach((bar, i) => {
+                    const height = 4 + Math.sin(Date.now() / 500 + i * 0.5) * 10 + 5;
+                    bar.style.height = `${height}px`;
+                    bar.style.opacity = 0.3;
+                });
+            }
+            requestAnimationFrame(animate);
+        };
+        animate();
+    }
+}
+
+customElements.define('groove-controls', GrooveControls);

components/groove-footer.js

@@ -0,0 +1,162 @@
+// GrooveToon Footer Component
+class GrooveFooter extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupShortcuts();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                
+                .footer {
+                    padding: 1.5rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 1rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.05);
+                }
+                
+                .shortcuts {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    font-size: 0.75rem;
+                    color: rgba(255, 255, 255, 0.5);
+                }
+                
+                .shortcut {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.375rem;
+                }
+                
+                .key {
+                    padding: 0.25rem 0.5rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 6px;
+                    font-weight: 600;
+                    color: rgba(255, 255, 255, 0.8);
+                    font-size: 0.625rem;
+                    text-transform: uppercase;
+                }
+                
+                .stats {
+                    display: flex;
+                    align-items: center;
+                    gap: 1.5rem;
+                    font-size: 0.875rem;
+                    color: rgba(255, 255, 255, 0.6);
+                }
+                
+                .stat {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .stat-value {
+                    color: #f43f5e;
+                    font-weight: 700;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 0.75rem;
+                }
+                
+                .social-btn {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 10px;
+                    background: rgba(255, 255, 255, 0.05);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: rgba(255, 255, 255, 0.7);
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                }
+                
+                .social-btn:hover {
+                    background: rgba(244, 63, 94, 0.2);
+                    border-color: rgba(244, 63, 94, 0.3);
+                    color: #f43f5e;
+                    transform: translateY(-2px);
+                }
+                
+                .social-btn svg {
+                    width: 20px;
+                    height: 20px;
+                }
+                
+                @media (max-width: 768px) {
+                    .footer {
+                        flex-direction: column;
+                        text-align: center;
+                        padding: 1rem;
+                    }
+                    
+                    .shortcuts {
+                        display: none;
+                    }
+                }
+            </style>
+            
+            <footer class="footer">
+                <div class="shortcuts">
+                    <span class="shortcut"><span class="key">Space</span> Play/Pause</span>
+                    <span class="shortcut"><span class="key">1-4</span> Dance</span>
+                    <span class="shortcut"><span class="key">↑↓</span> Tempo</span>
+                </div>
+                
+                <div class="stats">
+                    <div class="stat">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                        <span>Dance: <span class="stat-value" id="currentDose">Bounce</span></span>
+                    </div>
+                    <div class="stat">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v4"/></svg>
+                        <span>BPM: <span class="stat-value" id="currentBpm">120</span></span>
+                    </div>
+                </div>
+                
+                <div class="social-links">
+                    <button class="social-btn" title="Share" onclick="alert('Share feature coming soon!')">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+                    </button>
+                    <button class="social-btn" title="Fullscreen" onclick="document.documentElement.requestFullscreen()">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
+                    </button>
+                </div>
+            </footer>
+        `;
+    }
+
+    setupShortcuts() {
+        // Update stats display
+        document.addEventListener('dance-change', (e) => {
+            const doseEl = this.shadowRoot.getElementById('currentDose');
+            if (doseEl) doseEl.textContent = e.detail.charAt(0).toUpperCase() + e.detail.slice(1);
+        });
+
+        document.addEventListener('tempo-change', (e) => {
+            const bpmEl = this.shadowRoot.getElementById('currentBpm');
+            if (bpmEl) bpmEl.textContent = e.detail.tempo;
+        });
+    }
+}
+
+customElements.define('groove-footer', GrooveFooter);

components/groove-header.js

@@ -0,0 +1,140 @@
+// GrooveToon Header Component
+class GrooveHeader extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                .header {
+                    padding: 1.5rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-family: 'Fredoka One', cursive;
+                    font-size: 1.75rem;
+                    color: white;
+                    text-decoration: none;
+                    cursor: pointer;
+                }
+                .logo-icon {
+                    width: 48px;
+                    height: 48px;
+                    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
+                    border-radius: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    animation: logo-bounce 2s ease-in-out infinite;
+                    box-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
+                }
+                @keyframes logo-bounce {
+                    0%, 100% { transform: scale(1) rotate(-5deg); }
+                    50% { transform: scale(1.05) rotate(5deg); }
+                }
+                .logo-text {
+                    background: linear-gradient(90deg, #f43f5e, #8b5cf6);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                .nav-link {
+                    color: rgba(255, 255, 255, 0.7);
+                    text-decoration: none;
+                    font-weight: 600;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    border-radius: 9999px;
+                    transition: all 0.3s ease;
+                }
+                .nav-link:hover {
+                    color: white;
+                    background: rgba(255, 255, 255, 0.1);
+                }
+                .status {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    background: rgba(139, 92, 246, 0.2);
+                    border: 1px solid rgba(139, 92, 246, 0.3);
+                    border-radius: 9999px;
+                    font-size: 0.875rem;
+                    font-weight: 600;
+                }
+                .status-dot {
+                    width: 8px;
+                    height: 8px;
+                    background: #8b5cf6;
+                    border-radius: 50%;
+                    animation: pulse 1.5s ease-in-out infinite;
+                }
+                .status.playing .status-dot {
+                    background: #f43f5e;
+                    animation: pulse 0.5s ease-in-out infinite;
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    .header {
+                        padding: 1rem;
+                    }
+                }
+            </style>
+            <header class="header">
+                <a href="index.html" class="logo">
+                    <div class="logo-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M9 18V5l12-2v13"></path>
+                            <circle cx="6" cy="18" r="3"></circle>
+                            <circle cx="18" cy="16" r="3"></circle>
+                        </svg>
+                    </div>
+                    <span class="logo-text">GrooveToon</span>
+                </a>
+                <nav class="nav-links">
+                    <a href="index.html" class="nav-link">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                        Stage
+                    </a>
+                    <a href="#" class="nav-link" onclick="event.preventDefault(); alert('Studio coming soon!')">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v14a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v4a7 7 0 0 1-14 0v-4"></path><line x1="12" y1="19" x2="12" y2="22"></line></svg>
+                        Studio
+                    </a>
+                </nav>
+                <div class="status" id="status">
+                    <span class="status-dot"></span>
+                    <span id="status-text">Ready to Groove</span>
+                </div>
+            </header>
+        `;
+
+        // Listen for play state changes
+        document.addEventListener('toggle-play', (e) => {
+            const status = this.shadowRoot.getElementById('status');
+            const statusText = this.shadowRoot.getElementById('status-text');
+            status.classList.toggle('playing', e.detail.playing);
+            statusText.textContent = e.detail.playing ? 'Dancing!' : 'Ready to Groove';
+        });
+    }
+}
+
+customElements.define('groove-header', GrooveHeader);

index.html

@@ -1,19 +1,97 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GrooveToon - Interactive Dancing Character</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#fff1f2',
+                            100: '#ffe4e6',
+                            200: '#fecdd3',
+                            300: '#fda4af',
+                            400: '#fb7185',
+                            500: '#f43f5e',
+                            600: '#e11d48',
+                            700: '#be123c',
+                            800: '#9f1239',
+                            900: '#881337',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        }
+                    },
+                    animation: {
+                        'bounce-slow': 'bounce 2s infinite',
+                        'pulse-slow': 'pulse 3s infinite',
+                        'spin-slow': 'spin 8s linear infinite',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-neutral-950 text-white min-h-screen overflow-x-hidden">
+    <!-- WebGL Background Canvas -->
+    <canvas id="bgCanvas" class="fixed inset-0 w-full h-full pointer-events-none"></canvas>
+    
+    <!-- Main Content -->
+    <div class="relative z-10 min-h-screen flex flex-col">
+        <!-- Header -->
+        <groove-header></groove-header>
+        
+        <!-- Main Stage -->
+        <main class="flex-1 flex flex-col items-center justify-center px-4 py-8">
+            <!-- Dance Floor -->
+            <div class="relative w-full max-w-4xl">
+                <!-- Stage Lights -->
+                <div class="absolute -top-20 left-1/4 w-32 h-32 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div>
+                <div class="absolute -top-20 right-1/4 w-32 h-32 bg-secondary-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
+                
+                <!-- Spotlight -->
+                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-[600px] bg-gradient-to-b from-primary-500/10 to-transparent pointer-events-none"></div>
+                
+                <!-- Character Container -->
+                <div class="relative flex justify-center items-end min-h-[500px] pb-8">
+                    <groove-character id="dancer"></groove-character>
+                </div>
+                
+                <!-- Floor Reflection -->
+                <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[80%] h-24 bg-gradient-to-t from-primary-500/10 to-transparent rounded-full blur-xl"></div>
+            </div>
+            
+            <!-- Controls -->
+            <groove-controls></groove-controls>
+        </main>
+        
+        <!-- Footer -->
+        <groove-footer></groove-footer>
+    </div>
+    
+    <!-- Scripts -->
+    <script src="components/groove-header.js"></script>
+    <script src="components/groove-character.js"></script>
+    <script src="components/groove-controls.js"></script>
+    <script src="components/groove-footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,443 @@
+// GrooveToon Interactive - Main Script
+
+// Global State
+const state = {
+    isPlaying: false,
+    currentDance: 'bounce',
+    tempo: 120,
+    accentColor: 'primary',
+    secondaryColor: 'secondary',
+    audioContext: null,
+    beatInterval: null,
+    particles: [],
+    characterMood: 'happy'
+};
+
+// Color Themes
+const themes = {
+    primary: {
+        500: '#f43f5e',
+        600: '#e11d48',
+        400: '#fb7185'
+    },
+    secondary: {
+        500: '#8b5cf6',
+        600: '#7c3aed',
+        400: '#a78bfa'
+    }
+};
+
+// Dance Moves Library
+const danceMoves = {
+    bounce: {
+        name: 'Bounce',
+        css: {
+            body: 'animation: dance-bounce 0.5s ease-in-out infinite',
+            arms: 'animation: dance-wave 1s ease-in-out infinite',
+            head: 'animation: dance-head-bop 0.5s ease-in-out infinite'
+        }
+    },
+    sway: {
+        name: 'Sway',
+        css: {
+            body: 'animation: dance-sway 2s ease-in-out infinite',
+            arms: 'animation: dance-wave 2s ease-in-out infinite reverse',
+            head: 'animation: dance-sway 2s ease-in-out infinite 0.5s'
+        }
+    },
+    spin: {
+        name: 'Spin',
+        css: {
+            body: 'animation: dance-spin 2s ease-in-out infinite',
+            arms: 'animation: dance-sway 1s ease-in-out infinite',
+            head: 'animation: none'
+        }
+    },
+    wave: {
+        name: 'Wave',
+        css: {
+            body: 'animation: float-gentle 3s ease-in-out infinite',
+            arms: 'animation: dance-wave 0.5s ease-in-out infinite',
+            head: 'animation: dance-head-bop 0.25s ease-in-out infinite'
+        }
+    },
+    idle: {
+        name: 'Idle',
+        css: {
+            body: 'animation: float-gentle 4s ease-in-out infinite',
+            arms: 'animation: none',
+            head: 'animation: none'
+        }
+    }
+};
+
+// Audio System
+class AudioEngine {
+    constructor() {
+        this.ctx = null;
+        this.masterGain = null;
+        this.isInitialized = false;
+    }
+
+    init() {
+        if (this.isInitialized) return;
+        this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+        this.masterGain = this.ctx.createGain();
+        this.masterGain.gain.value = 0.3;
+        this.masterGain.connect(this.ctx.destination);
+        this.isInitialized = true;
+    }
+
+    playKick(time) {
+        const osc = this.ctx.createOscillator();
+        const gain = this.ctx.createGain();
+        
+        osc.frequency.setValueAtTime(150, time);
+        osc.frequency.exponentialRampToValueAtTime(0.01, time + 0.5);
+        
+        gain.gain.setValueAtTime(1, time);
+        gain.gain.exponentialRampToValueAtTime(0.01, time + 0.5);
+        
+        osc.connect(gain);
+        gain.connect(this.masterGain);
+        
+        osc.start(time);
+        osc.stop(time + 0.5);
+    }
+
+    playHiHat(time) {
+        const bufferSize = this.ctx.sampleRate * 0.1;
+        const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+        const data = buffer.getChannelData(0);
+        
+        for (let i = 0; i < bufferSize; i++) {
+            data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufferSize, 2);
+        }
+        
+        const noise = this.ctx.createBufferSource();
+        noise.buffer = buffer;
+        
+        const filter = this.ctx.createBiquadFilter();
+        filter.type = 'highpass';
+        filter.frequency.value = 5000;
+        
+        const gain = this.ctx.createGain();
+        gain.gain.value = 0.3;
+        
+        noise.connect(filter);
+        filter.connect(gain);
+        gain.connect(this.masterGain);
+        
+        noise.start(time);
+    }
+
+    playSnare(time) {
+        const bufferSize = this.ctx.sampleRate * 0.2;
+        const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+        const data = buffer.getChannelData(0);
+        
+        for (let i = 0; i < bufferSize; i++) {
+            data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (this.ctx.sampleRate * 0.05));
+        }
+        
+        const noise = this.ctx.createBufferSource();
+        noise.buffer = buffer;
+        
+        const filter = this.ctx.createBiquadFilter();
+        filter.type = 'highpass';
+        filter.frequency.value = 1000;
+        
+        const gain = this.ctx.createGain();
+        gain.gain.setValueAtTime(0.5, time);
+        gain.gain.exponentialRampToValueAtTime(0.01, time + 0.2);
+        
+        noise.connect(filter);
+        filter.connect(gain);
+        gain.connect(this.masterGain);
+        
+        noise.start(time);
+    }
+
+    setTempo(bpm) {
+        state.tempo = bpm;
+        if (state.isPlaying) {
+            this.stopBeat();
+            this.startBeat();
+        }
+    }
+
+    startBeat() {
+        this.init();
+        const beatDuration = 60 / state.tempo;
+        let beatCount = 0;
+        
+        const scheduleBeat = () => {
+            const now = this.ctx.currentTime;
+            const nextBeat = Math.ceil(now / beatDuration) * beatDuration;
+            
+            this.playKick(nextBeat);
+            if (beatCount % 2 === 1) this.playSnare(nextBeat);
+            this.playHiHat(nextBeat + beatDuration / 2);
+            
+            beatCount++;
+            
+            const delay = (nextBeat - now) * 1000;
+            this.beatTimeout = setTimeout(scheduleBeat, delay);
+        };
+        
+        scheduleBeat();
+        
+        // Visual beat indicator
+        state.beatInterval = setInterval(() => {
+            document.dispatchEvent(new CustomEvent('beat'));
+        }, beatDuration * 1000);
+    }
+
+    stopBeat() {
+        clearTimeout(this.beatTimeout);
+        clearInterval(state.beatInterval);
+    }
+}
+
+// Visual Effects Engine
+class VisualEffects {
+    constructor() {
+        this.canvas = document.getElementById('bgCanvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.particles = [];
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+        this.animate();
+    }
+
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+
+    createParticle(x, y, type = 'sparkle') {
+        const particle = {
+            x, y,
+            vx: (Math.random() - 0.5) * 4,
+            vy: -Math.random() * 3 - 1,
+            life: 1,
+            decay: 0.02,
+            size: Math.random() * 4 + 2,
+            hue: Math.random() > 0.5 ? 348 : 262, // primary or secondary hue
+            type
+        };
+        this.particles.push(particle);
+    }
+
+    createBurst(x, y) {
+        for (let i = 0; i < 20; i++) {
+            this.createParticle(x, y, 'burst');
+        }
+    }
+
+    animate() {
+        this.ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // Draw connecting lines between nearby particles
+        for (let i = 0; i < this.particles.length; i++) {
+            for (let j = i + 1; j < this.particles.length; j++) {
+                const dx = this.particles[i].x - this.particles[j].x;
+                const dy = this.particles[i].y - this.particles[j].y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                
+                if (dist < 100) {
+                    this.ctx.beginPath();
+                    this.ctx.strokeStyle = `hsla(${this.particles[i].hue}, 70%, 60%, ${0.1 * (1 - dist/100)})`;
+                    this.ctx.lineWidth = 1;
+                    this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
+                    this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
+                    this.ctx.stroke();
+                }
+            }
+        }
+
+        // Update and draw particles
+        this.particles = this.particles.filter(p => {
+            p.x += p.vx;
+            p.y += p.vy;
+            p.vy += 0.05; // gravity
+            p.life -= p.decay;
+
+            if (p.life > 0) {
+                this.ctx.beginPath();
+                this.ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
+                this.ctx.fillStyle = `hsla(${p.hue}, 80%, 60%, ${p.life})`;
+                this.ctx.fill();
+                return true;
+            }
+            return false;
+        });
+
+        // Draw subtle grid
+        this.drawGrid();
+
+        requestAnimationFrame(() => this.animate());
+    }
+
+    drawGrid() {
+        const time = Date.now() * 0.001;
+        const gridSize = 50;
+        
+        this.ctx.strokeStyle = 'rgba(244, 63, 94, 0.03)';
+        this.ctx.lineWidth = 1;
+
+        for (let x = 0; x < this.canvas.width; x += gridSize) {
+            const wave = Math.sin(x * 0.01 + time) * 10;
+            this.ctx.beginPath();
+            this.ctx.moveTo(x, 0);
+            this.ctx.lineTo(x + wave, this.canvas.height);
+            this.ctx.stroke();
+        }
+
+        for (let y = 0; y < this.canvas.height; y += gridSize) {
+            const wave = Math.cos(y * 0.01 + time) * 10;
+            this.ctx.beginPath();
+            this.ctx.moveTo(0, y);
+            this.ctx.lineTo(this.canvas.width, y + wave);
+            this.ctx.stroke();
+        }
+    }
+}
+
+// Character Controller
+class CharacterController {
+    constructor() {
+        this.element = document.getElementById('dancer');
+        this.currentMove = 'idle';
+    }
+
+    setDance(moveName) {
+        this.currentMove = moveName;
+        const move = danceMoves[moveName] || danceMoves.idle;
+        
+        // Apply CSS animations to character parts
+        const characterParts = this.element.shadowRoot;
+        if (!characterParts) return;
+
+        const body = characterParts.getElementById('char-body');
+        const leftArm = characterParts.getElementById('char-arm-left');
+        const rightArm = characterParts.getElementById('char-arm-right');
+        const head = characterParts.getElementById('char-head');
+
+        if (body) body.style.cssText = move.css.body;
+        if (leftArm) leftArm.style.cssText = move.css.arms;
+        if (rightArm) rightArm.style.cssText = move.css.arms + ';animation-direction: reverse;';
+        if (head) head.style.cssText = move.css.head;
+
+        // Dispatch event for UI update
+        document.dispatchEvent(new CustomEvent('dance-change', { detail: moveName }));
+    }
+
+    setMood(mood) {
+        state.characterMood = mood;
+        const characterParts = this.element.shadowRoot;
+        if (!characterParts) return;
+
+        const face = characterParts.getElementById('char-face');
+        if (face) {
+            face.setAttribute('data-mood', mood);
+        }
+    }
+
+    pulse() {
+        const body = this.element.shadowRoot?.getElementById('char-body');
+        if (body) {
+            body.style.filter = 'brightness(1.3)';
+            setTimeout(() => {
+                body.style.filter = 'brightness(1)';
+            }, 100);
+        }
+    }
+}
+
+// Main App Controller
+class GrooveApp {
+    constructor() {
+        this.audio = new AudioEngine();
+        this.visuals = new VisualEffects();
+        this.character = new CharacterController();
+        
+        this.initListeners();
+        this.character.setDance('idle');
+    }
+
+    initListeners() {
+        // Play/Pause
+        document.addEventListener('toggle-play', (e) => {
+            state.isPlaying = e.detail.playing;
+            if (state.isPlaying) {
+                this.audio.startBeat();
+                this.character.setDance(state.currentDance);
+            } else {
+                this.audio.stopBeat();
+                this.character.setDance('idle');
+            }
+        });
+
+        // Dance change
+        document.addEventListener('dance-select', (e) => {
+            state.currentDance = e.detail.dance;
+            if (state.isPlaying) {
+                this.character.setDance(state.currentDance);
+            }
+        });
+
+        // Tempo change
+        document.addEventListener('tempo-change', (e) => {
+            this.audio.setTempo(e.detail.tempo);
+        });
+
+        // Beat event
+        document.addEventListener('beat', () => {
+            if (state.isPlaying) {
+                this.character.pulse();
+                // Random particles
+                const x = Math.random() * window.innerWidth;
+                const y = window.innerHeight - 200;
+                this.visuals.createParticle(x, y);
+            }
+        });
+
+        // Color change
+        document.addEventListener('color-change', (e) => {
+            const { primary, secondary } = e.detail;
+            document.documentElement.style.setProperty('--primary-hue', this.hexToHue(primary));
+            document.documentElement.style.setProperty('--secondary-hue', this.hexToHue(secondary));
+        });
+
+        // Click effects
+        document.addEventListener('click', (e) => {
+            if (e.target.closest('button') || e.target.closest('.control-btn')) {
+                this.visuals.createBurst(e.clientX, e.clientY);
+            }
+        });
+    }
+
+    hexToHue(hex) {
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        if (max !== min) {
+            const d = max - min;
+            h = max === r ? (g - b) / d + (g < b ? 6 : 0) :
+                max === g ? (b - r) / d + 2 :
+                (r - g) / d + 4;
+            h *= 60;
+        }
+        return h;
+    }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.grooveApp = new GrooveApp();
+});

style.css

@@ -1,28 +1,191 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom CSS for GrooveToon */
+@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap');
+
+/* CSS Variables for Theme */
+:root {
+    --primary-hue: 348;
+    --secondary-hue: 262;
+    --bg-luminance: 8%;
+    --glow-strength: 1;
+}
+
+* {
+    font-family: 'Nunito', sans-serif;
+}
+
+h1, h2, h3, .font-display {
+    font-family: 'Fredoka One', cursive;
+}
+
+/* Smooth Transitions */
+* {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 200ms;
+}
+
+/* Glass Effect */
+.glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-dark {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Neon Glow Effects */
+.neon-primary {
+    box-shadow: 0 0 20px hsla(var(--primary-hue), 90%, 60%, 0.5),
+                0 0 40px hsla(var(--primary-hue), 90%, 60%, 0.3),
+                0 0 60px hsla(var(--primary-hue), 90%, 60%, 0.1);
+}
+
+.neon-secondary {
+    box-shadow: 0 0 20px hsla(var(--secondary-hue), 90%, 60%, 0.5),
+                0 0 40px hsla(var(--secondary-hue), 90%, 60%, 0.3),
+                0 0 60px hsla(var(--secondary-hue), 90%, 60%, 0.1);
+}
+
+/* Character Animations */
+@keyframes dance-bounce {
+    0%, 100% { transform: translateY(0) scale(1); }
+    50% { transform: translateY(-20px) scale(1.02); }
+}
+
+@keyframes dance-sway {
+    0%, 100% { transform: rotate(-5deg); }
+    50% { transform: rotate(5deg); }
+}
+
+@keyframes dance-spin {
+    0% { transform: rotate(0deg) scale(1); }
+    50% { transform: rotate(180deg) scale(1.1); }
+    100% { transform: rotate(360deg) scale(1); }
+}
+
+@keyframes dance-wave {
+    0%, 100% { transform: rotate(-20deg) translateY(0); }
+    25% { transform: rotate(10deg) translateY(-10px); }
+    50% { transform: rotate(-10deg) translateY(0); }
+    75% { transform: rotate(20deg) translateY(-10px); }
+}
+
+@keyframes dance-head-bop {
+    0%, 100% { transform: rotate(0deg) translateY(0); }
+    25% { transform: rotate(-10deg) translateY(5px); }
+    50% { transform: rotate(0deg) translateY(0); }
+    75% { transform: rotate(10deg) translateY(5px); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes float-gentle {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes glow-pulse {
+    0%, 100% { filter: brightness(1) drop-shadow(0 0 5px currentColor); }
+    50% { filter: brightness(1.2) drop-shadow(0 0 20px currentColor); }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Particle Effects */
+@keyframes particle-float {
+    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.particle {
+    position: fixed;
+    pointer-events: none;
+    animation: particle-float linear infinite;
 }
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #171717;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #f43f5e, #8b5cf6);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #fb7185, #a78bfa);
+}
+
+/* Range Slider Styling */
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-track {
+    background: rgba(255, 255, 255, 0.1);
+    height: 6px;
+    border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    margin-top: -7px;
+    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
+}
+
+input[type="range"]::-moz-range-track {
+    background: rgba(255, 255, 255, 0.1);
+    height: 6px;
+    border-radius: 3px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    border: none;
+    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
+}
+
+/* Beat Indicator */
+.beat-bar {
+    animation: beat-pulse 0.5s ease-in-out;
+}
+
+@keyframes beat-pulse {
+    0%, 100% { transform: scaleY(1); }
+    50% { transform: scaleY(2); }
+}
+
+/* Responsive Touch Targets */
+@media (hover: none) and (pointer: coarse) {
+    button, .control-btn {
+        min-height: 44px;
+        min-width: 44px;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}