About Scroll Velocity Blur
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
