Draggable Sticker

Interactive 3D Draggable Sticker for Framer Bring realistic, physics-driven sticker mechanics to your Framer websites.

Interactive 3D Draggable Sticker for Framer Bring realistic, physics-driven sticker mechanics to your Framer websites. Built with custom WebGL fragment shaders and optimized React pointer events , this component simulates realistic peel mechanics, dynamic light reflection, material textures, 3D tilt, and interactive drop shadows as users grab and toss stickers across the screen. 🌌 What It Does 🏷 Real-Time Shader Peel Dynamics Deformable Mesh Grid: Generates a dynamic 32×32 vertex mesh grid in WebGL that bends, curls, and warps in real time as the sticker is peeled. Directional Peel Angles: Supports multiple peeling directions ( Pointer , Nearest Corner , Center Out , or fixed cardinal directions: Top , Bottom , Left , Right ) calculating exact trigonometric angles on grab. 🎛 3D Perspective Tilt & Drop Shadows Multi-Axis Inertia: Tilts along X and Y axes depending on drag velocity, complete with smooth spring decay on release. Dynamic Shadow Filters: Syncs CSS drop-shadow filters in real time with peel height and lift distance, blending blur, Y-offset, and opacity to convey true physical altitude. 🎨 Customization Options All properties are directly configurable through Framer’s Property Panel: Material & Depth Presets: Quick-select built-in physical presets including Paper , Vinyl , Glossy , Foil , Holographic , Matte , and Plastic . Depth & Tilt Dynamics: Choose overall interaction behavior from presets like Flat , Sticker , Card , Floating , or Extreme with fine-tune controls for max tilt degree and perspective depth. Peel Dynamics: Adjust Peel Speed , Peel Direction , Curl Amount , and spring decay physics. 🚀 Best Used For 🎨 Creative agency portfolio hero sections 🏷 Interactive e-commerce brand stickers & digital merch 📸 Playful interactive product badges & discount tags 🖥 Gamified landing pages & interactive design playgrounds Made with 💛 for @Karim Saif

WebGL fragment shaders