Cursor Highlight

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

Installation

npx shadcn@latest add @scrollxui/cursor-highlight

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

Gradient

Pointer

Selection

Top

Botttom

Left

Right

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.