Dithered Logo – vgpu React Shader

Open in

A logo with flowing ordered dithering that preserves the source image’s colors. Uses the existing Dither Background shader, image compositing, and a CSS image mask.

Installation

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

1import { DitheredLogo } from "@/components/hangry-ui/components/dithered-logo";
2
3<DitheredLogo
4  src="/your-logo.svg"
5  alt="Your brand"
6  ratio={2}
7  pixelSize={3}
8  speed={0.4}
9  className="max-w-md"
10/>;

Props

Prop	Type	Default	Description
`src`	`string`	`/logo.svg`	SVG or transparent image providing the logo colors and 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]`	`Source image`	Optional foreground RGB override, with channels from 0 to 1. Omit to preserve the source logo colors.
`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