Docs·Dithered Logo

Dithered Logo

A canvas-rendered particle logo that converts SVG or image assets into an interactive error-diffusion dither field with cursor repulsion and click ripples.

Installation

pnpm dlx shadcn@latest add @componentry/dithered-logo

Usage

API Reference

PropertyTypeDefault
imageSrc

Image or SVG source used to generate the dithered particle field.

string—
gridSize

Maximum sampled image dimension before dithering.

number200
scale

Relative scale of the generated particle logo inside the canvas.

number0.5
dotScale

Multiplier for each rendered particle size.

number1
invert

Invert the generated dithered mask.

booleantrue
cornerRadius

Rounded mask radius used when invert mode is enabled.

number0.2
threshold

Brightness threshold for error-diffusion dithering.

number180
contrast

Contrast adjustment applied before dithering.

number0
gamma

Gamma correction applied before dithering.

number1
blur

Image blur amount applied before sampling the grayscale grid.

number3.75
diffusionStrength

Strength of the Floyd-Steinberg error diffusion.

number1
serpentine

Alternate dither scan direction on every row.

booleantrue
particleColor

Canvas particle color. Uses the element text color by default.

string"currentColor"
className

Additional CSS classes for the root element.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
import { DitheredLogo } from "@/components/ui/dithered-logo"
<div className="h-[600px] w-full bg-white text-black">
  <DitheredLogo
    imageSrc="https://componentry.dev/images/dithered-logo/logo.svg"
    className="h-full w-full"
    gridSize={200}
    scale={0.36}
    dotScale={1}
    invert={true}
    cornerRadius={0.2}
    gamma={1.0}
    blur={3.75}
    diffusionStrength={1.0}
  />
</div>