feat(visualizer): add multiple visualizers with mouse tracking and beat response

- Add BaseVisualizer class for shared visualizer logic
- Add Helix visualizer (DNA helix with rungs, beat compression/bounce)
- Add Tunnel visualizer (ring tunnel with depth parallax)
- Refactor SphereVisualizer to extend BaseVisualizer
- Add mouse tracking to all visualizers (canvas-relative, centered)
- Add visualizer switching via logo click (persisted to localStorage)
- Add beat-responsive bouncing and compression effects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-29 21:11:38 +01:00
parent d46e54b592
commit e50c8a2503
9 changed files with 609 additions and 55 deletions

View File

@@ -64,6 +64,18 @@
// Player UI component
Alpine.data('playerUI', () => ({
visualizerName: 'Sphere',
init() {
// Get initial visualizer name
this.$nextTick(() => {
const viz = window.__pivoine?.visualizer;
if (viz) {
this.visualizerName = viz.getCurrentName() || 'Sphere';
}
});
},
togglePlay() {
window.__pivoine?.audioManager?.toggle();
},
@@ -85,6 +97,12 @@
this.setVolume(this._previousVolume || 0.8);
}
},
cycleVisualizer() {
const viz = window.__pivoine?.visualizer;
if (viz) {
this.visualizerName = viz.nextVisualizer();
}
},
formatTime(seconds) {
if (!seconds || isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);