文字生成效果

一个酷炫的文本效果，在页面加载时文本一个接一个淡入。

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/text-generate-effect.json"

复制并粘贴以下代码：

TextGenerateEffect.vue

Two text with different delay

This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.

Prop 名称	类型	默认值	描述
`words`	`string`	Required	The text to be displayed with the generating effect.
`duration`	`number`	`0.7`	The duration of the text generation animation in seconds.
`delay`	`number`	`0`	The delay before the text generation animation starts in milliseconds.
`filter`	`boolean`	`true`	The blur of the text.

本页