---
title: "ScrollTextDistortion — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Avesh Mishra · Text. Liquid Scroll Text Distortion"
canonical: "https://framer.elliotli.dev/component/scrolltextdistortion"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ScrollTextDistortion

# ScrollTextDistortion

Liquid Scroll Text Distortion

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

![ScrollTextDistortion preview image 1](https://framer.elliotli.dev/og/component/scrolltextdistortion/0d21ae85220b0641/1600x1200.jpg)

## Summary

Liquid Scroll Text Distortion

## Description

## 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.

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

-   All · #5860

## Details

- **Author**: Avesh Mishra
- **Price**: $15.00
- **Published**: 2026-05-21
- **Updated**: 2026-05-21
- **Added**: 2026-05-12
- **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