Earthquake Screen Shatter
The page shakes, cracks spread from a random point, then the whole screen breaks into shards and falls away. Everything resets on its own a few seconds later.
The code
<!-- The install snippet for this effect.
1. Press Run to see it on this page
2. Press Show to load the snippet
3. Press Copy and paste it before </body>
Options and setup notes are below. -->Questions
Does it break my layout?
No. It animates a transform on body and paints the cracks and shards in a fixed overlay above everything. Nothing in your own markup is touched, and the transform is cleared when it ends.
Can I trigger it on a click instead of page load?
Yes. Add data-autoplay="false" to the script tag and call window.__bgQuake.start() from your own handler. Calling start while it is already running does nothing, so double clicks are safe.
Why does the shake feel different each time?
The offsets are random every frame and the crack origin is picked at random inside the middle of the viewport, so no two runs look the same.
Is it heavy on the browser?
The shake is a single transform on body, which the compositor handles. The cracks are one SVG drawn once, and the shards are clip-path divs animated with CSS. Nothing runs after the sequence ends.
Will it work on a light site?
The shards are a dark fill by default, which reads as the page falling into blackness. On a light background change data-crack-colour to something dark so the crack lines stay visible against it.