Morphing Text · Animate UI

从一段文字变形到下一段：共有的字母滑到新位置，其余字母淡出、模糊并缩放。

安装

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

终端

bun add @animate-ui/react motion

用法

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

morphing-text.tsx

import { MorphingText } from '@animate-ui/react/primitives/texts/morphing';

export function Tagline() {
  return <MorphingText text={['Fast', 'Accessible', 'Animated']} loop />;
}

动效

每段文字停留 holdDelay 后变形，共有字母使用共享布局动画滑到新位置，其他字母淡出并进入 10px 模糊、缩到 0.8。
整体使用柔和弹簧 stiffness 125 / damping 25；减少动效下直接替换文字。

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

API

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

属性	类型	默认值
text	`string \| string[]`	`—`
loop	`boolean`	`false`
holdDelay	`number`	`2500`
delay	`number`	`0`
initial	`TargetAndTransition \| VariantLabels \| boolean`	`{ opacity: 0, scale: 0.8, filter: 'blur(10px)' }`
animate	`TargetAndTransition \| VariantLabels \| boolean`	`{ opacity: 1, scale: 1, filter: 'blur(0px)' }`
exit	`TargetAndTransition \| VariantLabels`	`{ opacity: 0, scale: 0.8, filter: 'blur(10px)' }`
variants	`Variants`	`—`
transition	`Transition`	`{ type: 'spring', stiffness: 125, damping: 25, mass: 0.4 }`
inView	`boolean`	`false`
inViewMargin	`string`	`'0px'`
inViewOnce	`boolean`	`true`
…props	`Omit<HTMLMotionProps<'span'>, 'children'>`	`—`

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

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