Morphing Text

This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.

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

通过 CLI 安装

npm

pnpm

bun

yarn

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

复制并粘贴以下代码：

MorphingText.vue

Prop 名称	类型	默认值	描述
`texts`	`string[]`	`[]`	Array of texts to morph between.
`class`	`string`	`""`	Additional classes for the container.
`morphTime`	`number`	`1.5`	Animation execution time.
`coolDownTime`	`number`	`0.5`	Animation dwell time.

本页