Unblur Text Reveal
A smooth scroll-activated text animation component that reveals words by transitioning from blurred to sharp while changing colors.
Make it with Workshop
Build your own component with AI
The Blur Reveal Text Component creates an elegant scroll-triggered animation that gradually reveals text by reducing blur while transitioning between colors. As users scroll, each word smoothly transforms from a blurred, muted state to sharp, vibrant text with customizable timing and direction.
This component is perfect for hero sections, feature descriptions, testimonials, or any text content where you want to create a sophisticated reveal effect that captures attention and enhances the reading experience.
Key Features:
Smooth blur-to-sharp text transition
Simultaneous color transformation
Word-by-word staggered animation
Customizable scroll triggers
Bidirectional animation support
Full typography control
Responsive design
Properties
Content Properties
Text Content
Type: Text Area
Default: "We believe the best Digital PR isn't transactional; it's relational."
Description: The main text content that will be animated. Each word will be revealed individually as the user scrolls.
HTML Tag
Type: Dropdown
Options: H1, H2, H3, H4, H5, H6, Paragraph, Div
Default: H2
Description: Sets the semantic HTML tag for the text element, important for SEO and accessibility.
Typography Properties
Font
Type: Font Picker
Default: Inter, Bold (700)
Description: Choose the font family and weight for your text. Supports all fonts available in your Framer project.
Font Size
Type: Number (8-200px)
Default: 48px
Description: Controls the size of the text. Larger sizes create more dramatic blur effects.
Line Height
Type: Number (0.8-3.0)
Default: 1.2
Description: Adjusts the spacing between lines of text. Lower values create tighter text, higher values add more breathing room.
Letter Spacing
Type: Number (-0.1-0.5em)
Default: 0
Description: Fine-tune the spacing between individual characters. Positive values spread letters apart, negative values bring them closer.
Text Align
Type: Dropdown
Options: Left, Center, Right, Justify
Default: Left
Description: Controls how the text is aligned within its container.
Color Properties
Initial Color
Type: Color Picker
Default: #999999 (Gray)
Description: The color of text before it's revealed. Typically a muted or lighter color that serves as the starting state.
Revealed Color
Type: Color Picker
Default: #000000 (Black)
Description: The final color of text after animation. This is usually your primary text color or brand color.
Animation Properties
Animation Start
Type: Dropdown
Options: Top of Screen, Near Top, Middle, Bottom
Default: Near Top
Description: Determines when the animation begins relative to the element's position in the viewport.
Animation End
Type: Dropdown
Options: Early, Middle, Late, Very Late
Default: Middle
Description: Sets when the animation completes. Later timing creates longer, more gradual reveals.
Animation Direction
Type: Dropdown
Options: Left to Right, Right to Left
Default: Left to Right
Description: Controls the order in which words are revealed. Left to Right follows natural reading order, Right to Left creates a reverse effect.
Blur Amount
Type: Number (0-20px)
Default: 10px
Description: Sets the initial blur intensity. Higher values create more dramatic reveals, while lower values provide subtle effects.
Stagger Delay
Type: Number (0-1.0)
Default: 0.1
Description: Controls the timing offset between each word's animation. Higher values create more separated reveals, lower values make words animate more simultaneously.
Best Practices
Blur Amount: Use 8-15px blur for most text sizes. Larger text can handle higher blur values.
Color Contrast: Ensure sufficient contrast between initial and revealed colors for accessibility.
Animation Timing: For longer text blocks, use smaller stagger delays (0.05-0.1) to prevent overly long animations.
Scroll Positioning: Position the component so animation starts when about 20% visible for optimal user experience.
Font Choice: Bold or medium-weight fonts work best as they remain readable even when slightly blurred.
Use Cases
Hero Headlines: Create impactful first impressions
Feature Descriptions: Highlight key product benefits
Testimonials: Add elegance to customer quotes
Section Introductions: Smooth transitions between content areas
Call-to-Action Text: Draw attention to important messages
