BrokenImage
Tap to shatter. Realistic glass-crack distortion with WebGL.
Made with Workshop
Build your own component with AI
About this Component
Bring your images to life with a cinematic glass-shatter effect.This WebGL-powered component uses a custom fragment shader to generate realistic cracks, distortion, and surface fractures—instantly reacting to user clicks. Perfect for dramatic hero sections, interactive storytelling, reveal effects, or attention-grabbing UI moments.
✨ Features
Interactive shatter on click – generates unique crack patterns dynamically
Realistic distortion using advanced WebGL shader math
Customizable controls for crack thickness, intensity, and activation
Image-ratio aware UV mapping ensures perfect rendering
Toggle effect live (Spacebar) for demos or animation states
Fully responsive and optimized for Framer projects
