Lab/17

Pixel Portrait

The image is averaged into blocks, then drawn as color blocks, a three-tone ordered dither, or halftone dots. A lens around the cursor shows the source.

Canvas
Image

Hover or drag to reveal

lab/pixel-portrait

dither / 10px40x40

Block size10px

Installation

Add Pixel Portrait to your project with the shadcn CLI. The files land in components/lab, ready to edit.

$ pnpm dlx shadcn@latest add @soultel/lab-pixel-portrait

Or by URL: https://asafefe.dev/r/lab-pixel-portrait.json

Brings along

utils
@soultel/lab-canvas

Usage

example.tsx12 lines

import { PixelPortrait } from "@/components/lab/pixel-portrait"

export function Example() {
  return (
    <PixelPortrait
      src="/avatar.png"
      alt="Portrait"
      mode="dither"
      className="max-w-sm rounded-xl"
    />
  )
}

Props

Prop	Type	Default	Description
src	string	-	Same-origin or CORS-enabled image. Cropped to a centered square.
alt	string	-	Accessible description.
mode	"blocks" \| "dither" \| "dots"	"dither"	Render style.
block	number	10	Block size in px.
lens	boolean	true	Reveal the original around the pointer.
circle	boolean	false	Clip to a circle instead of the square.
tones	[string, string, string]	["var(--foreground)", "var(--primary)", "var(--background)"]	Dither tones, dark to light.
dotColor	string	"var(--foreground)"	Halftone dot color.
contrast	number	1.35	Contrast boost before dither and halftone.