Gradient Text · Animate UI

用渐变填充的文字，渐变会缓慢扫过整行；渐变仅作为文字材质，不作为页面背景。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

gradient-text.tsx

import { GradientText } from '@animate-ui/react/primitives/texts/gradient';

export function Title() {
  return <GradientText text="Gradient Text" neon />;
}

动效

渐变以 50s 线性循环横向扫过，由一个 motion value 驱动，不逐帧触发 React 渲染。
减少动效下停在静止帧；文字仍保持完整对比度。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
text	`string`	`—`
gradient	`string`	`'linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)'`
neon	`boolean`	`false`
transition	`Transition`	`{ duration: 50, repeat: Infinity, ease: 'linear' }`
…props	`Omit<React.ComponentProps<'span'>, 'children'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。