The most immersive scroll-triggered text animation component available for Framer. Each word — or each character — illuminates in perfect sync with your visitor's scroll position, creating a hypnotic narrative experience that keeps users engaged and scrolling.
Inspired by the text animations used on Linear, Apple, Vercel, and the world's most awarded design studios. Now available as a single drop-in Framer component with zero setup required.
---
Most text reveal components fire once when an element enters the viewport. Premium Text Reveal is scroll-linked — the animation is driven frame by frame by the exact position of the scroll. Scroll forward, words light up. Scroll backward, they dim. The result is a cinematic, interactive experience that feels alive.
This is the effect that makes visitors scroll twice just to see it again. The effect that makes your portfolio feel like a product launch.
---
Dimming
The iconic word-by-word illumination made famous by Linear and Apple. Words start at low opacity and reveal to full brightness as they pass through the scroll zone. The most versatile effect — works on any background, any font size.
Color Shift
Text transitions from a neutral base color to a vibrant accent color of your choice. Perfect for brand-forward hero sections where you want specific words to land with maximum impact.
Blur Fade
Each word transitions from a soft, defocused blur to razor-sharp clarity as it enters the active scroll zone. Creates a dreamy, editorial feel ideal for storytelling sections, manifesto pages, and about pages.
Wave 3D
Every word rotates on its Y-axis like a ribbon in 3D space as it reveals. Powered by Framer Motion's hardware-accelerated transforms with perspective depth. The most dramatic effect in the collection — perfect for bold hero headlines.
Slide Mask
A cinematic masked slide-up per word. Each token emerges from behind an invisible clip mask — clean, precise, and unmistakably premium. Used by top-tier SaaS and agency websites.
Scale In
Words scale from 50% to full size with spring-physics elasticity. Combine with high stagger values for a cascading entrance that adds rhythm and energy to any section.
---
Every parameter is exposed as a native Framer property control — no code editing required after installation.
Animation
- Effect: choose from all 6 cinematic modes
- Split by: word-by-word or character-by-character
- Scroll start position: define exactly when text begins revealing
- Scroll end position: define exactly when text is fully revealed
- Overlap: controls how many words animate simultaneously
- Smoothing: spring-physics inertia from instant (0) to butter-smooth (1)
- Base opacity: how dim unrevealed words appear
Colors
- Text color
- Highlight / accent color (for Color Shift mode)
Typography
- Font size (10px – 220px)
- Font weight: Light · Regular · Medium · Semibold · Bold · Extra Bold · Black
- Letter spacing (tracking)
- Line height
- Text alignment: left · center · right
---
Premium Text Reveal is engineered for real-world deployment, not just demos.
- Powered by Framer Motion's native `useScroll` and `useSpring` APIs
- GPU-accelerated transforms — `opacity`, `transform`, `filter` only
- Zero layout shift — no reflow during animation
- Spring physics engine for scroll smoothing — no janky CSS transitions
- Compatible with Framer's auto-sizing system
- Works in both canvas preview and published sites
- Responsive — adapts to any container width, mobile included
- No external dependencies beyond Framer Motion (already included in Framer)
---
Hero sections — Make your opening headline impossible to ignore. Set a large font size, use Dimming or Color Shift, and let the text reveal itself as visitors begin scrolling.
Manifesto & about pages — Long-form sections where you want every sentence to land. Split by word with a slow smoothing value for maximum narrative impact.
SaaS landing pages — Feature section headlines, value proposition blocks, pricing page intros. The Blur Fade and Slide Mask effects pair perfectly with minimal SaaS aesthetics.
Portfolios & case studies — Project intro text, challenge/solution sections, results callouts. Wave 3D works beautifully on short, powerful statements.
Agency & studio websites — Where design is the product. Any effect. Maximum impact.
Editorial & digital magazines — Long reads, interviews, reports. Dimming keeps readers oriented and engaged throughout long-form content.
---
1. Install the component from the Framer Marketplace
2. Drag it onto your canvas
3. Type your text in the property panel
4. Choose your effect, fonts, colors, and timing
5. Publish — it works exactly the same on your live site
No code editing. No configuration files. No dependencies to install.
---
Does it work on mobile?
Yes. The component is fully responsive and the scroll-linked animation works on touch devices.
Can I use it with Framer CMS?
The text property accepts any string, including CMS-bound content via Framer's native variable binding.
Does it affect page performance?
No. All animations use GPU-composited properties (opacity, transform, filter). The spring physics run off the main thread via Framer Motion's optimized animation engine.
What happens to SEO — is the text readable by search engines?
Yes. The text is rendered as real HTML text in the DOM. Opacity and transform changes are purely visual and do not affect crawlability.
---
Tags
scroll animation · text reveal · scroll reveal · framer animation · word animation · character animation · scroll-linked · framer motion · animated text · hero animation · scroll text effect · landing page animation · linear style animation · apple text effect · premium framer component · scroll progress · storytelling animation · cinematic text · blur reveal · 3d text animation · fade in text · text entrance animation · scroll triggered · typography animation · framer scroll component
Samba SYLLA
