RippingPhoto
Ripping Photo is an interactive WebGL image component for Framer that lets users tear photos apart with a realistic drag gesture. As each image rips, the next one is revealed underneath with smooth motion and physics-based animation.
Built for modern websites and immersive experiences, this component transforms static image galleries into interactive, tactile visual storytelling.
Key Features
Click and drag to rip images in half with lifelike physics, shading, and paper-like motion.
Drag-based interaction creates a tactile experience that feels natural and engaging.
Each torn photo reveals the next, creating a continuous, seamless image transition.
Cycles through your image collection automatically, making it ideal for galleries and showcases.
Auto color matching per image
Custom gradients
Transparent background
Supports both portrait and landscape images with adaptive borders and scaling.
An optional animated cue that teaches users how to interact with the component.
Most image galleries are passive.This turns them into interactive experiences that users actively engage with. Make your images feel physical, interactive, and impossible to ignore.
Suman Debnath
