Motion Hover Stretch

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.

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.