---
title: "Scroll Blur Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Evixel Studio · Effects. Scroll Velocity Blur brings your text to life by reacting to how fast the user scrolls."
canonical: "https://framer.elliotli.dev/component/scroll-blur-text"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Scroll Blur Text

# Scroll Blur Text

Scroll-driven kinetic text blur

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

![Scroll Blur Text preview image 1](https://framer.elliotli.dev/og/component/scroll-blur-text/c3861549b6b40512/1600x1200.jpg)

## Summary

Scroll Velocity Blur brings your text to life by reacting to how fast the user scrolls.

## Description

Scroll Velocity Blur brings your text to life by reacting to how fast the user scrolls. The faster the scroll, the more the text blurs, stretches vertically, compresses horizontally, and skews — then springs back to rest the moment scrolling slows down. It uses Framer Motion springs under the hood, so every transition feels physical and fluid.

### Features

-   Velocity-driven blur, stretch, squash, and skew — all simultaneously
    
-   Spring physics for natural, bouncy recovery
    
-   Smoothing control to soften rapid velocity spikes
    
-   Configurable stop delay before the rest state kicks in
    

### Property Controls

Effect

-   **Sensitivity** — Controls how strongly the effect reacts to scroll
    
-   **Max Blur** — Maximum blur applied at high speed
    
-   **V Stretch** — Vertical stretch intensity
    
-   **H Squash** — Horizontal compression amount
    
-   **Skew** — Tilt based on scroll direction
    
-   **Smoothing** — Softens motion changes
    
-   **Stop Delay** — Delay before effect resets
    
-   **Reduced Motion** — Disable animation for accessibility
    

Spring

-   **Stiffness** — Controls responsiveness
    
-   **Damping** — Reduces bouncing
    
-   **Mass** — Controls motion weight
    

Typography

-   Full font control (size, weight, spacing, line height)
    
-   Color and alignment
    
-   Text wrapping
    
-   Text case transformation
    

Container

-   Padding
    
-   Background color
    
-   Border radius
    
-   Shadow
    

### How to Use (Quick Start)

1.  Drop the component onto your canvas
    
2.  Edit the text content
    
3.  Scroll the page to see the effect
    
4.  Adjust **Sensitivity** and **Max Blur** for the desired intensity
    
5.  Fine-tune motion using **Spring** controls
    

### Tips

-   Use larger text for a stronger visual impact
    
-   Works best in scroll-heavy layouts
    
-   Keep blur subtle for readability
    
-   Pair with minimal backgrounds for clean results
    

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

-   All · #9974

## Details

- **Author**: Evixel Studio
- **Price**: $5.00
- **Published**: 2026-04-15
- **Updated**: 2026-09-19
- **Added**: 2026-04-06
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows