Pixel imagePro

An image downsampled and quantized to the gray ramp or your token palette, drawn with crisp pixels that land on whole device pixels.

Markdown

On this page

ProA portrait quantized to the gray ramp with crisp pixels on whole device pixels, by size, steps and an optional ordered dither.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/pixel-image

Usage

tsx

import { PixelImage } from "@/components/ui/chatcn/pro/pixel-image"

<PixelImage src={avatar.url} alt={avatar.name} columns={12} levels={5} className="size-12 rounded-full" />

Steps run evenly from ink to paper, so the picture keeps its values in light and dark. Pass palette with tokens, dark to light, for your own ramp, and dither for a 4 x 4 ordered pattern between neighboring steps.

Examples

States

ProLoading, a missing file, a gray token palette, a negative, two dithered tones, a column count and avatars.

Props

Prop	Type	Notes
`src`, `alt`	`string`	`alt` is required
`pixelSize`	`number`	CSS px per pixel. Default 8
`columns`	`number`	Pixels across, instead of `pixelSize`
`levels`	`number`	Gray steps. Default 6
`palette`	`string[]`	Tokens or CSS colors, dark to light. Overrides `levels`
`dither`	`boolean`	Ordered dither between steps
`ink`, `paper`	`string`	Ends of the ramp
`contrast`, `brightness`, `invert`		Defaults 1.1, 0, off
`reveal`	`boolean`	Original on hover, focus, or press and hold
`aspectRatio`, `width`, `height`		Hold the frame before the image loads

Keyboard

Key	Action
`Tab`	With `reveal`, focus shows the original

Accessibility

The real <img> with your alt sits underneath; the canvas is hidden from screen readers.
Under forced colors the plain image shows. Under prefers-contrast: more the ramp drops to two tones.
A host without CORS headers shows the plain image instead of an error.

Motion

None. The first draw fades in over 200 ms; reveal crossfades over 150 ms.