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