Peeling Cards
Use Cases
Portfolio Showcases: Reveal project details or next images with a unique tactile transition.
Interactive Storytelling: Guide users through a narrative where they "peel back" layers of content.
Hero Sections: Create an immediate "wow" factor with 3D depth and fluid animation.
Digital Lookbooks: Replicate the experience of flipping through a high-end physical magazine.
Features
Realistic 3D Physics: Powered by Three.js and custom vertex shaders for authentic paper-curl deformation.
Fully Customizable Geometry: Adjust card dimensions, scale, and border radius directly in Framer.
Interactive Controls: Switch between automatic cycling or manual "click-to-peel" interactions.
Adjustable 3D Tilt: Fine-tune the X, Y, and Z axes to match your site's perspective.
Performance Optimized: Includes an intersection observer to pause rendering when the component is off-screen.
Dynamic Animation: Control the peel speed, curl radius, and pause duration for the perfect flow.
Mariam Munawar
