Scroll Velocity Blur

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

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) Drop the component onto your canvas Edit the text content Scroll the page to see the effect Adjust Sensitivity and Max Blur for the desired intensity 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

Text that blurs and warps as you scroll.