build69
Sign inGet API key
build69  /  Components  /  Motion — Text Animations  /  BlurInText

BlurInText

v1.0.1Updated 21 Jul 2026

Reveals a sentence word-by-word, each word resolving from a heavy blur into sharp focus. Wraps the MagicUI TextAnimate primitive with animation="blurIn" and converts build69's ms-based `delay`/`initialDelay` into TextAnimate's seconds-based duration. Under prefers-reduced-motion it renders the text plainly with no animation.

View source← Back to catalog

Preview

Live · 3 stories
Blur In OnlyOpen ↗
▸Why this is recommendedanimationtextblurreveal+4

BlurInText — only.

Recommended for+14
  • ✓Snapping a "Now in beta" eyebrow badge into focus on a landing page
  • ✓Giving a stat or KPI headline a dramatic entrance
  • ✓Revealing a section heading as it scrolls into view
  • ✓Announcement banners that should feel like they resolve into focus
Tags+6
animationtextblurrevealfocusstaggermotionmarketing
Features+4
  • Word-by-word blur-to-sharp reveal with a per-word stagger
  • `delay` sets the gap between words in ms (default: 110)
  • `initialDelay` holds before the first word for choreographed entrances
  • Renders inline, so it works inside badges, pills and headings
  • Respects prefers-reduced-motion by rendering static text
Not recommended for−2
  • ✕Long-form body copy or article text
  • ✕Text that re-renders frequently from state
  • ✕Small text where the blur frames read as illegible mush

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "BlurInText" })

Usage

import { BlurInText } from '@/components/motion/animated-text/blur-in-text';

<div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary ring-1 ring-primary/20">
  <span className="size-1.5 rounded-full bg-primary" />
  <BlurInText text="Now in beta" delay={140} />
</div>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
text

The sentence to reveal; split on whitespace into words.

stringyes
delay

Delay between words in ms (default: 110).

number—
initialDelay

Delay in ms before the first word appears (default: 0).

number—
className

Classes merged onto the rendered inline span.

string—

Related

Platform docsAll componentsSource files