---
title: "MacBook Mockup Pro — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Saadat Ali · Interactive. Supports Images and Videos"
canonical: "https://framer.elliotli.dev/component/macbook-mockup-pro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/MacBook Mockup Pro

# MacBook Mockup Pro

Supports Images and Videos

[View on Framer](https://framer.com/marketplace/components/macbook-mockup-pro/?via=elliot-li)

![MacBook Mockup Pro preview image 1](https://framer.elliotli.dev/og/component/macbook-mockup-pro/b16ccc0de8bc485e/1600x1200.jpg)

## Summary

Supports Images and Videos

## Description

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

1.  Drop the component onto your Framer canvas.
    
2.  Upload your product UI image or video for the screen display.
    
3.  Adjust the chassis color to seamlessly integrate with your brand.
    
4.  Set your preferred lid animation (scroll-linked, hover, or auto-open).
    
5.  Tune the drag sensitivity, idle float, and hover tilt to your liking.
    
6.  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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3589

## Details

- **Author**: Saadat Ali
- **Price**: $15.00
- **Published**: 2026-07-18
- **Updated**: 2026-07-18
- **Added**: 2026-07-18
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase