Smash is a breakable web page.

Clone the repo, and run npm i && npm start to start the development server. It's built with Snowpack so all the usual snowpack things work.

Smash uses Delaunator to create a mesh of triangles, and then it uses matter.js to simulate how the triangles would fall apart under the influence of gravity.

The lifecycle of the page is as follows;

• The page loads and index.js runs

• index.js creates a set of points that represent the edges of the page with some additional random points spread out across the viewport.

• Delaunator takes these points and creates a mesh of triangles to connect them all

• For each triangle the base div is cloned and injected in to the page body, and the div is clipped to the triangle using clip-path.

• A matching triangle is also created in the matter.js world.

• When the user clicks the "Smash" button the physics engine is started.

• On each tick of the physics engine the triangle polygons move, and their position and rotation data is converted to a CSS tranform that's applied to the corresponding triangle in the page.

• Everything falls apart.

PRs are welcome, especially for performance fixes.