tarikurrahmanbd/interactive-glass-shattering-simulation

Interactive Glass Shattering Simulation is a web based visual toy that recreates the look and sound of glass breaking, right inside your browser. Click anywhere on the screen and the app draws a realistic crack pattern spreading out from that point, complete with impact rings and small dust branches. The shattering effect is paired with physics for the debris itself. Individual glass shards and tiny dust particles fly outward from the click point with their own velocity, gravity pull, and rotation, so each break looks a little different from the last. A glass smashing sound effect plays alongside a screen shake animation, which together give the interaction a satisfying, tactile feel rather than a flat visual effect. The interface uses a glassmorphic design, meaning translucent, frosted panels layered over a background, and it is built to work well on both desktop and mobile browsers. For anyone who wants to experiment with the effect itself, the project includes a Tweakpane control panel that lets you adjust settings like crack radius, how many cracks radiate out, the force applied to particles, gravity strength, and how strong the screen shake is, all while the simulation is running. Under the hood, this is a plain HTML, CSS, and JavaScript project with no framework. The visuals rely heavily on SVG filters, including feTurbulence and feDisplacementMap to create the stressed, cracked texture of the glass, feGaussianBlur for soft lighting and depth, and feColorMatrix to fine tune transparency, shadows, and the frosted white edges of each shard. Because it runs entirely in the browser with no backend or build step, trying it out just means cloning the repository and opening the page. This project would appeal to front-end developers curious about SVG filter effects and particle animation, or anyone looking for a fun interactive demo to click around in.