About MacBook Mockup Pro
Embed a premium interactive 3D MacBook Pro mockup with scroll-linked lid animations, dynamic studio lighting, and fully customizable screen content directly into your Framer site.
Features
Real-time WebGL 3D rendering with highly optimized performance
Scroll-linked open and close lid animations (Page or Locked mode)
Interactive drag-to-rotate and hover tilt physics
Dynamic studio lighting with ambient environment reflections
Customizable screen content (supports high-res images and looping WebM/MP4 videos)
Procedural aluminum metal and black glass textures
Customizable chassis colors to match your brand's aesthetic
Responsive resize handling for seamless mobile and desktop viewing
Works perfectly for SaaS showcases, portfolios, and tech landing pages
Customization Options
Frame / Chassis Color
Screen Image (Static UI wallpaper)
Screen Video (Overrides image, supports seamless looping)
Component Scale
Lid Open Angle
Scroll Interaction Mode (None, Locked, Page)
Scroll Range Settings
Open in View Trigger
Idle Animation Physics (Spin, Float, Both, None)
Idle Speed Tuning
Hover Tilt / Mouse Tracking
Drag-to-Rotate Interaction
Drag Speed Tuning
How to Use
Drop the component onto your Framer canvas.
Upload your product UI image or video for the screen display.
Adjust the chassis color to seamlessly integrate with your brand.
Set your preferred lid animation (scroll-linked, hover, or auto-open).
Tune the drag sensitivity, idle float, and hover tilt to your liking.
Publish for a premium, interactive 3D product showcase.
Use Cases
Premium SaaS product showcases
App UI and dashboard presentations
Creative portfolio case studies
High-end e-commerce landing pages
Digital product marketing sites
Interactive hero sections
Design agency feature blocks