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.