Wave Hover Text

Add a premium interactive liquid distortion effect to your typography. Reveal hidden messages or highlight text on hover with smooth WebGL fluid physics, organic grain, and cinematic blur

Features

• Real-time liquid hover distortion physics

• Premium Three.js-powered organic folds and ripples

• Interactive hidden text reveal on cursor hover

• Smooth damping and progressive cinematic blur

• Subtle atmospheric grain for organic texture

• Highly optimized static renderer fallback

• Automated memory cleanup routines for flawless performance

• Responsive resize handling and mobile touch support

• Clean, prop-flattened customizable architecture

• Works perfectly for premium headings and hero sections

Customization Options

• First and second line text content

• Hidden highlight word reveal

• Typography (font family, size, weight, tracking, line height)

• Colors (background, foreground, accent reveal)

• Distortion strength, frequency, and speed

• Organic grain intensity and progressive blur

• Hover reveal radius and edge feathering

• Motion smoothness and follow damping

How to Use

• Drop the component onto your Framer canvas

• Enter your primary text and the hidden highlight word

• Style the typography to match your brand guidelines

• Adjust the liquid distortion strength, folds, and speed

• Tune the hover radius and motion smoothness

• Publish for a premium, interactive typography experience

Use Cases

• Premium agency hero sections

• Interactive portfolio headings

• Cinematic landing page titles

• Creative developer showcases

• Modern SaaS feature highlights

• Dark mode UI typography

• Interactive storytelling pages

• Engaging promotional banners