Smart Mockup Pro

Best Framer Component

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

Best Framer Component