Paper Fold Pro

Elevate your site with 3D fold effects.

PaperFold Pro is a high-performance, full-screen slideshow component for Framer designed to replicate the sophisticated, tactile image transitions found on elite creative studio websites. Unlike standard fades or slides, PaperFold Pro uses a mathematical perspective fold —animating complex clip-path polygons to create the illusion of a physical page being turned or a "book" being folded. The transition features a vertical seam that sweeps from bottom to top, accompanied by a dynamic glint line that mimics how light catches the edge of a physical fold. It’s the perfect centerpiece for luxury portfolios, architectural showcases, or cinematic landing pages. Key Features: Cinematic "Book-Fold" Transition: Images collapse and unfold using custom trapezoidal geometry for a unique 3D perspective. Dynamic Glint & Shadow: A realistic light-streak and soft shadow ride the transition seam to add depth and polish. Fully Customizable Typography: Control font family, size, and color for both labels and sub-labels, including responsive clamp() scaling. Smart Navigation: Includes interactive vertical progress dots, blur-backed navigation arrows, and keyboard support (Left/Right arrows). Performance Optimized: Built with framer-motion for buttery-smooth 60fps animations without heavy assets. Auto-Play with Progress Bar: Keep users engaged with an integrated, color-synced progress timer at the bottom of the viewport. How to Use: Add Slides: Open the Slides array in the property panel. Upload your high-resolution images and set your labels and sub-labels. Adjust Timing: Set your preferred Auto Play interval and use the Fold Speed control to fine-tune the snappiness of the transition. Style the Typography: Use the Label Font and Label Size controls to match your brand's aesthetic. The text will automatically scale beautifully across desktop and mobile. Configure Visuals: Adjust the Overlay Opacity to ensure your text remains legible against bright images, and toggle Dots or Arrows on/off to suit your design. Layout: Set the component to Fill or a Fixed aspect ratio within your Framer project. It is designed to look best when taking up the full viewport.

Elevate your site with 3D fold effects.