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
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.
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.
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
Sajjadul Kibria
