JGuang
EN

打字动画

Typing Animation · Magic UI

交互预览
npx shadcn@latest add https://jiguang132.com/r/magic-ui/typing-animation.json

部分上游示例使用在线图片、视频或推文；这些内容依赖网络与第三方服务，不代表本地预览加载失败。

打字动画

Magic UI 的独立组件，请不要替换为 JGuang UI/Base UI 的同名 API。

安装

npx shadcn@latest add https://jiguang132.com/r/magic-ui/typing-animation.json

Registry 将复制可编辑源码和依赖到独立命名空间。检查主题变量与 Tailwind CSS v4 配置；不要覆盖已有的项目组件。

使用与验证

在左侧选择组件，在预览中操作它的状态；使用“查看代码”检查真实源码。安装后执行类型检查和构建，再验证键盘焦点、手机布局与深浅色主题。

来源

https://github.com/magicuidesign/magicui/tree/cdb348cb4c72a9b54b554d8617801e479fbc8714 MIT 许可证；不包括付费内容。下方提供上游英文参考内容，中文使用指南已适配；上游详细参考暂保留英文。

适用场景

逐字输入并可删除一个字符串或词语序列。

示例使用的原生参数

从该组件全部本地示例的 JSX 提取，按导入模块及组件区分；包括复合示例中实际使用的其他 Magic UI 组件。不是全部属性清单，也不是宿主通用 variant API。展开对象需结合示例数据声明；完整类型与默认值见下方源码参考。

所属组件参数说明示例来源
TypingAnimation.children (typing-animation)原生子内容，保留所属组件对文本/元素的约束。examples/typing-animation-demo.tsx、examples/typing-animation-demo-4.tsx、examples/typing-animation-demo-5.tsx、examples/typing-animation-demo-7.tsx
TypingAnimation.words (typing-animation)轮换或打字使用的原生词语序列。examples/typing-animation-demo-2.tsx、examples/typing-animation-demo-3.tsx、examples/typing-animation-demo-6.tsx、examples/typing-animation-demo-7.tsx、examples/typing-animation-demo-8.tsx
TypingAnimation.loop (typing-animation)重复打字序列。examples/typing-animation-demo-2.tsx、examples/typing-animation-demo-3.tsx、examples/typing-animation-demo-6.tsx、examples/typing-animation-demo-7.tsx、examples/typing-animation-demo-8.tsx
TypingAnimation.typeSpeed (typing-animation)打字间隔，单位毫秒。examples/typing-animation-demo-3.tsx
TypingAnimation.deleteSpeed (typing-animation)删除间隔，单位毫秒。examples/typing-animation-demo-3.tsx
TypingAnimation.pauseDelay (typing-animation)打字/删除阶段之间的停顿，单位毫秒。examples/typing-animation-demo-3.tsx、examples/typing-animation-demo-7.tsx
TypingAnimation.startOnView (typing-animation)所属元素进入当前文档视口时开始。examples/typing-animation-demo-4.tsx
TypingAnimation.showCursor (typing-animation)展示打字光标装饰。examples/typing-animation-demo-5.tsx
TypingAnimation.blinkCursor (typing-animation)启用光标闪烁。examples/typing-animation-demo-7.tsx
TypingAnimation.className (typing-animation)当前原生组件的样式类，需先配置 Tailwind 与所需 CSS。examples/typing-animation-demo-7.tsx、examples/typing-animation-demo-8.tsx
TypingAnimation.cursorStyle (typing-animation)原生光标样式：line、block 或 underscore。examples/typing-animation-demo-8.tsx

交互与状态检查

  • 打字动画 · 默认示例 — typing-animation-demo
  • 打字动画 · 示例 2 — typing-animation-demo-2
  • 打字动画 · 示例 3 — typing-animation-demo-3
  • 打字动画 · 示例 4 — typing-animation-demo-4
  • 打字动画 · 示例 5 — typing-animation-demo-5
  • 打字动画 · 示例 6 — typing-animation-demo-6
  • 打字动画 · 示例 7 — typing-animation-demo-7
  • 打字动画 · 示例 8 — typing-animation-demo-8

这些名称是实际示例入口，不是新增组件属性或独立组件数量。选择对应示例后，检查指针/键盘行为、深浅色、手机尺寸和加载失败；纯装饰特效不应伪造禁用、错误或提交状态。完整示例安装包含其真实依赖闭包。

业务接入边界

使用原生 children/words 与对应时间单位；这是脚本文字，不是服务端流式内容。

宿主与动画配置

初始化 Tailwind CSS v4、语义 CSS 变量及 dark 变体；按本地 Registry 的独立命名空间导入。复用已有 next-themes Provider，不混入 JGuang UI/Base UI/HeroUI API。进入视口再挂载特效，离开后卸载；为 Canvas/WebGL 不可用、网络媒体失败提供静态替代。遵循 prefers-reduced-motion，并验证计时器、RAF、观察器和事件监听已清理；不能仅凭 CSS 停止就宣称引擎已停止。示例不提供后端、登录、支付或真实 AI 流。这里的实用指南为双语，上游详细参考和演示文本仍保留原文。

可用状态与示例

打字动画 · 默认示例、打字动画 · 示例 2、打字动画 · 示例 3、打字动画 · 示例 4、打字动画 · 示例 5、打字动画 · 示例 6、打字动画 · 示例 7、打字动画 · 示例 8

组件中的状态与数据为演示用途，不包含后端接口。接入实际项目时请检查源码中的公开参数，再连接业务数据。

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> 
npx shadcn@latest add @magicui/typing-animation
</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

Basic Usage

Multiple Words with Loop

Custom Speed

Start on View

Without Cursor

Single Play (No Loop)

Cursor Blinking

Cursor Styles

Usage

import { TypingAnimation } from "@/components/ui/typing-animation"

<TypingAnimation>Hello World! 👋</TypingAnimation>

Props

PropTypeDefaultDescription
childrenstring-Single string to animate
wordsstring[]-Array of strings to type and delete in sequence
classNamestring-The class name to be applied to the component
durationnumber100Duration for each character
typeSpeednumber100Speed of typing animation (ms per character)
deleteSpeednumber50Speed of deleting animation (ms per character)
delaynumber0Delay before animation starts (in ms)
pauseDelaynumber1000Pause duration between words (in ms)
loopbooleanfalseWhether to loop the animation
as"article" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "p" | "section" | "span""span"Component to render as
startOnViewbooleantrueStart animation when component is in view
showCursorbooleantrueWhether to show the typing cursor
blinkCursorbooleantrueWhether the cursor should blink
cursorStyle"line" | "block" | "underscore""line"Style of the cursor (like VSCode)

完整示例安装

组件安装命令只安装组件；下列示例命令还包含该示例实际导入的其他组件、原生辅助 UI、工具和固定版本依赖。辅助源码不算独立组件。

打字动画 · 默认示例

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo.json

默认导入: @/components/magicui/examples/typing-animation-demo

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 2

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-2.json

默认导入: @/components/magicui/examples/typing-animation-demo-2

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 3

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-3.json

默认导入: @/components/magicui/examples/typing-animation-demo-3

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 4

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-4.json

默认导入: @/components/magicui/examples/typing-animation-demo-4

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 5

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-5.json

默认导入: @/components/magicui/examples/typing-animation-demo-5

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 6

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-6.json

默认导入: @/components/magicui/examples/typing-animation-demo-6

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 7

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-7.json

默认导入: @/components/magicui/examples/typing-animation-demo-7

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

打字动画 · 示例 8

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/typing-animation/typing-animation-demo-8.json

默认导入: @/components/magicui/examples/typing-animation-demo-8

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

最小使用与主题

import Demo from '@/components/magicui/examples/typing-animation-demo';
import { ThemeProvider } from 'next-themes';
export default function Example() {
  return <ThemeProvider attribute="class" defaultTheme="system" enableSystem><Demo /></ThemeProvider>;
}

项目须先配置 Tailwind CSS v4、语义颜色变量和 dark 变体。已有 next-themes Provider 时复用它，不要重复嵌套。Next Link 示例需要 Next.js 环境；静态 Vite 项目可保留原生组件代码，并自行将示例的页面链接改为项目路由。部分演示图片、视频和推文依赖网络；示例不包含登录或后端服务。实用指南与示例标签已提供中文，上游详细英文参考及演示数据未宣称全文翻译。

源码参数参考

以下实现签名和类型从本地固定版本源码生成。保留可选属性、原生继承类型、联合分支和 never 限制；不会将其他设计系统的 API 混入。forwardRef 实现中的 ref 属于 React 引用，不是新增业务属性。此区域是原始类型参考，不是上游说明的全文翻译。

TypingAnimation({
  children,
  words,
  className,
  duration = 100,
  typeSpeed,
  deleteSpeed,
  delay = 0,
  pauseDelay = 1000,
  loop = false,
  as: Component = "span",
  startOnView = true,
  showCursor = true,
  blinkCursor = true,
  cursorStyle = "line",
  ...props
}: TypingAnimationProps)

type MotionElementType = Extract<
  keyof DOMMotionComponents,
  keyof typeof motionElements
>

interface TypingAnimationProps extends Omit<MotionProps, "children"> {
  children?: string
  words?: string[]
  className?: string
  duration?: number
  typeSpeed?: number
  deleteSpeed?: number
  delay?: number
  pauseDelay?: number
  loop?: boolean
  as?: MotionElementType
  startOnView?: boolean
  showCursor?: boolean
  blinkCursor?: boolean
  cursorStyle?: "line" | "block" | "underscore"
}

源码中的解构默认值

只列出直接写在参数或 props 解构中的默认表达式。条件表达式、运行时主题和其他计算值请结合源码；这里不是全部行为的默认值清单。

// TypingAnimation
duration = 100

// TypingAnimation
delay = 0

// TypingAnimation
pauseDelay = 1000

// TypingAnimation
loop = false

// TypingAnimation
as = "span"

// TypingAnimation
startOnView = true

// TypingAnimation
showCursor = true

// TypingAnimation
blinkCursor = true

// TypingAnimation
cursorStyle = "line"

原生与外部类型

以下外部类型仍由 React 或资源自身依赖定义，没有手工展开为虚构属性。实际可用类型以安装版本的 TypeScript 检查为准。

Omit<MotionProps, "children">
MotionProps
Extract<
  keyof DOMMotionComponents,
  keyof typeof motionElements
>
DOMMotionComponents