build69
Sign inGet API key
build69  /  Components  /  Motion — Text Animations  /  text-animate

text-animate

v1.0.1Updated 21 Jul 2026

Lower-level MagicUI source primitive backing `AnimatedText.FadeInText`, `BlurInText`, and `SlideUpText`. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the u

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedtextanimationmagicuiprimitive+2

The default, out-of-the-box text-animate.

Recommended for+14
  • ✓Custom text-animation patterns not covered by AnimatedText
Tags+6
textanimationmagicuiprimitivefadedefault
Features+4
  • Animation presets: fadeIn / blurIn / slideUp / scaleUp
  • Per-character or per-word splitting
  • startOnView trigger
Not recommended for−2
  • ✕Most product surfaces (use the build69 `AnimatedText` composite)

Install

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

get_registry_item({ name: "text-animate" })

Usage

import { TextAnimate } from '@/components/motion/text-animate';

<TextAnimate animation="fadeIn" by="word">Welcome to build69</TextAnimate>

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
animation

Animation preset

string—
by

Split granularity

'character' | 'word' | 'line' | 'text'—
duration

Animation duration in seconds

number—
startOnView

Trigger when scrolled into view

boolean—

Related

Platform docsAll componentsSource files