# benday: your logo, halftoned into a thinking indicator

benday turns any logo into an animated field of Ben-Day dots and uses it as the "thinking" indicator in an AI or agent interface. Instead of a generic spinner, the wait is your own mark, breathing and rippling and settling back into itself when the work is done.

It ships as an open-code [shadcn registry](https://ui.shadcn.com/docs/cli) component: the CLI copies seven TypeScript files into your project and they belong to you from that point on. React is the only import, there is no package to depend on, and nothing has to be added to `components.json`.

## Install

```bash
bunx shadcn@latest add @benday/benday
```

```tsx
import { Benday } from "@/components/ui/benday";

<Benday src="/logo.svg" state={isThinking ? "thinking" : "done"} />;
```

`thinking` runs the animation. `idle` and `done` show the crisp mark, and the dots spring back into it.

## How it works

The image is rasterized once and its ink separated from its background, by alpha or by a luminance mask. A Euclidean distance transform gives every pixel its depth inside the shape, and the result is grid-sampled into a **dot map**: a few hundred dots carrying position, ink coverage, tone and depth.

That dot map is all the renderer animates. It resolves `currentColor` against the canvas, stops painting off-screen, and honours `prefers-reduced-motion`. Bake at build time, pass `dotMap` instead of `src`, and the client skips the rest.

## Presets

- `contour`, **Contour** (Signature): A wave follows the mark’s thickness from outline to core.
- `shimmer`, **Shimmer** (Signature): A lit band sweeps across the mark on the diagonal.
- `ripple`, **Ripple** (Signature): Concentric rings pulse outward from the center.
- `breathe`, **Breathe** (Signature): The whole mark swells and settles with a soft edge delay.
- `scan`, **Scan** (Sweep): A narrow vertical beam traverses the silhouette.
- `cascade`, **Cascade** (Sweep): One signal follows the lattice in serpentine order.
- `weave`, **Weave** (Sweep): Counter-moving diagonal bands cross through the mark.
- `rain`, **Rain** (Sweep): Offset droplets descend each column with soft tails.
- `swirl`, **Swirl** (Orbit): The mark twists around its center, with outer dots lagging.
- `orbit`, **Orbit** (Orbit): A soft energy point circles the center of the mark.
- `comet`, **Comet** (Orbit): A bright head and tapered tail chase around the mark.
- `radar`, **Radar** (Orbit): A rotating search beam crosses the logo with a soft wake.
- `pinwheel`, **Pinwheel** (Orbit): Three curved blades rotate around a steady core.
- `beacon`, **Beacon** (Orbit): Emphasis hands off between the four cardinal directions.
- `flicker`, **Flicker** (Field): A stable random subset of dots blinks at any moment.
- `wave`, **Wave** (Field): A soft traveling current bends the dot lattice.
- `equalizer`, **Equalizer** (Field): Independent column levels rise and fall like a spectrum.
- `resolve`, **Resolve** (Field): Dots assemble in stable random order, then dissolve.
- `scatter`, **Scatter** (Transform): Dots drift off the lattice, then reconverge into the mark.
- `magnetic`, **Magnetic** (Transform): The field pulls toward its center and releases.
- `glitch`, **Glitch** (Transform): Brief horizontal faults disturb a few rows, then clear.

A preset is a pure function of one dot and the clock, so writing your own is a dozen lines: pass a function to `preset` instead of a name.

## Where to go next

- [Usage and API reference](/usage.md): install, bake options, every prop
- [Playground](/playground.md): drop a logo in and tune it live
- [About the project](/about.md): what it is, who maintains it, the license

---

Canonical HTML: <https://benday.kacemmathlouthi.dev/>
Agent index: <https://benday.kacemmathlouthi.dev/llms.txt>