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

1. Blur Amount: Use 8-15px blur for most text sizes. Larger text can handle higher blur values.

2. Color Contrast: Ensure sufficient contrast between initial and revealed colors for accessibility.

3. Animation Timing: For longer text blocks, use smaller stagger delays (0.05-0.1) to prevent overly long animations.

4. Scroll Positioning: Position the component so animation starts when about 20% visible for optimal user experience.

5. 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