TypingAnimation
typing-animation打字机 · 逐字 + 闪烁光标 + 进入视口触发
用法
基础用法
逐字打出文本并附闪烁光标，打完自动隐藏光标。
tsx
<TypingAnimation
text="瑚琏 Hulian — 吸取式聚合设计系统"
className="text-2xl font-semibold text-foreground"
/>打字速度
duration 控制每字毫秒（默认 80），越小越快。
tsx
<TypingAnimation
text="Faster typing speed"
duration={40}
className="text-xl font-medium text-foreground"
/>隐藏光标
showCursor=false 时不渲染闪烁光标，仅保留打字过程。
tsx
<TypingAnimation
text="无光标的打字效果"
showCursor={false}
className="text-xl font-medium text-foreground"
/>进入视口触发
startOnView=true（默认）时滚动进入视口才开始打字，适合长页面。
tsx
<TypingAnimation
text="滚动到此处才开始打字"
startOnView
className="text-xl font-medium text-foreground"
/>何时用
逐字"打"出一段文本，带闪烁光标，默认进入视口才开始（适合首屏标语 / hero 文案）。要在固定句式里循环换词用 WordRotate；静态文本用 Text。客户端组件（用 state + IntersectionObserver），源文件已含 "use client"。
导入
ts
import { TypingAnimation } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| text* | string | — | 要逐字打出的文本 |
| duration | number | 80 | 每字毫秒 |
| delay | number | 0 | 开始前延迟毫秒 |
| startOnView | boolean | true | 进入视口才开始；设 false 立即开始 |
| showCursor | boolean | true | 显示闪烁光标 |
继承 ComponentPropsWithoutRef<"span">（除 children），如 className / style。
禁忌 / 坑
startOnView默认true：若组件初始就在视口外且页面不滚动（如截图/headless 验收），打字永不触发、看似空白——验收/首屏内场景显式传startOnView={false}。- 客户端组件，含
"use client"；可作为子组件嵌进 server 页，但不能当纯 RSC 用。
相关
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<TypingAnimation text="瑚琏 Hulian" duration={80} showCursor={true} />