Four hand-crafted interaction paradigms combining GPU shaders, magnetic vector physics, conic laser borders, and generative Web Audio synthesis.
Each button is built without external heavy animation libraries—leveraging pure hardware-accelerated CSS3 and Web Audio oscillators.
Uses a dual-layered CSS conic-gradient rotating continuously behind an inner clipping mask.
Upon hover, an automated horizontal chromatic dispersion bar sweeps across the typography with randomized keyframe glitching.
transform: translateZ(0)3.5s linear infinite
Calculates Euclidean distance and pitch/yaw rotation angles relative to button center in requestAnimationFrame.
Simultaneously, a cubic-bezier SVG liquid wave surges upward, creating an authentic fluid containment effect.
±18 deg 3D Perspectivecubic-bezier(0.34, 1.56, 0.64, 1)
Utilizes multi-layered stacked hard box-shadow offsets that mimic physical retro mechanical keyboard switches.
On hover, star streaks shoot along the radial vector with rapid scale transformation and perspective grid movement.
4 Stacked Box Shadows6px translateY on activeLeverages high-index backdrop blur filters with chromatic border shifting. A virtual plasma orb floats suspended inside the glass substrate, smoothly following cursor proximity with subtle lag for natural inertia.
backdrop-filter: blur(18px)0.12 lerp factorAll source code is cleanly decoupled into standard HTML, CSS, and vanilla JavaScript. Open in any browser, customize colors, or integrate into React, Vue, Svelte, or Astro with zero config.
git clone / open index.html