Unblur Text Reveal

A smooth scroll-activated text animation

(The Source Code will not be given, only the component is the deliverable) 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

A smooth scroll-activated text animation