Files
pivoine.art/layouts/partials/header.html
Sebastian Krüger e50c8a2503 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>
2025-11-29 21:11:38 +01:00

47 lines
1.4 KiB
HTML
Executable File

<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 */}}
<div class="flex items-center gap-3 group">
<canvas
id="logo-canvas"
hx-preserve="true"
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>
<a
href="{{ "/" | relURL }}"
class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors"
aria-label="{{ .Site.Title }} - Home"
>
VALKNAR'S
</a>
</div>
{{/* Navigation */}}
<ul
class="flex items-center gap-4 md:gap-8"
x-data="{ path: window.location.pathname }"
@htmx:after-settle.window="path = window.location.pathname"
>
{{- range .Site.Menus.main }}
<li>
<a
href="{{ .URL }}"
class="text-sm transition-colors"
:class="path.startsWith('{{ .URL }}') ? 'text-text-primary border-b border-text-primary' : 'text-text-secondary hover:text-text-primary link-hover'"
>
{{ .Name }}
</a>
</li>
{{- end }}
</ul>
</nav>
</header>
{{/* Spacer for fixed header */}}
<div class="h-16" aria-hidden="true"></div>