Scroll Blur Reveal is a cinematic Framer code component that transforms plain text into a scroll-driven experience. Each word emerges from a soft blur — one by one — as the user scrolls down the page, creating the kind of editorial, high-end feel you see on award-winning creative sites. No layout shifts, no jumpiness, just pure smooth motion tied directly to scroll.
Drop it into any section and it works instantly. The component handles the entire animation logic — blur intensity, reveal timing, word staggering, and vertical drift — all driven by native framer-motion scroll tracking. With a transparent background, it floats seamlessly on top of whatever your page design already looks like.
Fully customizable from Framer's property panel — adjust font family, size, weight, color, blur strength, and reveal speed without writing a single line of code.
Scroll-Driven Word Reveal: Each word animates individually from blur to sharp as the user scrolls, using framer-motion's useScroll and useTransform for buttery-smooth physics.
Cinematic Blur Effect: Words start at a customizable blur radius and fade into focus with an easing curve that feels intentional and premium.
Zero Layout Shift: The sticky layout pattern keeps the text perfectly centered on screen while the scroll happens — nothing moves except the words revealing.
Transparent Background: No background color forced on you. The component sits cleanly over any section, image, or gradient you've already built.
Fully Responsive: Font size and padding scale automatically across desktop, tablet portrait, tablet landscape, and mobile — no breakpoint setup needed.
Reveal Speed Control: Dial the speed from meditative slow to snappy fast using a single property slider. Great for matching the energy of your brand.
10+ Property Controls: Every detail — text content, color, blur amount, font weight, line height, letter spacing, scroll height, and padding — is editable from the Framer panel.
Create Code File: Copy the component code and paste it into a new code file in Framer named ScrollRevealText.tsx.
Add to Canvas: Drag the component onto your page — it defaults to a centered, full-section layout ready to use.
Set Your Text: Type your copy directly in the "Text" property field in the right panel. Any length works.
Choose Your Font: Enter any font family already loaded in your Framer project in the "Font Family" field.
Adjust Reveal Speed: Start at 0.65 for a smooth cinematic feel. Go lower for slower, go higher for snappier.
Set Scroll Height: Increase to 400vh or more if you want each word to have more breathing room per scroll distance.
💡 Tips
Slow = Premium: A reveal speed between 0.3 and 0.5 feels the most high-end. Fast reveals work better for short punchy headlines.
Pair with a Dark Section: The blur effect reads best on dark backgrounds. Set your page section to black or deep navy and use white text for maximum impact.
Short Lines Hit Harder: Write in short, punchy phrases — 8 to 12 words per thought. The reveal rhythm makes each word feel intentional.
Combine with a Hero: Place this component just below your hero fold as a mission statement or brand manifesto section for instant scroll engagement.
Due to the digital nature of this component, refunds are generally not issued once access is granted. However, if the component is broken, has a bug, or fails to work as advertised and cannot be resolved through support, a refund can be requested directly through Contra. Please review the live demo before purchasing to ensure it fits your project needs.
Free lifetime updates included. Have a question or need help with implementation? Reach out via email at mrammarilyes@gmail.com or connect on LinkedIn.
Ilyes Ammar
