Liquid Hover Media

Fluid media distortion on hover

Three.js Hover Media Component A fast , optimized Three.js-powered Framer component that lets you attach immersive hover images and videos to any Frame. Upload images or videos and reveal them smoothly on hover, powered by WebGL for premium, fluid interaction . Property Controls Project Content : Attach any Framer Frame as the hover trigger area. Media Type : Switch between Image or Video for your hover media. Image : Upload an image (shown when Media Type is set to Image). Video : Upload a video file (shown when Media Type is set to Video). Fit : Choose Cover (fills the area) or Contain (no cropping). Restart on Hover : (Video only) Option to restart the video each time you hover. Hover Width : Control the width of the hovering media. Hover Height : Control the height of the hovering media. Border Radius : Round the corners of the hover media. Distortion : Adjust the distortion amount for a more fluid, dynamic feel. Automatically crops media to your Frame’s aspect ratio. Responsive & performance-optimized , no manual adjustments needed. No stretching. No layout issues . Just drop it in and publish. Perfect for portfolios , product showcases , and modern hero sections .

Fluid media distortion on hover