Text Hover Effect

A text hover effect that animates and outlines gradient on hover, as seen on x.ai

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/text-hover-effect.json"

复制并粘贴以下代码：

TextHoverEffect.vue

Prop 名称	类型	默认值	描述
`text`	`string`	Required	The text to be displayed with the hover effect.
`duration`	`number`	`200`	The duration of the mask transition animation in seconds.
`strokeWidth`	`number`	`0.75`	The width of the text stroke.
`opacity`	`number`	`null`	The opacity of the text.

本页