Pixel Highlight

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

Installation

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

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.