Sebastian Krüger
e50c8a2503
- 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>
· · ·
· ·
· ·
· ·
· ·
· ·
· ·
· ·
· ·
· ·
· ·
· ·
· · ·
PIVOINE.ART
Technology and sound, creating massive beats to push the boundaries of audio perception.
About
An immersive audio experience. Electronic music meets WebGL visualization. 5000 particles react to every frequency. The logo breathes with the beat.
Dark. Minimal. Precise.
Features
▸ WebGL Visualizer 5000 particles · 512 FFT · bass/mid/high reactivity
▸ Reactive Logo Canvas-based · audio-driven · mouse-aware
▸ Persistent Player Play · seek · volume · progress
▸ Web Audio API Real-time frequency analysis
▸ SPA Navigation htmx · smooth transitions · Alpine.js state
Stack
Hugo ─────────────── Static site generation
Tailwind CSS 4 ───── Utility-first styling
Alpine.js ────────── Lightweight reactivity
Three.js ─────────── WebGL rendering
Web Audio API ────── Frequency analysis
pnpm ─────────────── Package management
Development
# Install dependencies
pnpm install
# Development server
pnpm dev
# Build for production
pnpm build
Deploy
# Build image
docker build -t pivoine-art .
# Run container
docker run -p 8080:80 pivoine-art
Structure
├── assets/
│ ├── css/ # Tailwind source
│ └── js/ # Visualizer · Logo · Main
├── config/ # Hugo configuration
├── content/ # Markdown content
├── layouts/ # Hugo templates
└── static/ # Compiled assets
Author
Valknar valknar@pivoine.art
License
All audio content © Valknar. All rights reserved. Code: MIT