DocsDithered 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

Dependencies: clsx tailwind-merge

Usage

API Reference

PropTypeDefault
imageSrcstring

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

—
gridSizenumber

Maximum sampled image dimension before dithering.

200
scalenumber

Relative scale of the generated particle logo inside the canvas.

0.5
dotScalenumber

Multiplier for each rendered particle size.

1
invertboolean

Invert the generated dithered mask.

true
cornerRadiusnumber

Rounded mask radius used when invert mode is enabled.

0.2
thresholdnumber

Brightness threshold for error-diffusion dithering.

180
contrastnumber

Contrast adjustment applied before dithering.

0
gammanumber

Gamma correction applied before dithering.

1
blurnumber

Image blur amount applied before sampling the grayscale grid.

3.75
diffusionStrengthnumber

Strength of the Floyd-Steinberg error diffusion.

1
serpentineboolean

Alternate dither scan direction on every row.

true
particleColorstring

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

"currentColor"
classNamestring

Additional CSS classes for the root element.

—

Working with this component

Start with a clear asset

Choose a recognizable logo with enough contrast to survive conversion into dots. The source samples image pixels, so try the real asset before choosing final settings.

Image access

Serve the image locally or configure the remote server for cross-origin image access. Canvas pixel sampling can fail on an image that loads visually but does not permit cross-origin reading.

Preserve the identity

Keep the company or product name available as text outside the decorative canvas. Use the particle effect to accompany a recognizable identity, especially on touch devices.

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
PreviousDither GradientNextImage Ripple Effect
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>