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

animated-gradient-text

v1.0.1Updated 21 Jul 2026

Lower-level MagicUI source primitive backing `AnimatedText.GradientText`. Prefer the `AnimatedText` composite from `@/components/motion/animated-text` unless you need direct access to the underlying API.

View source← Back to catalog

Preview

Live · 5 stories
DefaultOpen ↗
▸Why this is recommendedtextgradientanimationmagicui+2

The default, out-of-the-box animated-gradient-text.

Recommended for+14
  • ✓Custom gradient-text patterns not covered by AnimatedText
Tags+6
textgradientanimationmagicuiprimitivedefault
Features+4
  • Animated conic-gradient sweep on text
  • Configurable colors + speed
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: "animated-gradient-text" })

Usage

import { AnimatedGradientText } from '@/components/motion/animated-gradient-text';

<AnimatedGradientText>Premium</AnimatedGradientText>

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
colorFrom

Gradient start color

string—
colorTo

Gradient end color

string—
speed

Sweep speed

number—

Related

Platform docsAll componentsSource files