Pixel Highlight

Animated pixel-based text reveal with directional shimmer using canvas-rendered particles.

Installation

npx shadcn@latest add @scrollxui/pixel-highlight

Usage

import { PixelHighlight } from '@/components/ui/pixel-highlight';

<PixelHighlight
  text='Top Down'
  colors='#d8b4fe,#a78bfa,#7c3aed'
  direction='top'
  speed={70}
  gap={3}
  fontSize={12}
  className='w-full h-32'
/>

API Reference

Pixel Highlight

Animated pixel-based text reveal with directional shimmer using canvas-rendered particles.

Props

Property	Type	Default	Description
`text`	string	`-`	Text to render as the pixel highlight animation.
`children`	node	`-`	Custom React content used instead of the text prop.
`colors`	string	`gradient`	Comma-separated color values randomly applied to animated pixels.
`gap`	number	`6`	Distance between pixels. Smaller values create denser highlights.
`speed`	number	`80`	Controls how fast pixels appear and shimmer.
`direction`	enum	`center`	Direction from which the pixel animation originates.
`opacity`	number	`1`	Overall transparency of the pixel canvas layer.
`fontSize`	string \| number	`20`	Font size of the text mask. Numbers scale responsively.
`fontWeight`	string \| number	`bold`	Weight of the text used for the pixel mask.
`fontFamily`	string	`sans`	Font family applied to the text mask.
`className`	string	`-`	Additional class names for the root container.