ScrollTextDistortion

ScrollTextDistortion
ScrollTextDistortion

About ScrollTextDistortion

Scroll Text Distortion

Scroll Text Distortion is an interactive typography component that creates a smooth liquid-like wave effect while users scroll. The animation dynamically reacts to scroll speed and screen size, then smoothly resets back to normal when scrolling stops for a polished user experience.

Perfect for hero sections, portfolios, creative agencies, SaaS websites, landing pages, and modern editorial layouts.

Features

  • Liquid-style text distortion effect

  • Scroll-responsive animation

  • Adjustable sensitivity and direction

  • Custom text, font, and color controls

  • Vertical alignment and padding options

  • Mobile-friendly and performance optimized

  • Smooth reset animation after scrolling

Designed to add motion, depth, and a premium interactive feel to modern Framer websites.

From Avesh Mishra

StickyLetterScatter
Text Animation Cycle
RotatingText
Slit Image Reveal

Related Components

Text Arrow CTA
Scrolling Wave Text
Kinetic Text Motion
Hover Highlight Text