Cursor Highlight

Text is revealed on scroll with pointer, gradient, and border effects.

ScrollX UI

Installation

npx shadcn@latest add https://scrollxui.dev/registry/cursor-highlight.json

Usage

import { CursorHighlight } from "@/components/ui/cursor-highlight";

<CursorHighlight
    className="text-2xl sm:text-3xl md:text-4xl font-bold"
    gradient="from-pink-500 via-red-500 to-yellow-500"
    showPointer={true}
    pointerClassName="text-pink-500"
    direction="right"
    rectangle="bg-pink-200 dark:bg-green-950 border-blue dark:border-white/20 rounded-lg p-4"
  >
    <h1>Premium</h1>
  </CursorHighlight>

Examples

Default

ScrollX UI

Gradient

ScrollX UI

Pointer

ScrollX UI

Selection

ScrollX UI

Top

ScrollX UI

Botttom

ScrollX UI

Left

ScrollX UI

Right

ScrollX UI

API Reference

Cursor Highlight

Text is revealed on scroll with pointer, gradient, and border effects.

Props

Property	Type	Default	Description
`text`	string	`-`	Text content to be highlighted. If not provided, `children` will be used.
`children`	ReactNode	`-`	Any React node to be highlighted, used when `text` is not provided.
`className`	string	`-`	Custom classes for styling the text.
`gradient`	string	`purple gradient`	Tailwind gradient classes used for the highlight animation.
`direction`	"left" \| "right" \| "top" \| "bottom"	`"left"`	The animation direction for the gradient filling effect.
`animate`	boolean	`false`	Controls whether the highlight animation plays.
`duration`	number	`2`	Duration (in seconds) of the highlight animation.
`showPointer`	boolean	`false`	Whether to display a moving pointer along the highlight.
`pointerDuration`	number	`1`	Duration (in seconds) of the pointer's movement.
`pointerClassName`	string	`-`	Custom classes for styling the pointer.
`containerClassName`	string	`-`	Custom classes for styling the outer container element.
`rectangle`	boolean \| string	`false`	Enables a rectangle border around the text.