Splitting Text · Animate UI

按字符、单词或行拆开，逐片进入的文字。

安装

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

终端

bun add @animate-ui/react motion

用法

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

splitting-text.tsx

import { SplittingText } from '@animate-ui/react/primitives/texts/splitting';

export function Title() {
  return <SplittingText text="Splitting Text" type="words" inView />;
}

splitting-text.tsx

<SplittingText
  type="lines"
  text={['Introducing Splitting Text', 'Made with Motion.']}
/>

动效

每一片从右侧 150px 处淡入并滑入，0.7s ease-out；字符间隔 0.05s、单词 0.2s、行 0.3s。
减少动效下整段直接显示。

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

API

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

属性	类型	默认值
text	`string \| string[]`	`—`
type	`'chars' \| 'words' \| 'lines'`	`'chars'`
stagger	`number`	`0.05 (chars), 0.2 (words), 0.3 (lines)`
delay	`number`	`0`
initial	`TargetAndTransition`	`{ x: 150, opacity: 0 }`
animate	`TargetAndTransition`	`{ x: 0, opacity: 1 }`
transition	`Transition`	`{ duration: 0.7, ease: 'easeOut' }`
disableAnimation	`boolean`	`false`
inView	`boolean`	`false`
inViewMargin	`string`	`'0px'`
inViewOnce	`boolean`	`true`
…props	`Omit<HTMLMotionProps<'div'>, 'children' \| 'initial' \| 'animate' \| 'transition'>`	`—`

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

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