Text Hover Effect

Installation

$ pnpm dlx shadcn@latest add @byphongphan/text-hover-effect

Anatomy

TextHoverEffect (SVG container with pure math SSR viewBox)├── <defs>│   ├── <linearGradient> (Multi-stop gradient for letter fill)│   ├── <motion.radialGradient> (Spotlight circle tracking cursor coords)│   └── <mask> (Applies radial spotlight as a stencil over text)├── <text (hidden)> (Invisible DOM element for sub-pixel bbox measuring)├── <text (outline)> (Faint stroke that fades in on hover)├── <motion.text (stroke)> (Entrance animation drawing character contours)└── <text (revealed)> (Gradient-colored fill clipped by radial mask)

Usage

import { TextHoverEffect } from "@/components/text-hover-effect"

export function HeroSection() {  return (    <div className="mx-auto h-40 w-full max-w-2xl">      <TextHoverEffect text="PORTFOLIO" />    </div>  )}

Features

• SSR-Safe Pure-Math ViewBox: Calculates an accurate initial SVG bounding box mathematically without requiring client DOM access, preventing layout shift and hydration mismatches.
• Isolated Multi-Instance IDs: Automatically scopes SVG gradient, filter, and mask IDs with useId(), allowing multiple independent instances on the same page without cursor conflict.
• Dynamic Gradient Palettes: Pass custom hex color arrays to match brand guidelines, dark cyberpunk themes, or warm sunset palettes.
• Automatic Ambient Sweep: Activate automatic={true} to continuously sweep the radial spotlight back and forth across the text during idle periods.
• Responsive Vector Geometry: Built entirely with scalable vector graphics that seamlessly fit any container width while preserving sharp typographic contours.

Examples

Automatic Ambient Sweep

Autonomously moves the radial gradient mask across the text back and forth when idle, without requiring cursor interactions.

Cyberpunk Neon Palette

Customize the gradient stops with electric cyan, blue, violet, and hot magenta tones.

Sunset Palette

Warm, energetic color transitions using gold, orange, and purple hues.

API Reference

TextHoverEffect

Interactive typographic SVG reveal component.