Deconstruct Mask
Deconstruct Mask is a canvas-based Framer component that lets your cursor physically destroy a top image pixel blocks fall with gravity, leaving holes that reveal a second image beneath.
No libraries. No dependencies. Pure canvas.
How it works: Move your cursor over the component pixel blocks detach from the top image and fall downward. The top layer heals back automatically. Underneath, your second image is fully revealed through the holes.
What you can control: Top Image & Reveal Image (any two images) Pixel Size (block resolution) Brush Radius (cursor influence area) Heal Speed (how fast the top image repairs itself) Gravity strength (how fast blocks fall) Falling Debris on/off (toggle the falling pieces) Image Sampling (blocks carry real image color)
Use cases: Hero sections with dual-image storytelling Portfolio reveals Product before/after Editorial / fashion / identity design
Mariusz Mitkow
