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.
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.
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.
