---
title: "Motion Hover Stretch"
canonical_url: "https://framerhub.io/components/motion-hover-stretch"
last_updated: "2026-06-15T14:46:30.272Z"
---

## Elastic Stretch Hover Effect

Motion Hover Stretch applies a dynamic stretching distortion to images based on cursor movement, creating a fluid, organic feel that responds to user interaction.

## Features

**Stretch Distortion Effect**
Creates an elastic deformation effect where the image stretches and warps based on cursor velocity, producing a fluid, organic visual response.

**Strength Control**
Adjust the intensity of the stretch distortion from subtle (0.1) to dramatic (1.0) to match your design aesthetic.

**Full Customization**
Comprehensive styling controls for titles, subtitles, colors, fonts, padding, borders, shadows, and more.

## Use Cases

**Portfolio Showcases** — Display project thumbnails with fluid hover reveals that highlight your creative work.

**Product Galleries** — Make e-commerce product images come alive with organic, flowing interactions.

**Hero Sections** — Create memorable landing page headers with dynamic, cursor-following imagery.

**Fashion & Lifestyle Sites** — Add an elegant, flowing visual effect that matches premium aesthetics.

![Motion Hover Stretch Preview](/framerhub/img/components/control/motion-hover-stretch.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Motion Hover Stretch in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

The component offers extensive customization through grouped property controls:

**Title Styles**

- Font (extended controls for size, weight, line height, letter spacing, alignment)
- Color & Hover Color
- Background, Padding, Border, Radius, Shadow

**Subtitle Styles**

- Same comprehensive options as title styles

**Image Settings**

- Image source via ResponsiveImage
- Sizing mode: Cover, Contain, or Custom dimensions

**Effect Settings**

- Strength: Controls stretch distortion intensity (0-1)

### Quick Tips

**Best Performance** — The WebGL renderer uses canvas mode optimization for smooth performance in the Framer editor.

**Image Selection** — Works best with images that have clean edges and clear subjects.

**Strength Settings** — Start with 0.25 for elegant effect, increase to 0.5+ for more dramatic distortion.

**Custom Content** — Use the Custom Items slot to replace default text with your own Framer components.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Motion Hover Stretch transforms ordinary hover interactions into fluid, organic experiences. The Three.js-powered rendering ensures buttery-smooth animations while GSAP provides precise timing control.

---