Sur

An interactive web experience showcasing physics-based wind chimes swinging from traditional roofs across multiple countries. Built with GSAP, Web Audio API, SVG, and glassmorphism UI.

Visit the live site ↗ GitHub Repository ↗
Role
Frontend & Animations
Creator
Arpit Tak
Stack
JS, GSAP, SVG, CSS3
Status
Live on Netlify
Demo
arpit-sur.netlify.app
Sur interactive wind chimes preview

Crafting the Experience

Sur brings traditional architectural heritage into an interactive browser environment. Wind chimes swing naturally with simulated physics, accompanied by authentic acoustic harmonics.

Complete Global Roofs

Generated and integrated custom architectural roof structures across traditional cultures—including Vietnam, South Korea, China, Turkey, and Spain.

Glassmorphism UI

Modernized the visual interface with frosted-glass navigation bars, translucent background blurs, and tactile controls.

Physics & Audio

GSAP-driven momentum simulation synchronized with the Web Audio API to reproduce the gentle clinking of resonant wind chimes.

Engineering Highlights

Responsive SVG Geometry

Every roof and chime component adapts responsively across viewports, scaling mathematical curves without pixelation on retina displays.

Custom Audio Controller

Tailored soundscape engine supporting subtle spatial panning, gentle wind oscillations, and responsive volume indicators.