---
title: "Text Distort hoverFX — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Munzir Kareem · Text. Smooth grid distortion on hover"
canonical: "https://framer.elliotli.dev/component/text-distort-hoverfx"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Distort hoverFX

# Text Distort hoverFX

Smooth grid distortion on hover

[View on Framer](https://framer.com/marketplace/components/text-distort-hoverfx/?via=elliot-li)

![Text Distort hoverFX preview image 1](https://framer.elliotli.dev/og/component/text-distort-hoverfx/92698371e7844acb/1600x1200.jpg)

## Summary

Smooth grid distortion on hover

## Description

A WebGL-powered hover effect that distorts your text through a live grid-warp shader. Move your cursor over it, and the content ripples and pulls along a smooth displacement field.

**Features:**

-   Real-time WebGL distortion driven by cursor position and velocity
    
-   Adjustable grid resolution, warp strength, and push/pull direction
    
-   Separate idle and hover easing controls for fine-tuned motion feel
    
-   Full typography controls, including font, color, outline, and fill opacity
    
-   Auto-fit sizing (fit or fill) with min/max scale clamping, or fixed sizing
    
-   Multi-line text support with configurable max lines
    
-   Optional on-canvas text editing directly in the Framer preview
    
-   Automatically falls back to a clean static version in the Canvas, thumbnails, and exports, so there's no wasted performance or visual artifacts
    
-   Pauses rendering when off-screen or the tab is inactive, keeping it lightweight even with multiple instances on a page
    

**Great for:** hero headlines, section titles, interactive taglines, or any moment you want text to feel alive under the cursor.

**Refund policy:** As this is a digital product, all sales are final. No refunds are offered once purchased.

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

-   All · #4644

## Details

- **Author**: Munzir Kareem
- **Price**: $8.00
- **Published**: 2026-08-01
- **Updated**: 2026-08-01
- **Added**: 2026-08-01
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing