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

FadeInText

v1.0.1Updated 21 Jul 2026

Reveals a sentence word-by-word with a soft opacity fade, staggering each word by a delay you set in milliseconds. Wraps the MagicUI TextAnimate primitive with animation="fadeIn" 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
Fade In OnlyOpen ↗
▸Why this is recommendedanimationtextfadereveal+4

FadeInText — only.

Recommended for+14
  • ✓Fading in a hero subheading after the headline lands
  • ✓Softly revealing marketing landing copy as a section enters
  • ✓Introducing a paragraph of onboarding explainer text
  • ✓Gently surfacing an empty-state or success message
Tags+6
animationtextfaderevealstaggermotionmarketinghero
Features+4
  • Word-by-word opacity fade with a per-word stagger
  • `delay` sets the gap between words in ms (default: 80)
  • `initialDelay` holds before the first word so it can be choreographed after a headline
  • Renders inline, so it composes inside a paragraph or heading
  • 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
  • ✕UI where the copy must be readable instantly

Install

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

get_registry_item({ name: "FadeInText" })

Usage

import { FadeInText } from '@/components/motion/animated-text/fade-in-text';

<p className="max-w-xl text-lg text-muted-foreground">
  <FadeInText
    text="Mailroom, Invoice Pro and Pulse — every workflow in one workspace."
    delay={50}
    initialDelay={300}
  />
</p>

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: 80).

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