---
title: "Smart Mockup Pro — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Saadat Ali · Interactive. Best Framer Component"
canonical: "https://framer.elliotli.dev/component/smart-mockup-pro"
---

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

# Smart Mockup Pro

Best Framer Component

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

![Smart Mockup Pro preview image 1](https://framer.elliotli.dev/og/component/smart-mockup-pro/2863be8856656ba1/1600x1200.jpg)

## Summary

Best Framer Component

## Description

Automate your device previews with a premium real-time green screen keying and perspective engine. Instantly embed images, videos, or fully interactive live HTML websites into any mockup screen with pixel-perfect edge-tracking, cinematic despill control, and automated aspect ratio detection.

## Features

-   Real-time GLSL green screen keying
    
-   Advanced homography perspective tracking
    
-   Live interactive HTML website embed support
    
-   Automatic suggested screen aspect ratio detection
    
-   Premium edge despill and color suppression
    
-   High-performance optimized WebGL rendering
    
-   Smooth multi-axis scale and fit physics
    
-   Responsive canvas resize and intersection handling
    
-   Clean background shadow and reflection preservation
    
-   Full wire-through click and scroll event handling
    

## Customization Options

-   Mockup background image
    
-   Live HTML component connector
    
-   Content image or video upload
    
-   Mockup scaling (cover / contain)
    
-   Content fitment (cover / contain / fill)
    
-   Key color target and tolerance angles
    
-   Soft edge blend threshold
    
-   Green fringe despill intensity
    
-   Minimum saturation and brightness gates
    
-   Visual corner debugging dots
    

## How to Use

-   Drop the component onto your Framer canvas
    
-   Upload your base mockup image with a green screen area
    
-   Toggle "Connect Frame" if you want to embed a live webpage layout
    
-   Connect your custom Framer Frame or UI element as the child content
    
-   Adjust the key color tolerance and edge blend to clean the mask
    
-   Publish to launch an interactive, perfectly warped live viewport
    

## Use Cases

-   Interactive SaaS product walk-throughs
    
-   Premium portfolio case studies
    
-   Responsive web design presentations
    
-   Dynamic video marketing sections
    
-   Live app UI marketplace showcases
    
-   High-converting landing page feature highlights
    
-   App Store screenshot generation
    
-   Dark mode digital product mockups
    
-   Interactive click-through prototypes
    
-   Client website presentation frames
    

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

-   All · #1319

## Details

- **Author**: Saadat Ali
- **Price**: $10.00
- **Published**: 2026-07-08
- **Updated**: 2026-07-15
- **Added**: 2026-07-08
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step