--- title: "Unblur Text Reveal — Framer component · Best of Framer" description: "$4.00 · Framer component · by Sajjadul Kibria · Text. A smooth scroll-activated text animation" canonical: "https://framer.elliotli.dev/component/unblur-text-reveal" --- [Home](/)/[Components](/components)/[Text](/components/category/text)/Unblur Text Reveal # Unblur Text Reveal Scroll-activated text animation [View on Framer](https://framer.com/marketplace/components/unblur-text-reveal/?via=elliot-li) ![Unblur Text Reveal preview image 1](https://framer.elliotli.dev/og/component/unblur-text-reveal/91b64854697a9e17/1600x1200.jpg) ## Summary A smooth scroll-activated text animation ## Description (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 ## Rank history [How rankings work →](/terms#rankings) - All · #5351 ## Details - **Author**: Sajjadul Kibria - **Price**: $4.00 - **Published**: 2025-09-26 - **Updated**: 2026-10-06 - **Added**: 2025-09-20 - **Categories**: Text ## More like this - [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer. - [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors - [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend - [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing