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

@@ -1,23 +1,25 @@
<header class="fixed top-0 left-0 right-0 z-sticky bg-surface-0/80 backdrop-blur-md border-b border-border">
<nav class="container-wide flex items-center justify-between h-16">
{{/* Logo */}}
<a
href="{{ "/" | relURL }}"
class="flex items-center gap-3 group"
aria-label="{{ .Site.Title }} - Home"
>
<div class="flex items-center gap-3 group">
<canvas
id="logo-canvas"
hx-preserve="true"
class="w-8 h-8"
class="w-8 h-8 cursor-pointer"
width="32"
height="32"
aria-hidden="true"
@click="window.__pivoine?.visualizer?.nextVisualizer()"
title="Click to change visualizer"
></canvas>
<span class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors">
<a
href="{{ "/" | relURL }}"
class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors"
aria-label="{{ .Site.Title }} - Home"
>
VALKNAR'S
</span>
</a>
</a>
</div>
{{/* Navigation */}}
<ul