3D Magazine
Interactive 3D component for Framer, featuring customizable front/back covers, page images, and realistic page-turning animations.
Make it with Workshop
Build your own component with AI
Interactive 3D component for Framer, featuring customizable front/back covers, page images, and realistic page-turning animations.
Make it with Workshop
Build your own component with AI
Realistic Page Turning
Smooth, physics-based page animations with natural curving
Click pages to flip through your magazine
Customizable curve intensity for different paper effects
Automatic page stacking with proper depth
Complete Customization
Cover Design: Upload custom front and back cover images
Gloss Maps: Add optional roughness maps to the front cover for realistic material effects
Page Management: Add unlimited pages with a simple array interface
Hover Effects: Customizable highlight color when hovering over pages
Advanced Camera Controls
Full 3D camera positioning (X, Y, Z coordinates)
Adjustable rotation on all three axes
Zoom and field of view controls
Smooth orbit controls with configurable constraints
Interactive Orbit Controls
Enable/disable user interaction
Configurable zoom limits
Customizable rotation constraints (vertical and horizontal angles)
Option for infinite rotation on any axis
Studio-Quality Lighting
Multiple light sources mimicking professional photography setup
Adjustable base and accent light intensity
Directional, ambient, and area lights for realistic illumination
Soft shadows for depth and realism
Floating Animation
Optional floating effect with adjustable intensity
Customizable speed and rotation intensity
Creates an eye-catching, dynamic presentation
Performance Optimized
Efficient rendering with configurable detail level
Lazy loading for textures
Optional canvas preview mode for Framer editor
Built-in loader component
Add the component to your Framer canvas
Upload your cover images (front and back)
Add page images to the array
Customize lighting, camera, and interaction settings
Publish and share your interactive 3D magazine
Use high-quality images (recommended: 1000px width minimum)
Add a grayscale roughness map to the front cover for glossy/matte effects
Adjust the curve parameter to simulate different paper types
Enable orbit controls for user exploration
Use the float animation for landing pages and hero sections
