Usage

@benday is a namespace in shadcn’s registry directory, so nothing goes in your components.json. The code lands at components/ui/benday.tsx and components/ui/benday/*, and is yours to edit.

components/ui/├── benday.tsx          the component and the public exports└── benday/    ├── bake.ts         image → dot map    ├── dom.ts          colour, theme, visibility, DPR    ├── presets.ts      the twenty-one animations    ├── renderer.ts     the canvas painter    ├── types.ts        every exported type    └── use-dot-map.ts  the React binding

Every file’s source is the content field of /r/benday.json. Only React is required — there is nothing else to install.

import { Benday } from "@/components/ui/benday";
export function Example() {  return <Benday src="/logo.svg" size={64} />;}

currentColor is the default and re-resolves when the theme flips, so the mark tracks surrounding text on its own.

<Benday src="/logo.svg" bake={{ grid: 24, dilate: 1 }} />

The playground is the fast way to find settings that hold up at your smallest size.

A preset is a function of one dot and the clock, so you can pass your own instead of a name.

// scripts/bake-logo.ts — run once, commit the JSON.import { writeFile } from "node:fs/promises";import { bake } from "@/components/ui/benday";
const dotMap = await bake("./public/logo.svg", { grid: 24 });await writeFile("./src/logo-dots.json", JSON.stringify(dotMap));

import dotMap from "@/logo-dots.json";
<Benday dotMap={dotMap} size={64} />;

dotMap wins over src, so nothing rasterizes on mount and the mark is there on the first frame. A 24-dot map is a few KB of JSON. bake draws through a canvas, so the script needs a DOM — run it under Playwright, jsdom with node-canvas, or any browser context. Settle the bake options in the playground first, then pass the same ones here.

import { Benday } from "@/components/ui/benday";
export function SaveButton({ isSaving }: { isSaving: boolean }) {  return (    <button      className="inline-flex items-center gap-2 rounded-md border px-3 py-2"      disabled={isSaving}      type="button"    >      {isSaving ? (        <Benday src="/logo.svg" size={18} bake={{ grid: 10 }} />      ) : null}      <span>{isSaving ? "Saving…" : "Save changes"}</span>    </button>  );}

Note the grid override: at 18px a 24-dot grid gives sub-pixel dots that read as grey fuzz.

• Coarser grid for smaller sizes. Below roughly 1.6px per dot the mark stops reading.
• Thin strokes vanish. A dilate of 1 to 3px rescues a hairline logo; drop threshold alongside it.
• Wide wordmarks want fit="natural", or a square letterboxes away half their size.
• One indicator per pending region. Several at once compete.
• Motion is decorative: role="img" with a per-state label, and one static frame under prefers-reduced-motion.