What it does

Shatter Bloom applies a cinematic wall-fracture effect to any image. Branching cracks propagate from an impact point, light pulses and seeps through the fissures, dust falls from the cracks, and the wall shatters with physics-driven fragments to reveal a radiant glow.

It runs entirely in the browser using Canvas — no WebGL, no dependencies.

Quick start

Include the script and CSS:

<link rel="stylesheet" href="style.css">
<img class="shatter-bloom" src="your-image.jpg" alt="">
<script src="breaking-wall.js"></script>

The plugin auto-attaches to all .shatter-bloom images. That's it.

Customizable via data attributes

Tune the effect directly on the image element:

<img
  class="shatter-bloom"
  src="photo.jpg"
  data-wall-duration="2"
  data-wall-fracture-count="55"
  data-wall-crack-branches="7"
  data-wall-crack-depth="5"
  data-wall-light-color="#fffbe6"
  data-wall-light-intensity="0.9"
  data-wall-shake-intensity="1"
  data-wall-auto-play="true"
/>

Cinematic Features

  • Branching crack tree — cracks propagate outward from a central impact point with organic branching
  • 5-phase animation — crack, rumble, light, break, reveal — each with independent timing
  • Volumetric light rays — pulsing god-rays through cracks
  • Dust & debris particles — small specks that fall and glow
  • Screen shake — subtle micro-tremors during rumble, heavier hit at break
  • 3D-like fragment physics — fragments push outward, scale down, rotate and fall
  • Beat-synced impact pulses — rhythmic hits synced to BPM