Elastic Frame: Free Interactions Component by Helder Vilela

Add natural elastic distortion to any image or video in Framer. The effect responds to cursor movement with adjustable force, radius and intensity, creating fluid push and rebound behavior. Includes debug mode and supports Framer or external media.

About this Component

Designed for performance, Elastic Frame uses Smart Render to enable interaction on desktop and automatically switch to a static version on mobile, ensuring fast loading and smooth frame rates on every device.

Features

Works with images and videos
Supports Framer uploads and external video URLs
Real-time cursor interaction
Debug mode for precise tuning
Smart render mode with mobile fallback
Zero code setup

Customization

Elastic Frame is highly customizable and gives you full control over how the interaction behaves. You can adjust mesh resolution, cursor size, and overflow area, fine-tune the visual response with debug mode, and choose how the component renders across devices. The effect can be subtle and elegant or bold and playful, depending on your settings.