blur-fade
v1.0.1Updated 21 Jul 2026Lower-level MagicUI source primitive used by `AnimatedText.BlurInText` / `FadeInText` patterns. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the underlying
Preview
Live · 7 storiesDefaultOpen ↗
▸Why this is recommendedfadebluranimationmagicui+2
The default, out-of-the-box blur-fade.
Recommended for+14
- ✓Custom blur-fade reveal patterns not covered by AnimatedText
Tags+6
fadebluranimationmagicuiprimitivedefault
Features+4
- Blur + fade entrance animation
- In-view trigger
- Configurable delay + duration
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.
Usage
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
delayDelay before animation in seconds
—durationAnimation duration in seconds
—inViewTrigger only when scrolled into view
—