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