About Smart Mockup Pro
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