MacBook Mockup Pro

Supports Images and Videos

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

Supports Images and Videos