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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user