🎧 Sonora – MVP

🧩 Spotify integratie

• Gebruiker authenticeren via Spotify PKCE-flow
• Huidige track ophalen via /me/player/currently-playing
• Data beschikbaar maken in real-time (track wissel = update)

💿 Vinyl visualisatie (D3.js)

• SVG-vinyl renderen (halve plaat, minimalistisch)
• Rotatie-animatie starten bij is_playing = true, stoppen bij pauze
• Plaatgrootte aanpassen op basis van track.popularity
• Rotatiesnelheid koppelen aan duration_ms of popularity
• Groeven genereren met d3.arc (meer groeven = ouder nummer)

🌈 Kleur en sfeer

• Albumcoverkleur extraheren met node-vibrant
• Intensiteit van glow koppelen aan artist.popularity of followers.total

🧠 Data storytelling

• Mini-infobox met trackinformatie (titel, artiest, album, releasejaar, popularity)
• Tooltip bij hover over vinyl (bijv. genre of extra info)

🛠️ Architectuur / technische basis

• Spotify API ↔ D3-koppeling in Svelte (live reactive)
• Fallback-state bij geen actieve Spotify-track

🎨 Design & interactie

• Minimalistische interface met centrale vinyl
• Responsief gedrag (desktop eerst)
• Subtiele animatie-overgangen met D3-transitions of CSS transitions

🧾 Testing / MVP-criteria

• Vinyl draait realtime mee met Spotify-play/pause
• Plaat reageert op minstens 3 datafactoren (grootte, kleur, groeven)
• Visualisatie herlaadt automatisch bij track-change
• Performance blijft soepel bij updates