Most scroll animations look impressive — but often make content harder to read.
Clarity Reveal is built differently.
It gently reveals text as users scroll, creating a calm, focused experience that encourages people to actually read your message — not just skim past it.
Words transition from a soft, blurred state into sharp, clear text, guiding attention in a natural, intentional way.
And once revealed, your content stays visible — no distracting reverse animations or disappearing text.
Built for designers who value clarity as much as aesthetics.
A premium scroll-reveal text component designed for storytelling, connection, and conversion.
Perfect for wellness brands, service businesses, and any website where the message matters.
The subtle blur-to-focus transition creates a smooth, almost meditative reading experience — helping your content land with more impact.
Brand storytelling sections
Service descriptions that deserve attention
Testimonials that build trust
About pages that invite connection
Landing pages for wellness, spa, and luxury services
Any section where you want users to slow down and read
Calm & Soothing (Massage / Wellness)
Reveal Smoothness: 1.4
Soft Reveal: 2.2 words
Scrub: 0.5
Blur: 10px
Opacity: 0.25
Start: 0.12 / End: 0.72
Creates a gentle, relaxed reading flow.
Energetic & Dynamic (Fitness / Modern Brands)
Reveal Smoothness: 2.0–2.5
Soft Reveal: 1.5 words
Scrub: 0.3
Blur: 6–8px
Start: 0.15 / End: 0.65
Sharper, faster reveals with more energy.
Luxury & Elegant (High-End Services)
Reveal Smoothness: 1.2
Soft Reveal: 3.0 words
Scrub: 0.7
Blur: 12–15px
Opacity: 0.15
Slow, refined transitions with a premium feel.
Reveal Smoothness — Controls pacing and motion feel
Soft Reveal — Number of words revealed together
Scrub — How tightly animation follows scroll
Start / End — When animation begins and finishes
Blur — Intensity of the reveal effect
ON (Recommended)Keeps text visible after reveal so users can re-read naturally.
OFFRe-blurs text when scrolling back (less ideal for readability).
Use slightly faster timing (Start: 0.15 / End: 0.65)
Reduce blur slightly (8–10px)
Keep font sizes readable (18–24px minimum)
Always test on real devices
Keep sections focused (3–5 sentences works best)
Use line breaks to guide pacing
Front-load important ideas
Aim for 30–80 words per section
❌ Animation too fast❌ Excessive blur on small text❌ Turning off “Stay Revealed” for key content❌ Not testing on mobile
✓ Keep motion smooth and controlled✓ Prioritise readability over effect✓ Use subtle blur for a premium feel✓ Test across devices and scroll speeds
In a world of distracting animations, Clarity Reveal is built to do the opposite.
It slows things down just enough for your message to land — turning passive scrolling into a more intentional reading experience.
Most scroll animations look impressive — but often make content harder to read.
Clarity Reveal is built differently.
It gently reveals text as users scroll, creating a calm, focused experience that encourages people to actually read your message — not just skim past it.
Words transition from a soft, blurred state into sharp, clear text, guiding attention in a natural, intentional way.
And once revealed, your content stays visible — no distracting reverse animations or disappearing text.
Built for designers who value clarity as much as aesthetics.
A premium scroll-reveal text component designed for storytelling, connection, and conversion.
Perfect for wellness brands, service businesses, and any website where the message matters.
The subtle blur-to-focus transition creates a smooth, almost meditative reading experience — helping your content land with more impact.
Brand storytelling sections
Service descriptions that deserve attention
Testimonials that build trust
About pages that invite connection
Landing pages for wellness, spa, and luxury services
Any section where you want users to slow down and read
Calm & Soothing (Massage / Wellness)
Reveal Smoothness: 1.4
Soft Reveal: 2.2 words
Scrub: 0.5
Blur: 10px
Opacity: 0.25
Start: 0.12 / End: 0.72
Creates a gentle, relaxed reading flow.
Energetic & Dynamic (Fitness / Modern Brands)
Reveal Smoothness: 2.0–2.5
Soft Reveal: 1.5 words
Scrub: 0.3
Blur: 6–8px
Start: 0.15 / End: 0.65
Sharper, faster reveals with more energy.
Luxury & Elegant (High-End Services)
Reveal Smoothness: 1.2
Soft Reveal: 3.0 words
Scrub: 0.7
Blur: 12–15px
Opacity: 0.15
Slow, refined transitions with a premium feel.
Reveal Smoothness — Controls pacing and motion feel
Soft Reveal — Number of words revealed together
Scrub — How tightly animation follows scroll
Start / End — When animation begins and finishes
Blur — Intensity of the reveal effect
ON (Recommended)Keeps text visible after reveal so users can re-read naturally.
OFFRe-blurs text when scrolling back (less ideal for readability).
Use slightly faster timing (Start: 0.15 / End: 0.65)
Reduce blur slightly (8–10px)
Keep font sizes readable (18–24px minimum)
Always test on real devices
Keep sections focused (3–5 sentences works best)
Use line breaks to guide pacing
Front-load important ideas
Aim for 30–80 words per section
❌ Animation too fast❌ Excessive blur on small text❌ Turning off “Stay Revealed” for key content❌ Not testing on mobile
✓ Keep motion smooth and controlled✓ Prioritise readability over effect✓ Use subtle blur for a premium feel✓ Test across devices and scroll speeds
In a world of distracting animations, Clarity Reveal is built to do the opposite.
It slows things down just enough for your message to land — turning passive scrolling into a more intentional reading experience.
