Pixel Highlight

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

Collection

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

PropertyTypeDefaultDescription
textstring-
Text to render as the pixel highlight animation.
childrennode-
Custom React content used instead of the text prop.
colorsstringgradient
Comma-separated color values randomly applied to animated pixels.
gapnumber6
Distance between pixels. Smaller values create denser highlights.
speednumber80
Controls how fast pixels appear and shimmer.
directionenumcenter
Direction from which the pixel animation originates.
opacitynumber1
Overall transparency of the pixel canvas layer.
fontSizestring | number20
Font size of the text mask. Numbers scale responsively.
fontWeightstring | numberbold
Weight of the text used for the pixel mask.
fontFamilystringsans
Font family applied to the text mask.
classNamestring-
Additional class names for the root container.

Built withby Ahdeetai.