React Text Hover Effect

Powered by

Motion

Most hover text effects just change color or add underlines—boring interactions that users ignore. This component creates an interactive gradient spotlight that follows your cursor, revealing colorful text as you move around. The effect uses SVG masking and radial gradients to create that "flashlight revealing hidden content" feel that actually makes users want to explore.

Interactive gradient reveal following cursor movement

Text that reveals vibrant colors through cursor-controlled spotlight effects:

import { TextHoverEffect } from '@/components/ui/shadcn-io/text-hover-effect';const TextHoverEffectDemo = () => {  return (   <div className="h-[40rem] flex items-center justify-center p-20">      <TextHoverEffect text="SHADCN" />    </div>  );};export default TextHoverEffectDemo;

'use client';import React, { useRef, useEffect, useState } from 'react';import { motion } from 'motion/react';export const TextHoverEffect = ({  text,  duration,}: {  text: string;  duration?: number;  automatic?: boolean;}) => {  const svgRef = useRef<SVGSVGElement>(null);  const [cursor, setCursor] = useState({ x: 0, y: 0 });  const [hovered, setHovered] = useState(false);  const [maskPosition, setMaskPosition] = useState({ cx: '50%', cy: '50%' });  useEffect(() => {    if (svgRef.current && cursor.x !== null && cursor.y !== null) {      const svgRect = svgRef.current.getBoundingClientRect();      const cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;      const cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;      setMaskPosition({        cx: `${cxPercentage}%`,        cy: `${cyPercentage}%`,      });    }  }, [cursor]);  return (    <svg      ref={svgRef}      width="100%"      height="100%"      viewBox="0 0 300 100"      xmlns="http://www.w3.org/2000/svg"      onMouseEnter={() => setHovered(true)}      onMouseLeave={() => setHovered(false)}      onMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}      className="select-none"    >      <defs>        <linearGradient          id="textGradient"          gradientUnits="userSpaceOnUse"          cx="50%"          cy="50%"          r="25%"        >          {hovered && (            <>              <stop offset="0%" stopColor="#eab308" />              <stop offset="25%" stopColor="#ef4444" />              <stop offset="50%" stopColor="#3b82f6" />              <stop offset="75%" stopColor="#06b6d4" />              <stop offset="100%" stopColor="#8b5cf6" />            </>          )}        </linearGradient>        <motion.radialGradient          id="revealMask"          gradientUnits="userSpaceOnUse"          r="20%"          initial={{ cx: '50%', cy: '50%' }}          animate={maskPosition}          transition={{ duration: duration ?? 0, ease: 'easeOut' }}        >          <stop offset="0%" stopColor="white" />          <stop offset="100%" stopColor="black" />        </motion.radialGradient>        <mask id="textMask">          <rect            x="0"            y="0"            width="100%"            height="100%"            fill="url(#revealMask)"          />        </mask>      </defs>      <text        x="50%"        y="50%"        textAnchor="middle"        dominantBaseline="middle"        strokeWidth="0.3"        className={`fill-transparent  font-[helvetica] text-7xl font-bold ${hovered ? 'stroke-transparent' : 'stroke-gray-400`'}`}      >        {text}      </text>      <motion.text        x="50%"        y="50%"        textAnchor="middle"        dominantBaseline="middle"        strokeWidth="0.3"        className={`fill-transparent font-[helvetica] text-7xl font-bold ${hovered ? 'stroke-transparent' : 'stroke-gray-400'}`}        initial={{ strokeDashoffset: 1000, strokeDasharray: 1000 }}        animate={{          strokeDashoffset: 0,          strokeDasharray: 1000,        }}        transition={{          duration: 4,          ease: 'easeInOut',        }}      >        {text}      </motion.text>      <text        x="50%"        y="50%"        textAnchor="middle"        dominantBaseline="middle"        stroke="url(#textGradient)"        strokeWidth="0.3"        mask="url(#textMask)"        className="fill-transparent font-[helvetica] text-7xl font-bold"      >        {text}      </text>    </svg>  );};

Built with TypeScript and Motion for React applications, using SVG masking techniques and real-time cursor tracking. The gradient follows your mouse with smooth easing, creating an engaging reveal effect that transforms static text into interactive art.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/text-hover-effect.json

npx shadcn@latest add https://www.shadcn.io/registry/text-hover-effect.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/text-hover-effect.json

bunx shadcn@latest add https://www.shadcn.io/registry/text-hover-effect.json

Usage

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

<TextHoverEffect
  text="shadcn.io"
  duration={0.1}
  className="w-full max-w-2xl"
/>;

Why most text hover effects suck

Most developers add basic CSS transitions—color changes, underlines, or simple opacity shifts. The result feels predictable and static. Users hover once, see the same effect everywhere, and stop engaging. There's no exploration, no discovery, just another routine hover state.

This React component uses SVG radial gradient masking that follows cursor position in real-time. The text starts invisible except for subtle outlines, then reveals through a colorful spotlight that tracks mouse movement. The gradient contains five vibrant colors that create rich, dynamic reveals as users explore different areas.

The key insight: cursor tracking creates personalized interactions. When the effect responds to exactly where users point, they feel in control. The large reveal radius means slight movements create significant visual changes, encouraging users to "paint" the text with their cursor.

Features

• Real-time cursor tracking with smooth gradient positioning for React applications
• SVG-based masking with five-color rainbow gradient (yellow, red, blue, cyan, purple)
• Stroke animation that draws text outline on initial load
• Configurable animation duration for cursor following responsiveness
• Complete TypeScript support with customizable text and styling options
• Performance optimized with SVG rendering and GPU-accelerated transforms
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

TextHoverEffect

Interactive text component with cursor-following gradient reveal effects.

Optimal Cursor Responsiveness

Choose cursor following speed based on content:

Gradient Color Palette

The five-color gradient creates rich visual variety:

Common gotchas

Cursor tracking feels laggy: Default 0s duration provides instant cursor following in React applications. If movement feels too snappy, add 0.1-0.2s duration for smoother transitions in TypeScript projects.

Text doesn't appear on hover: The component uses SVG masking where text is initially invisible in JavaScript applications. Make sure container has sufficient dimensions and the text fits within the 300x100 viewBox in Next.js projects.

Gradient colors not visible: Colors only appear on hover with proper mask positioning in React applications. The radial gradient requires cursor movement within the SVG bounds to reveal the colorful text in TypeScript projects.

Performance issues on mobile: SVG cursor tracking is optimized for desktop interactions in JavaScript applications. Touch devices may not trigger the reveal effect since there's no continuous cursor position. Consider alternative interactions for mobile in React projects.

Text gets cut off: The component uses a fixed viewBox (300x100) for SVG rendering in TypeScript applications. Longer text might need viewBox adjustments or responsive sizing strategies in Next.js projects.

Integration with other components

Perfect for hero sections in Card layouts or interactive branding in Badge components within React applications. Works excellently as centerpiece text for landing pages or Dialog titles in Next.js projects.

For portfolio sites, combine with Avatar for name reveals or Button components for call-to-action highlights. This TypeScript component pairs well with Tabs for section headers and Progress indicators, all with seamless shadcn/ui integration.

Questions developers actually ask