Text Distort hoverFX

Smooth grid distortion on hover

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.

Smooth grid distortion on hover