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