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

✂️ Realistic Photo Tearing

Click and drag to rip images in half with lifelike physics, shading, and paper-like motion.

🎮 Gesture-Based Interaction

Drag-based interaction creates a tactile experience that feels natural and engaging.

🖼️ Dynamic Image Reveal

Each torn photo reveals the next, creating a continuous, seamless image transition.

🔁 Continuous Loop System

Cycles through your image collection automatically, making it ideal for galleries and showcases.

🌈 Adaptive Background Modes

• Auto color matching per image

• Custom gradients

• Transparent background

📱 Orientation-Aware Layout

Supports both portrait and landscape images with adaptive borders and scaling.

👆 Hand Hint Animation

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.