---
title: "Liquid Hover Media — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Bardia Madani · Buttons. Fluid media distortion on hover"
canonical: "https://framer.elliotli.dev/component/liquid-hover-media"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Liquid Hover Media

# Liquid Hover Media

Fluid media distortion on hover

[View on Framer](https://framer.com/marketplace/components/liquid-hover-media/?via=elliot-li)

![Liquid Hover Media preview image 1](https://framer.elliotli.dev/og/component/liquid-hover-media/e77daa6adfc9093d/1600x1200.jpg)

## Summary

Fluid media distortion on hover

## Description

## 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**.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4377

## Details

- **Author**: Bardia Madani
- **Price**: $5.00
- **Published**: 2026-07-21
- **Updated**: 2026-08-10
- **Added**: 2026-07-21
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything