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.

Install using CLI

npm

pnpm

bun

yarn

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

MorphingText.vue

Prop Name	Type	Default	Description
`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.

On This Page