Pixel - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/pixel

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Pixel } from "@/components/ui/pixel"

<Pixel className="h-[400px] w-full">
  <p className="z-10 text-4xl font-semibold">Hello</p>
</Pixel>

Examples

Patterns

Cursor, edges, and random reveal patterns with custom color palettes.

API Reference

Prop	Type	Default	Description
`gap`	`number`	`5`	Pixel grid spacing in pixels.
`speed`	`number`	`35`	Animation speed from 0–100.
`pattern`	`'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'diagonal' \| 'ascend' \| 'edges' \| 'spiral' \| 'cursor' \| 'random'`	`'center'`	Animation reveal pattern.
`darkColors`	`string`	`'#2a2a2a,#3b3b3b,#525252'`	Comma-separated colors for dark mode.
`lightColors`	`string`	`'#d4d4d4,#bdbdbd,#a3a3a3'`	Comma-separated colors for light mode.
`noFocus`	`boolean`	`false`	Disable focus-based activation.

Pixel

gap

speed

pattern

colors

Installation

pnpm dlx shadcn@latest add @saturation-ui/pixel

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Pixel } from "@/components/ui/pixel"

<Pixel className="h-[400px] w-full">
  <p className="z-10 text-4xl font-semibold">Hello</p>
</Pixel>

Examples

Patterns

Cursor

Follows mouse position

Edges

Appears from all edges inward

Random

Randomized reveal order

Cursor, edges, and random reveal patterns with custom color palettes.

API Reference

Prop	Type	Default	Description
`gap`	`number`	`5`	Pixel grid spacing in pixels.
`speed`	`number`	`35`	Animation speed from 0–100.
`pattern`	`'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'diagonal' \| 'ascend' \| 'edges' \| 'spiral' \| 'cursor' \| 'random'`	`'center'`	Animation reveal pattern.
`darkColors`	`string`	`'#2a2a2a,#3b3b3b,#525252'`	Comma-separated colors for dark mode.
`lightColors`	`string`	`'#d4d4d4,#bdbdbd,#a3a3a3'`	Comma-separated colors for light mode.
`noFocus`	`boolean`	`false`	Disable focus-based activation.