Text Hover Effect

SVG text with animated stroke on load and a colorful gradient reveal effect on hover. Creates an engaging, interactive typography experience.

Preview

NYXHORANYXHORANYXHORA

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/text-hover-effect.json

Usage

tsx
9 lines
1
2
3
4
5
6
7
8
9
import { TextHoverEffect } from "@/components/ui/text-hover-effect"

export default function Hero() {
  return (
    <div className="h-[200px] flex items-center justify-center">
      <TextHoverEffect text="HOVER ME" />
    </div>
  )
}

Examples

Different Text

DESIGNDESIGNDESIGN

With Smooth Transition

SMOOTHSMOOTHSMOOTH

Short Text

UIUIUI

Props

PropTypeDefaultDescription
textstringrequiredThe text to display with the hover effect
durationnumber0Transition duration in seconds for the gradient mask movement (0 for instant)

Styling Notes

• The component uses SVG text with a viewBox of 0 0 300 100. This means short text will appear larger, long text will appear smaller.

• The text uses Helvetica font by default for a clean, modern look.

• The gradient colors are: yellow → red → blue → cyan → violet.