Skip to main content
Create sophisticated text hover effects with gradient outlines and smooth transitions.

​
Usage

<TextHoverEffect
  text="Hover Me"
  :duration="200"
  :strokeWidth="0.75"
  :opacity="null"
/>

​
Props

​
text
string
required
The text to be displayed with the hover effect.
​
duration
number
default:"200"
The duration of the mask transition animation in seconds.
​
strokeWidth
number
default:"0.75"
The width of the text stroke.
​
opacity
number
default:"null"
The opacity of the text.

Build docs developers (and LLMs) love

Get started for freeTalk to us