Text Highlight

A text effect that fill background of a text to highlight it.

Install using CLI

npm

pnpm

bun

yarn

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

Copy and paste the following code

TextHighlight.vue

With 3s delay

Rounded text background

Color from CSS variables: use the paintbrush icon in the top right corner to change the color.

With text color change.

Prop Name	Type	Default	Description
`delay`	`number`	`0`	Delay before the animation starts, in `ms`.
`duration`	`number`	`2000`	Duration of the animation, in `ms`.
`text-end-color`	`string`	`inherit`	Color of the text at the end of the animation. Match WCAG recommendations.

On This Page