Dithered Logo

A configurable logo silhouette filled with the animated ordered-dither shader.

A logo silhouette filled with flowing, two-color ordered dithering. Uses the existing Dither Background shader and a CSS image mask.

Installation

text

Add the dithered-logo component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/dithered-logo.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { DitheredLogo } from "@/components/hangry-ui/components/dithered-logo";

<DitheredLogo
  src="/your-logo.svg"
  alt="Your brand"
  ratio={2}
  color={[0.02, 0.86, 0.5]}
  pixelSize={3}
  speed={0.4}
  className="max-w-md"
/>

Props

Prop	Type	Default	Description
`src`	`string`	`/logo.svg`	SVG or transparent image used as the alpha mask.
`alt`	`string`	`Hangry UI`	Accessible logo label. Set to an empty string for a decorative logo.
`ratio`	`number`	`2`	Positive width-to-height ratio of the logo container.
`color`	`[number, number, number]`	`[0.02, 0.86, 0.5]`	Foreground RGB channels from 0 to 1.
`backgroundColor`	`[number, number, number]`	`[0.02, 0.04, 0.035]`	Background RGB channels from 0 to 1.
`pixelSize`	`number`	`3`	Dither cell size in CSS pixels; minimum 1.
`speed`	`number`	`0.4`	Wave speed; set to 0 for a still frame.
Native div props	`ComponentProps`	—	Classes, style, IDs, and native attributes. Children are not supported and color is reserved for the shader.

Dependencies

Motion
vgpu