按字符模糊淡入
安装
示例
按文本模糊淡入
文本模糊淡入
按单词向上滑动
按单词向上滑动
按文本缩放
按文本缩放
按行淡入
按行淡入（段落形式）按行淡入（段落形式）按行淡入（段落形式）
按字符向左滑动
按字符向左滑动
带延迟
按字符模糊淡入
带持续时间
按字符模糊淡入
带自定义动画变体
波浪动画！
用法
import { TextAnimate } from "@/components/magicui/text-animate";<TextAnimate animation="blurInUp" by="word">
Blur in by word
</TextAnimate>属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | string | - | 要动画的文本内容 |
className | string | - | 要应用于组件的类名 |
delay | number | 0 | 动画开始前的延迟 |
持续时间 | number | 0.3 | 动画持续时间 |
variants | 变体 | - | 动画的自定义动画变体 |
as | 元素类型 | "p" | 要渲染的元素类型 |
by | "text" | "word" | "character" | "line" | "word" | 如何拆分文本（“文本”、“单词”、“字符”） |
startOnView | 布尔值 | 是 | 组件进入视口时是否开始动画 |
once | 布尔值 | 否 | 是否只动画一次 |
animation | AnimationVariant | "fadeIn" | 要使用的动画预设 |