# Dithered logo

An SVG or PNG logo redrawn on a pixel grid: exact edges, a dithered fill inside, and an optional shimmer or scan line.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The dithercn agent skill, for building any dither on the engine, is at [/.well-known/agent-skills/dithercn/SKILL.md](/.well-known/agent-skills/dithercn/SKILL.md).

<ComponentPreview src="examples/dithered-logo-demo.tsx" controls="ditheredLogoControls">
  <DitheredLogoDemo />
</ComponentPreview>

## Installation [#installation]

<InstallBlock name="dithered-logo" />

## Usage [#usage]

```tsx
import { DitheredLogo } from "@/components/dithercn/dithered-logo";

export function Brand() {
  return <DitheredLogo src="/logo.svg" alt="Acme" className="h-8" />;
}
```

Set a height with `className`; the width follows the logo's own ratio. The logo is drawn on a grid of whole device pixels and cut at half coverage, so every edge lands on a cell boundary instead of fraying into noise. A solid outline one cell wide keeps the shapes exact, and the inside takes the `fill`: a gradient that thins towards the bottom, dots, hatching, or solid ink.

By default every part of the logo becomes one ink, `color`. With `tone="original"` it keeps the file's own colours.

## Examples [#examples]

### One treatment for many logos [#one-treatment-for-many-logos]

Logos from different brands, drawn with the same fill and colour, read as one set. Here the hatched fill in grey.

<ComponentPreview src="examples/dithered-logo-set.tsx">
  <DitheredLogoSet />
</ComponentPreview>

### Colour [#colour]

The same three-colour mark with `tone="original"`, and in one palette colour.

<ComponentPreview src="examples/dithered-logo-colour.tsx">
  <DitheredLogoColour />
</ComponentPreview>

### Scan line [#scan-line]

A 3px cell turns the wordmark into pixel art. `effect="scan"` runs a bright line down it every `period` seconds and leaves solid ink behind for a moment.

<ComponentPreview src="examples/dithered-logo-scan.tsx">
  <DitheredLogoScan />
</ComponentPreview>

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | `string` |  | SVG or PNG URL. Files from another origin need CORS headers. |
| `alt` (required) | `string` |  | The brand name for screen readers. "" hides the logo. |
| `color` | `DitherColor` | `"ink"` | The ink. A palette name or any CSS colour. |
| `tone` | `"mono" \| "original"` | `"mono"` | One ink, or the file's own colours. |
| `fill` | `"gradient" \| "dotted" \| "hatched" \| "solid"` | `"gradient"` | Texture inside the shapes. |
| `outline` | `boolean` | `true` | A solid outline one cell wide, so shapes stay exact with an open fill. |
| `floor` | `number` | `0.3` | Gradient fill: the share of ink left at the bottom of the logo. |
| `matrix` | `"bayer2" \| "bayer4" \| "bayer8" \| "blue-noise"` | `"bayer4"` | Threshold pattern for the gradient fill and the effects. |
| `cell` | `number` | `1` | Size of one cell in CSS pixels. Larger cells give a chunkier, pixel-art mark. |
| `effect` | `"none" \| "shimmer" \| "scan"` | `"none"` | A diagonal band of solid ink, or a bright scan line, sweeping across the logo. |
| `period` | `number` | `6` | Seconds per sweep. |
| `phase` | `number` | `0` | Where in the sweep this logo starts, 0 to 1. Offsets logos in a row. |
| `source` | `"alpha" \| "dark"` | `"alpha"` | "alpha" for transparent backgrounds, "dark" for a dark logo on an opaque light background. |
| `ratio` | `number` | `The logo's ratio` | Width over height. Set it to reserve space before the logo loads. |

## Notes [#notes]

* The root has `role="img"` with the brand name as its label.
* SVGs need a `width` and `height` (or a `viewBox` the browser can size) so the logo has a ratio. SVGs are rasterised by the browser at the exact cell size, so curves stay smooth.
* Effects run at 30 fps only while the logo is on screen, and stop under reduced motion. Without one, the logo is drawn once and redrawn only on resize or theme change.