About ClarityRevealText
Clarity Reveal — Designed to Be Read, Not Just Seen
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.
OVERVIEW
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.
BEST USE CASES
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
RECOMMENDED SETTINGS
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.
KEY SETTINGS (Quick Guide)
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
STAY REVEALED (Important)
ON (Recommended)Keeps text visible after reveal so users can re-read naturally.
OFFRe-blurs text when scrolling back (less ideal for readability).
MOBILE OPTIMISATION
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
CONTENT TIPS
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
COMMON MISTAKES
❌ Animation too fast❌ Excessive blur on small text❌ Turning off “Stay Revealed” for key content❌ Not testing on mobile
DO THIS INSTEAD
✓ Keep motion smooth and controlled✓ Prioritise readability over effect✓ Use subtle blur for a premium feel✓ Test across devices and scroll speeds
FINAL NOTE
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.
