特效

Typewriter

平滑打字机效果组件：弹簧宽度跟随（useSpring）实现无顿挫的容器缩放，全文渲染 + overflow 裁剪避免字符闪现，支持多文案轮播、单次打字、自定义光标与弹簧参数。

typewritertypinganimationtextmotionspringeffectcarousel

查看 Typewriter 组件的基本效果

I'm a

使用 Typewriter 组件的基础示例

1import { Typewriter } from "@/components/qiuye-ui/typewriter";

1<Typewriter
2  phrases={["Hello", "World", "React"]}
3  typingSpeed={90}
4  loop
5/>

查看组件的各种使用方式和效果

传入字符串数组，自动循环打字 → 删除 → 下一段。

I'm a

传入单个字符串并设置 loop=false，打完后光标保持闪烁。

通过 cursor 传入自定义 ReactNode 或 cursorClassName 覆盖样式。

自定义光标颜色：

自定义光标元素：

隐藏光标：

实时调整打字速度、光标显隐、是否循环。

速度:

控制删完一段后、打下一段之前的等待时间，值越大"清空后等一下"的节奏感越明显。

无停顿（0ms）

默认停顿（500ms）

长停顿（1200ms）

通过 springConfig 调整容器宽度跟随的弹簧物理参数。

默认弹簧

柔和弹簧

强力弹簧