Thread by @elad_bezalel

Ok, this is a sign to post a long awaited thread about confetti & DOM aware physics
1/8🧵

At @lemonade_inc, we wanted to go beyond simple confetti when you buy a policy. we wanted a celebration that interact with the page itself. Here's how we brought this mockup to life:

Enter DOM-aware physics. I created a system where 2d elements don't just fall - they bounce off text, buttons, and other DOM elements in real-time.

For physics, i used Matter.js, it handles all complex calculations for realistic particle behavior.

Looking at their examples i encountered this:


What if i could trace the DOM and convert it to matter.js terrain? brm.io/matter-js/demo…

Applying CSS filters to the DOM container enhances key UI elements for better tracing, then capture a high-contrast B&W snapshot using
* if you use dom-to-image or html2canvas, replace it w/ modern-screenshot, it's a better solution w/ web worker support! github.com/qq15725/modern…

Convert snapshot to SVG paths using potrace, a powerful tracing solution. We leveraged @tomayac's excellent WASM wrapper:
github.com/tomayac/esm-po…

pathToVertices method converts SVG paths into vertices that matter can work with

* This conversion is resource intensive and slow. To maintain performance, we only run this once, making the 2D physics interactive but not reflective of dynamic DOM changes. brm.io/matter-js/docs…

Finally, we overlay a transparent Matter.js canvas and spread confetti with rects and forces. On click, confetti flies and bounces off DOM elements 🌟

You can even use this method to create fluid-like goo effects. Endless possibilities! 🚀