hashvatar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Médhy Chabour
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,128 @@
+# hashvatar
+
+Deterministic avatars from any string — wallet address, username, UUID. **Zero dependencies**.
+
+Two modes: **gradient** (radial blends) and **dither** (Bayer halftone + linear gradient).
+
+```bash
+npm install hashvatar
+```
+
+---
+
+## Demo
+
+From the repo root, build then run the demo:
+
+```bash
+npm run build
+npm run demo
+```
+
+Then open **http://localhost:5000/demo/** in your browser. The demo loads the built bundle from `dist/`.
+
+---
+
+## Usage
+
+### Vanilla JS
+
+```js
+import { createHashvatar } from "hashvatar";
+
+const { canvas, destroy } = createHashvatar({
+	hash: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+	size: 64,
+});
+
+document.body.appendChild(canvas);
+
+// Stop animation later if animated:
+destroy();
+```
+
+### React
+
+```tsx
+import { Hashvatar } from 'hashvatar/react';
+
+<Hashvatar hash="vitalik.eth" size={48} />
+<Hashvatar hash="satoshi" size={64} mode="dither" />
+<Hashvatar hash="0x742…44e" size={64} animated tones={['hotpink', '#00ff99']} />
+```
+
+React is an optional peer dependency — only install it if you use `hashvatar/react`.
+
+---
+
+## Options
+
+| Option     | Type                     | Default      | Description                                                           |
+| ---------- | ------------------------ | ------------ | --------------------------------------------------------------------- |
+| `hash`     | `string`                 | —            | Any string. Same string = same avatar.                                |
+| `size`     | `number`                 | `64`         | Canvas size in px (square).                                           |
+| `mode`     | `'gradient' \| 'dither'` | `'gradient'` | Render style.                                                         |
+| `animated` | `boolean`                | `false`      | Animation loop.                                                       |
+| `dotScale` | `number`                 | —            | Dither cell size. If omitted, scales with canvas for consistent look. |
+| `tones`    | `string[]`               | —            | Restrict palette (hex, `oklch()`, CSS color names).                   |
+
+**`createHashvatar(options)`** — returns `{ canvas, colors, destroy }`.
+
+**`renderHashvatar(canvas, options)`** — draws into an existing canvas; returns `destroy()`.
+
+**`hashToColors(hash, tones?, count?)`** — returns the generated OKLCH colors without rendering.
+
+**`hashToSeeds(hash, count)`** — returns `count` deterministic numbers in `[0, 1)` from the hash (for custom rendering or seeding).
+
+---
+
+## Circle / clipping
+
+The canvas is **square**. To show a circle:
+
+```css
+canvas {
+	border-radius: 50%;
+}
+```
+
+The React component already uses `border-radius: 50%` by default. You can also use a rounded square, hexagon via `clip-path`, etc.
+
+---
+
+## Tone constraints
+
+```js
+// Single hue family
+createHashvatar({ hash, tones: ["hotpink"] });
+
+// Multiple
+createHashvatar({ hash, tones: ["#ff6b6b", "#4ecdc4"] });
+
+// oklch
+createHashvatar({ hash, tones: ["oklch(0.65 0.25 310)"] });
+```
+
+---
+
+## Development
+
+```bash
+npm install
+npm run build    # ESM + CJS + types (tsup)
+npm run dev      # watch & rebuild
+npm run demo     # serve on port 5000
+```
+
+---
+
+## Publish
+
+```bash
+npm run build
+npm publish
+```
+
+---
+
+MIT — [Médhy](https://github.com/medhychabour) · [repo](https://github.com/medhychabour/hashvatar)

package/dist/index.cjs

@@ -0,0 +1,428 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createHashvatar: () => createHashvatar,
+  hashToColors: () => hashToColors,
+  hashToSeeds: () => hashToSeeds,
+  oklchToCss: () => oklchToCss,
+  oklchToHex: () => oklchToHex,
+  parseTone: () => parseTone,
+  renderDither: () => renderDither,
+  renderGradient: () => renderGradient,
+  renderHashvatar: () => renderHashvatar
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hash.ts
+function fnv1a(str) {
+  let hash = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash = hash * 16777619 >>> 0;
+  }
+  return hash;
+}
+function seededRng(seed) {
+  let s = seed;
+  return () => {
+    s |= 0;
+    s = s + 1831565813 | 0;
+    let t = Math.imul(s ^ s >>> 15, 1 | s);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hashToSeeds(hash, count) {
+  const base = fnv1a(hash.toLowerCase().trim());
+  const rng = seededRng(base);
+  return Array.from({ length: count }, () => rng());
+}
+
+// src/color.ts
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const n = parseInt(full, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function linearize(c) {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function rgbToOklch(r, g, b) {
+  const rl = linearize(r), gl = linearize(g), bl = linearize(b);
+  const x = 0.4124564 * rl + 0.3575761 * gl + 0.1804375 * bl;
+  const y = 0.2126729 * rl + 0.7151522 * gl + 0.072175 * bl;
+  const z = 0.0193339 * rl + 0.119192 * gl + 0.9503041 * bl;
+  const lm = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
+  const mm = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
+  const sm = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z);
+  const L = 0.2104542553 * lm + 0.793617785 * mm - 0.0040720468 * sm;
+  const a = 1.9779984951 * lm - 2.428592205 * mm + 0.4505937099 * sm;
+  const bk = 0.0259040371 * lm + 0.7827717662 * mm - 0.808675766 * sm;
+  return { l: L, c: Math.sqrt(a * a + bk * bk), h: (Math.atan2(bk, a) * 180 / Math.PI + 360) % 360 };
+}
+function oklchToHex({ l, c, h }) {
+  const hRad = h * Math.PI / 180;
+  const a = c * Math.cos(hRad), b = c * Math.sin(hRad);
+  const lm = l + 0.3963377774 * a + 0.2158037573 * b;
+  const mm = l - 0.1055613458 * a - 0.0638541728 * b;
+  const sm = l - 0.0894841775 * a - 1.291485548 * b;
+  const L3 = lm * lm * lm, M3 = mm * mm * mm, S3 = sm * sm * sm;
+  const rl = 4.0767416621 * L3 - 3.3077115913 * M3 + 0.2309699292 * S3;
+  const gl = -1.2684380046 * L3 + 2.6097574011 * M3 - 0.3413193965 * S3;
+  const bl = -0.0041960863 * L3 - 0.7034186147 * M3 + 1.707614701 * S3;
+  const toSrgb = (v) => {
+    const cv = Math.max(0, Math.min(1, v));
+    return cv <= 31308e-7 ? cv * 12.92 : 1.055 * Math.pow(cv, 1 / 2.4) - 0.055;
+  };
+  return "#" + [rl, gl, bl].map((v) => Math.round(toSrgb(v) * 255).toString(16).padStart(2, "0")).join("");
+}
+function oklchToCss({ l, c, h }) {
+  return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(1)})`;
+}
+function parseTone(tone) {
+  const t = tone.trim();
+  if (/^[a-zA-Z]+$/.test(t)) {
+    if (typeof document === "undefined") return null;
+    const tmp = document.createElement("canvas");
+    tmp.width = tmp.height = 1;
+    const ctx = tmp.getContext("2d");
+    ctx.fillStyle = t;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    if (r + g + b > 0 || t.toLowerCase() === "black") return rgbToOklch(r, g, b);
+    return null;
+  }
+  if (t.startsWith("#") || /^[0-9a-f]{3,6}$/i.test(t)) {
+    const rgb = hexToRgb(t.startsWith("#") ? t : "#" + t);
+    return rgbToOklch(...rgb);
+  }
+  const m = t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)\s*\)/i);
+  if (m) {
+    const l = m[1].endsWith("%") ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
+    return { l, c: parseFloat(m[2]), h: parseFloat(m[3]) };
+  }
+  return null;
+}
+function generateColor(seed, lSeed, cSeed, tones, isSecondary = false, baseHue) {
+  let h, l, c;
+  if (tones && tones.length > 0) {
+    const ti = Math.floor(seed * tones.length) % tones.length;
+    const tone = tones[ti];
+    h = (tone.h + (seed * 2 - 1) * 30 + 360) % 360;
+    l = isSecondary ? 0.22 + lSeed * 0.18 : 0.52 + lSeed * 0.22;
+    c = isSecondary ? Math.max(tone.c * 0.5, 0.06) + cSeed * 0.08 : Math.max(tone.c * 0.8, 0.14) + cSeed * 0.1;
+  } else {
+    const hue = baseHue ?? seed * 360;
+    h = (hue + 360) % 360;
+    if (isSecondary) {
+      l = 0.18 + cSeed * 0.2;
+      c = 0.08 + lSeed * 0.12;
+    } else {
+      l = 0.55 + lSeed * 0.22;
+      c = 0.18 + cSeed * 0.18;
+    }
+  }
+  return { l, c: Math.min(c, 0.37), h };
+}
+
+// src/gradient.ts
+var SHAPES = [
+  [[0.85, 0.5], [0.75, 0.18], [0.38, 0.22], [0.18, 0.52], [0.38, 0.82], [0.72, 0.78]],
+  [[0.22, 0.32], [0.78, 0.28], [0.82, 0.62], [0.5, 0.88], [0.18, 0.68], [0.28, 0.48]],
+  [[0.5, 0.12], [0.88, 0.45], [0.72, 0.88], [0.28, 0.82], [0.12, 0.42], [0.35, 0.18]],
+  [[0.62, 0.25], [0.9, 0.55], [0.65, 0.9], [0.25, 0.7], [0.1, 0.4], [0.35, 0.15]],
+  [[0.15, 0.2], [0.55, 0.08], [0.92, 0.35], [0.78, 0.75], [0.4, 0.92], [0.2, 0.6]],
+  [[0.45, 0.08], [0.82, 0.3], [0.7, 0.85], [0.3, 0.88], [0.08, 0.5], [0.25, 0.25]]
+];
+function drawBlurredShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, offsetX, offsetY) {
+  const cx = size / 2;
+  const cy = size / 2;
+  ctx.save();
+  ctx.translate(offsetX + cx, offsetY + cy);
+  ctx.translate(tx, ty);
+  ctx.rotate(rotate);
+  ctx.scale(scale, scale);
+  ctx.translate(-cx, -cy);
+  ctx.beginPath();
+  ctx.moveTo(path[0][0] * size, path[0][1] * size);
+  for (let i = 1; i < path.length; i++) {
+    ctx.lineTo(path[i][0] * size, path[i][1] * size);
+  }
+  ctx.closePath();
+  ctx.fillStyle = fillStyle;
+  ctx.fill();
+  ctx.restore();
+}
+function renderGradient(canvas, { size, colors, animated = false, seeds }) {
+  if (colors.length < 4) return null;
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  const mix = seeds[0].toString() + seeds[1].toString() + seeds[2].toString() + seeds[3].toString();
+  const allSeeds = hashToSeeds(mix, 24);
+  const layers = [0, 1, 2, 3, 4, 5].map((i) => {
+    const j = i * 4;
+    return {
+      tx: (allSeeds[j] - 0.5) * size * 0.35,
+      ty: (allSeeds[j + 1] - 0.5) * size * 0.35,
+      rotate: (allSeeds[j + 2] - 0.5) * Math.PI * 1.2,
+      scale: 0.85 + allSeeds[j + 3] * 0.5
+    };
+  });
+  const hex0 = oklchToHex(colors[0]);
+  const hexColors = [oklchToHex(colors[1]), oklchToHex(colors[2]), oklchToHex(colors[3])];
+  const LAYER_OPTS = [
+    { composite: "source-over", alpha: 0.9 },
+    { composite: "overlay", alpha: 0.48 },
+    { composite: "soft-light", alpha: 0.7 },
+    { composite: "source-over", alpha: 0.78 },
+    { composite: "overlay", alpha: 0.4 },
+    { composite: "soft-light", alpha: 0.6 }
+  ];
+  const blur = Math.max(8, Math.round(size * 0.21));
+  const pad = Math.ceil(blur * 1.9);
+  const ROT_SPEEDS = [0.5, 0.6, 0.45, 0.55, 0.5, 0.65];
+  const DRIFT_AMP = size * 0.18;
+  const DRIFT_FREQS = [0.5, 0.45, 0.4, 0.48, 0.52, 0.38];
+  const DRIFT_PHASE_OFFSETS = [0, 1, 2, 0.5, 1.5, 3];
+  const PHASE_SPEED = 1.2;
+  const draw = (phase2) => {
+    ctx.clearRect(0, 0, size, size);
+    ctx.fillStyle = hex0;
+    ctx.fillRect(0, 0, size, size);
+    const w = size + pad * 2;
+    const h = size + pad * 2;
+    const offCtx = document.createElement("canvas").getContext("2d");
+    offCtx.canvas.width = w;
+    offCtx.canvas.height = h;
+    for (let i = 0; i < 6; i++) {
+      const layer = layers[i];
+      const rot = layer.rotate + (animated ? phase2 * ROT_SPEEDS[i] : 0);
+      const driftX = animated ? DRIFT_AMP * Math.sin(phase2 * DRIFT_FREQS[i] + DRIFT_PHASE_OFFSETS[i]) : 0;
+      const driftY = animated ? DRIFT_AMP * Math.sin(phase2 * DRIFT_FREQS[(i + 2) % 6] + DRIFT_PHASE_OFFSETS[i] * 1.3) : 0;
+      const scalePulse = animated ? 1 + 0.15 * Math.sin(phase2 * 0.9 + i * 0.7) : 1;
+      const scale = layer.scale * scalePulse;
+      const opts = LAYER_OPTS[i];
+      const hex = hexColors[i % 3];
+      offCtx.clearRect(0, 0, w, h);
+      drawBlurredShape(
+        offCtx,
+        SHAPES[i],
+        size,
+        layer.tx + driftX,
+        layer.ty + driftY,
+        rot,
+        scale,
+        hex,
+        pad,
+        pad
+      );
+      ctx.save();
+      ctx.filter = `blur(${blur}px)`;
+      ctx.globalCompositeOperation = opts.composite;
+      ctx.globalAlpha = opts.alpha;
+      ctx.drawImage(offCtx.canvas, 0, 0, w, h, -pad, -pad, w, h);
+      ctx.restore();
+    }
+    ctx.globalCompositeOperation = "source-over";
+    ctx.globalAlpha = 1;
+  };
+  if (!animated) {
+    draw(0);
+    return null;
+  }
+  let raf;
+  let phase = 0;
+  let lastTime = 0;
+  const tick = (now) => {
+    if (lastTime) phase += (now - lastTime) * 1e-3 * PHASE_SPEED;
+    lastTime = now;
+    draw(phase);
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+
+// src/dither.ts
+var BAYER8 = (() => {
+  const m = [
+    [0, 32, 8, 40, 2, 34, 10, 42],
+    [48, 16, 56, 24, 50, 18, 58, 26],
+    [12, 44, 4, 36, 14, 46, 6, 38],
+    [60, 28, 52, 20, 62, 30, 54, 22],
+    [3, 35, 11, 43, 1, 33, 9, 41],
+    [51, 19, 59, 27, 49, 17, 57, 25],
+    [15, 47, 7, 39, 13, 45, 5, 37],
+    [63, 31, 55, 23, 61, 29, 53, 21]
+  ];
+  return m.map((r) => r.map((v) => v / 64));
+})();
+function hexToRgb2(hex) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function renderDither(canvas, { size, colors, dotScale: dotScaleOpt, animated = false, seeds }) {
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  const dotScale = dotScaleOpt ?? Math.max(2, Math.round(size / 35));
+  const colA = hexToRgb2(oklchToHex(colors[0]));
+  const colB = hexToRgb2(oklchToHex(colors[Math.min(1, colors.length - 1)]));
+  const baseAngle = seeds[0] * Math.PI * 2;
+  const falloff = 0.55 + seeds[1] * 0.25;
+  const swirlSpeed = 0.45;
+  const padding = 1;
+  const gridSize = Math.ceil(size / dotScale) + padding * 2;
+  const cellPhase = (gx, gy) => ((gx * 31 + gy * 17) * (seeds[2] * 1e3 + 1) + (seeds[3] * 1e3 | 0)) % 1e3 / 1e3 * Math.PI * 2;
+  const cellAmp = (gx, gy) => 0.035 + (gx * 7 + gy * 13 + seeds[2] * 50 | 0) % 55 / 1100;
+  const draw = (phase2) => {
+    const img = ctx.createImageData(size, size);
+    const d = img.data;
+    const angle = baseAngle + (animated ? phase2 * swirlSpeed : 0);
+    const cosA = Math.cos(angle);
+    const sinA = Math.sin(angle);
+    for (let i = 0; i < size * size * 4; i += 4) {
+      d[i] = colB.r;
+      d[i + 1] = colB.g;
+      d[i + 2] = colB.b;
+      d[i + 3] = 255;
+    }
+    for (let gy = 0; gy < gridSize; gy++) {
+      for (let gx = 0; gx < gridSize; gx++) {
+        const nx = (gx - padding + 0.5) / (gridSize - padding * 2);
+        const ny = (gy - padding + 0.5) / (gridSize - padding * 2);
+        const proj = (nx - 0.5) * cosA + (ny - 0.5) * sinA;
+        let drift = 0;
+        if (animated) {
+          const p = cellPhase(gx, gy);
+          const a = cellAmp(gx, gy);
+          drift = a * Math.sin(phase2 * 0.3 + p) + a * 0.55 * Math.sin(phase2 * 0.1 + p * 1.7) + 0.012 * Math.sin(phase2 * 0.2);
+        }
+        const tRaw = (proj - drift + falloff) / (falloff * 2);
+        const tClamp = Math.max(0, Math.min(1, tRaw));
+        const t = tClamp * tClamp * (3 - 2 * tClamp);
+        const bayer = BAYER8[gy % 8][gx % 8];
+        if (t > bayer) continue;
+        for (let py = 0; py < dotScale; py++) {
+          for (let px = 0; px < dotScale; px++) {
+            const x = (gx - padding) * dotScale + px;
+            const y = (gy - padding) * dotScale + py;
+            if (x < 0 || y < 0 || x >= size || y >= size) continue;
+            const idx = (y * size + x) * 4;
+            d[idx] = colA.r;
+            d[idx + 1] = colA.g;
+            d[idx + 2] = colA.b;
+          }
+        }
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  };
+  if (!animated) {
+    draw(0);
+    return null;
+  }
+  let raf;
+  let phase = 0;
+  let lastTime = 0;
+  const SPEED = 0.55;
+  const tick = (now) => {
+    if (lastTime) phase += (now - lastTime) * 1e-3 * SPEED;
+    lastTime = now;
+    draw(phase);
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+
+// src/index.ts
+function hashToColors(hash, tones, count = 2) {
+  const seeds = hashToSeeds(hash, count * 3);
+  const parsed = tones?.map(parseTone).filter((t) => t !== null);
+  const toneList = parsed?.length ? parsed : void 0;
+  const baseHue = toneList ? void 0 : seeds[0] * 360 % 360;
+  return Array.from(
+    { length: count },
+    (_, i) => generateColor(seeds[i * 3], seeds[i * 3 + 1], seeds[i * 3 + 2], toneList, i > 0, baseHue)
+  );
+}
+function createHashvatar(options) {
+  const {
+    hash,
+    size = 64,
+    mode = "gradient",
+    animated = false,
+    dotScale,
+    tones
+  } = options;
+  const canvas = document.createElement("canvas");
+  const colorCount = mode === "gradient" ? 4 : 2;
+  const colors = hashToColors(hash, tones, colorCount);
+  const seeds = hashToSeeds(hash, 4);
+  let cancel = null;
+  if (mode === "dither") {
+    cancel = renderDither(canvas, { size, colors, dotScale, animated, seeds });
+  } else {
+    cancel = renderGradient(canvas, { size, colors, animated, seeds });
+  }
+  return {
+    canvas,
+    colors,
+    destroy: () => cancel?.()
+  };
+}
+function renderHashvatar(canvas, options) {
+  const {
+    hash,
+    size = 64,
+    mode = "gradient",
+    animated = false,
+    dotScale,
+    tones
+  } = options;
+  const colorCount = mode === "gradient" ? 4 : 2;
+  const colors = hashToColors(hash, tones, colorCount);
+  const seeds = hashToSeeds(hash, 4);
+  let cancel = null;
+  if (mode === "dither") {
+    cancel = renderDither(canvas, { size, colors, dotScale, animated, seeds });
+  } else {
+    cancel = renderGradient(canvas, { size, colors, animated, seeds });
+  }
+  return () => cancel?.();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createHashvatar,
+  hashToColors,
+  hashToSeeds,
+  oklchToCss,
+  oklchToHex,
+  parseTone,
+  renderDither,
+  renderGradient,
+  renderHashvatar
+});

package/dist/index.d.cts

@@ -0,0 +1,69 @@
+declare function hashToSeeds(hash: string, count: number): number[];
+
+interface OklchColor {
+    l: number;
+    c: number;
+    h: number;
+}
+type ToneInput = string;
+declare function oklchToHex({ l, c, h }: OklchColor): string;
+declare function oklchToCss({ l, c, h }: OklchColor): string;
+/**
+ * Parse a tone string into OklchColor.
+ * Supports: "#ff69b4", "ff69b4", "oklch(0.6 0.25 310)", "red", "hotpink"
+ * Note: CSS named color resolution requires a browser environment (uses canvas).
+ */
+declare function parseTone(tone: string): OklchColor | null;
+
+interface GradientOptions {
+    size: number;
+    colors: OklchColor[];
+    animated?: boolean;
+    seeds: number[];
+}
+declare function renderGradient(canvas: HTMLCanvasElement, { size, colors, animated, seeds }: GradientOptions): (() => void) | null;
+
+interface DitherOptions {
+    size: number;
+    colors: OklchColor[];
+    dotScale?: number;
+    animated?: boolean;
+    seeds: number[];
+}
+declare function renderDither(canvas: HTMLCanvasElement, { size, colors, dotScale: dotScaleOpt, animated, seeds }: DitherOptions): (() => void) | null;
+
+declare function hashToColors(hash: string, tones?: ToneInput[], count?: number): OklchColor[];
+type Mode = 'gradient' | 'dither';
+interface HashvatarOptions {
+    /** Any string: wallet address, username, UUID… */
+    hash: string;
+    /** Canvas size in px (square). Default: 64 */
+    size?: number;
+    /** Render mode. Default: 'gradient' */
+    mode?: Mode;
+    /** Enable animation. Default: false */
+    animated?: boolean;
+    /** Dot cell size for dither mode. Default: 4 */
+    dotScale?: number;
+    /**
+     * Restrict palette to these hue families.
+     * Accepts hex (#ff69b4), oklch(l c h), or CSS color names (red, hotpink…)
+     */
+    tones?: ToneInput[];
+}
+interface HashvatarResult {
+    /** The rendered canvas element */
+    canvas: HTMLCanvasElement;
+    /** The generated colors in OKLCH */
+    colors: OklchColor[];
+    /** Call to stop animation loop (no-op if not animated) */
+    destroy: () => void;
+}
+declare function createHashvatar(options: HashvatarOptions): HashvatarResult;
+/**
+ * Convenience: render into an existing canvas element.
+ * Useful when you already have a <canvas> in the DOM.
+ */
+declare function renderHashvatar(canvas: HTMLCanvasElement, options: HashvatarOptions): () => void;
+
+export { type HashvatarOptions, type HashvatarResult, type Mode, type OklchColor, type ToneInput, createHashvatar, hashToColors, hashToSeeds, oklchToCss, oklchToHex, parseTone, renderDither, renderGradient, renderHashvatar };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+declare function hashToSeeds(hash: string, count: number): number[];
+
+interface OklchColor {
+    l: number;
+    c: number;
+    h: number;
+}
+type ToneInput = string;
+declare function oklchToHex({ l, c, h }: OklchColor): string;
+declare function oklchToCss({ l, c, h }: OklchColor): string;
+/**
+ * Parse a tone string into OklchColor.
+ * Supports: "#ff69b4", "ff69b4", "oklch(0.6 0.25 310)", "red", "hotpink"
+ * Note: CSS named color resolution requires a browser environment (uses canvas).
+ */
+declare function parseTone(tone: string): OklchColor | null;
+
+interface GradientOptions {
+    size: number;
+    colors: OklchColor[];
+    animated?: boolean;
+    seeds: number[];
+}
+declare function renderGradient(canvas: HTMLCanvasElement, { size, colors, animated, seeds }: GradientOptions): (() => void) | null;
+
+interface DitherOptions {
+    size: number;
+    colors: OklchColor[];
+    dotScale?: number;
+    animated?: boolean;
+    seeds: number[];
+}
+declare function renderDither(canvas: HTMLCanvasElement, { size, colors, dotScale: dotScaleOpt, animated, seeds }: DitherOptions): (() => void) | null;
+
+declare function hashToColors(hash: string, tones?: ToneInput[], count?: number): OklchColor[];
+type Mode = 'gradient' | 'dither';
+interface HashvatarOptions {
+    /** Any string: wallet address, username, UUID… */
+    hash: string;
+    /** Canvas size in px (square). Default: 64 */
+    size?: number;
+    /** Render mode. Default: 'gradient' */
+    mode?: Mode;
+    /** Enable animation. Default: false */
+    animated?: boolean;
+    /** Dot cell size for dither mode. Default: 4 */
+    dotScale?: number;
+    /**
+     * Restrict palette to these hue families.
+     * Accepts hex (#ff69b4), oklch(l c h), or CSS color names (red, hotpink…)
+     */
+    tones?: ToneInput[];
+}
+interface HashvatarResult {
+    /** The rendered canvas element */
+    canvas: HTMLCanvasElement;
+    /** The generated colors in OKLCH */
+    colors: OklchColor[];
+    /** Call to stop animation loop (no-op if not animated) */
+    destroy: () => void;
+}
+declare function createHashvatar(options: HashvatarOptions): HashvatarResult;
+/**
+ * Convenience: render into an existing canvas element.
+ * Useful when you already have a <canvas> in the DOM.
+ */
+declare function renderHashvatar(canvas: HTMLCanvasElement, options: HashvatarOptions): () => void;
+
+export { type HashvatarOptions, type HashvatarResult, type Mode, type OklchColor, type ToneInput, createHashvatar, hashToColors, hashToSeeds, oklchToCss, oklchToHex, parseTone, renderDither, renderGradient, renderHashvatar };

package/dist/index.js

@@ -0,0 +1,393 @@
+// src/hash.ts
+function fnv1a(str) {
+  let hash = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash = hash * 16777619 >>> 0;
+  }
+  return hash;
+}
+function seededRng(seed) {
+  let s = seed;
+  return () => {
+    s |= 0;
+    s = s + 1831565813 | 0;
+    let t = Math.imul(s ^ s >>> 15, 1 | s);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hashToSeeds(hash, count) {
+  const base = fnv1a(hash.toLowerCase().trim());
+  const rng = seededRng(base);
+  return Array.from({ length: count }, () => rng());
+}
+
+// src/color.ts
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const n = parseInt(full, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function linearize(c) {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function rgbToOklch(r, g, b) {
+  const rl = linearize(r), gl = linearize(g), bl = linearize(b);
+  const x = 0.4124564 * rl + 0.3575761 * gl + 0.1804375 * bl;
+  const y = 0.2126729 * rl + 0.7151522 * gl + 0.072175 * bl;
+  const z = 0.0193339 * rl + 0.119192 * gl + 0.9503041 * bl;
+  const lm = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
+  const mm = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
+  const sm = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z);
+  const L = 0.2104542553 * lm + 0.793617785 * mm - 0.0040720468 * sm;
+  const a = 1.9779984951 * lm - 2.428592205 * mm + 0.4505937099 * sm;
+  const bk = 0.0259040371 * lm + 0.7827717662 * mm - 0.808675766 * sm;
+  return { l: L, c: Math.sqrt(a * a + bk * bk), h: (Math.atan2(bk, a) * 180 / Math.PI + 360) % 360 };
+}
+function oklchToHex({ l, c, h }) {
+  const hRad = h * Math.PI / 180;
+  const a = c * Math.cos(hRad), b = c * Math.sin(hRad);
+  const lm = l + 0.3963377774 * a + 0.2158037573 * b;
+  const mm = l - 0.1055613458 * a - 0.0638541728 * b;
+  const sm = l - 0.0894841775 * a - 1.291485548 * b;
+  const L3 = lm * lm * lm, M3 = mm * mm * mm, S3 = sm * sm * sm;
+  const rl = 4.0767416621 * L3 - 3.3077115913 * M3 + 0.2309699292 * S3;
+  const gl = -1.2684380046 * L3 + 2.6097574011 * M3 - 0.3413193965 * S3;
+  const bl = -0.0041960863 * L3 - 0.7034186147 * M3 + 1.707614701 * S3;
+  const toSrgb = (v) => {
+    const cv = Math.max(0, Math.min(1, v));
+    return cv <= 31308e-7 ? cv * 12.92 : 1.055 * Math.pow(cv, 1 / 2.4) - 0.055;
+  };
+  return "#" + [rl, gl, bl].map((v) => Math.round(toSrgb(v) * 255).toString(16).padStart(2, "0")).join("");
+}
+function oklchToCss({ l, c, h }) {
+  return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(1)})`;
+}
+function parseTone(tone) {
+  const t = tone.trim();
+  if (/^[a-zA-Z]+$/.test(t)) {
+    if (typeof document === "undefined") return null;
+    const tmp = document.createElement("canvas");
+    tmp.width = tmp.height = 1;
+    const ctx = tmp.getContext("2d");
+    ctx.fillStyle = t;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    if (r + g + b > 0 || t.toLowerCase() === "black") return rgbToOklch(r, g, b);
+    return null;
+  }
+  if (t.startsWith("#") || /^[0-9a-f]{3,6}$/i.test(t)) {
+    const rgb = hexToRgb(t.startsWith("#") ? t : "#" + t);
+    return rgbToOklch(...rgb);
+  }
+  const m = t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)\s*\)/i);
+  if (m) {
+    const l = m[1].endsWith("%") ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
+    return { l, c: parseFloat(m[2]), h: parseFloat(m[3]) };
+  }
+  return null;
+}
+function generateColor(seed, lSeed, cSeed, tones, isSecondary = false, baseHue) {
+  let h, l, c;
+  if (tones && tones.length > 0) {
+    const ti = Math.floor(seed * tones.length) % tones.length;
+    const tone = tones[ti];
+    h = (tone.h + (seed * 2 - 1) * 30 + 360) % 360;
+    l = isSecondary ? 0.22 + lSeed * 0.18 : 0.52 + lSeed * 0.22;
+    c = isSecondary ? Math.max(tone.c * 0.5, 0.06) + cSeed * 0.08 : Math.max(tone.c * 0.8, 0.14) + cSeed * 0.1;
+  } else {
+    const hue = baseHue ?? seed * 360;
+    h = (hue + 360) % 360;
+    if (isSecondary) {
+      l = 0.18 + cSeed * 0.2;
+      c = 0.08 + lSeed * 0.12;
+    } else {
+      l = 0.55 + lSeed * 0.22;
+      c = 0.18 + cSeed * 0.18;
+    }
+  }
+  return { l, c: Math.min(c, 0.37), h };
+}
+
+// src/gradient.ts
+var SHAPES = [
+  [[0.85, 0.5], [0.75, 0.18], [0.38, 0.22], [0.18, 0.52], [0.38, 0.82], [0.72, 0.78]],
+  [[0.22, 0.32], [0.78, 0.28], [0.82, 0.62], [0.5, 0.88], [0.18, 0.68], [0.28, 0.48]],
+  [[0.5, 0.12], [0.88, 0.45], [0.72, 0.88], [0.28, 0.82], [0.12, 0.42], [0.35, 0.18]],
+  [[0.62, 0.25], [0.9, 0.55], [0.65, 0.9], [0.25, 0.7], [0.1, 0.4], [0.35, 0.15]],
+  [[0.15, 0.2], [0.55, 0.08], [0.92, 0.35], [0.78, 0.75], [0.4, 0.92], [0.2, 0.6]],
+  [[0.45, 0.08], [0.82, 0.3], [0.7, 0.85], [0.3, 0.88], [0.08, 0.5], [0.25, 0.25]]
+];
+function drawBlurredShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, offsetX, offsetY) {
+  const cx = size / 2;
+  const cy = size / 2;
+  ctx.save();
+  ctx.translate(offsetX + cx, offsetY + cy);
+  ctx.translate(tx, ty);
+  ctx.rotate(rotate);
+  ctx.scale(scale, scale);
+  ctx.translate(-cx, -cy);
+  ctx.beginPath();
+  ctx.moveTo(path[0][0] * size, path[0][1] * size);
+  for (let i = 1; i < path.length; i++) {
+    ctx.lineTo(path[i][0] * size, path[i][1] * size);
+  }
+  ctx.closePath();
+  ctx.fillStyle = fillStyle;
+  ctx.fill();
+  ctx.restore();
+}
+function renderGradient(canvas, { size, colors, animated = false, seeds }) {
+  if (colors.length < 4) return null;
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  const mix = seeds[0].toString() + seeds[1].toString() + seeds[2].toString() + seeds[3].toString();
+  const allSeeds = hashToSeeds(mix, 24);
+  const layers = [0, 1, 2, 3, 4, 5].map((i) => {
+    const j = i * 4;
+    return {
+      tx: (allSeeds[j] - 0.5) * size * 0.35,
+      ty: (allSeeds[j + 1] - 0.5) * size * 0.35,
+      rotate: (allSeeds[j + 2] - 0.5) * Math.PI * 1.2,
+      scale: 0.85 + allSeeds[j + 3] * 0.5
+    };
+  });
+  const hex0 = oklchToHex(colors[0]);
+  const hexColors = [oklchToHex(colors[1]), oklchToHex(colors[2]), oklchToHex(colors[3])];
+  const LAYER_OPTS = [
+    { composite: "source-over", alpha: 0.9 },
+    { composite: "overlay", alpha: 0.48 },
+    { composite: "soft-light", alpha: 0.7 },
+    { composite: "source-over", alpha: 0.78 },
+    { composite: "overlay", alpha: 0.4 },
+    { composite: "soft-light", alpha: 0.6 }
+  ];
+  const blur = Math.max(8, Math.round(size * 0.21));
+  const pad = Math.ceil(blur * 1.9);
+  const ROT_SPEEDS = [0.5, 0.6, 0.45, 0.55, 0.5, 0.65];
+  const DRIFT_AMP = size * 0.18;
+  const DRIFT_FREQS = [0.5, 0.45, 0.4, 0.48, 0.52, 0.38];
+  const DRIFT_PHASE_OFFSETS = [0, 1, 2, 0.5, 1.5, 3];
+  const PHASE_SPEED = 1.2;
+  const draw = (phase2) => {
+    ctx.clearRect(0, 0, size, size);
+    ctx.fillStyle = hex0;
+    ctx.fillRect(0, 0, size, size);
+    const w = size + pad * 2;
+    const h = size + pad * 2;
+    const offCtx = document.createElement("canvas").getContext("2d");
+    offCtx.canvas.width = w;
+    offCtx.canvas.height = h;
+    for (let i = 0; i < 6; i++) {
+      const layer = layers[i];
+      const rot = layer.rotate + (animated ? phase2 * ROT_SPEEDS[i] : 0);
+      const driftX = animated ? DRIFT_AMP * Math.sin(phase2 * DRIFT_FREQS[i] + DRIFT_PHASE_OFFSETS[i]) : 0;
+      const driftY = animated ? DRIFT_AMP * Math.sin(phase2 * DRIFT_FREQS[(i + 2) % 6] + DRIFT_PHASE_OFFSETS[i] * 1.3) : 0;
+      const scalePulse = animated ? 1 + 0.15 * Math.sin(phase2 * 0.9 + i * 0.7) : 1;
+      const scale = layer.scale * scalePulse;
+      const opts = LAYER_OPTS[i];
+      const hex = hexColors[i % 3];
+      offCtx.clearRect(0, 0, w, h);
+      drawBlurredShape(
+        offCtx,
+        SHAPES[i],
+        size,
+        layer.tx + driftX,
+        layer.ty + driftY,
+        rot,
+        scale,
+        hex,
+        pad,
+        pad
+      );
+      ctx.save();
+      ctx.filter = `blur(${blur}px)`;
+      ctx.globalCompositeOperation = opts.composite;
+      ctx.globalAlpha = opts.alpha;
+      ctx.drawImage(offCtx.canvas, 0, 0, w, h, -pad, -pad, w, h);
+      ctx.restore();
+    }
+    ctx.globalCompositeOperation = "source-over";
+    ctx.globalAlpha = 1;
+  };
+  if (!animated) {
+    draw(0);
+    return null;
+  }
+  let raf;
+  let phase = 0;
+  let lastTime = 0;
+  const tick = (now) => {
+    if (lastTime) phase += (now - lastTime) * 1e-3 * PHASE_SPEED;
+    lastTime = now;
+    draw(phase);
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+
+// src/dither.ts
+var BAYER8 = (() => {
+  const m = [
+    [0, 32, 8, 40, 2, 34, 10, 42],
+    [48, 16, 56, 24, 50, 18, 58, 26],
+    [12, 44, 4, 36, 14, 46, 6, 38],
+    [60, 28, 52, 20, 62, 30, 54, 22],
+    [3, 35, 11, 43, 1, 33, 9, 41],
+    [51, 19, 59, 27, 49, 17, 57, 25],
+    [15, 47, 7, 39, 13, 45, 5, 37],
+    [63, 31, 55, 23, 61, 29, 53, 21]
+  ];
+  return m.map((r) => r.map((v) => v / 64));
+})();
+function hexToRgb2(hex) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function renderDither(canvas, { size, colors, dotScale: dotScaleOpt, animated = false, seeds }) {
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  const dotScale = dotScaleOpt ?? Math.max(2, Math.round(size / 35));
+  const colA = hexToRgb2(oklchToHex(colors[0]));
+  const colB = hexToRgb2(oklchToHex(colors[Math.min(1, colors.length - 1)]));
+  const baseAngle = seeds[0] * Math.PI * 2;
+  const falloff = 0.55 + seeds[1] * 0.25;
+  const swirlSpeed = 0.45;
+  const padding = 1;
+  const gridSize = Math.ceil(size / dotScale) + padding * 2;
+  const cellPhase = (gx, gy) => ((gx * 31 + gy * 17) * (seeds[2] * 1e3 + 1) + (seeds[3] * 1e3 | 0)) % 1e3 / 1e3 * Math.PI * 2;
+  const cellAmp = (gx, gy) => 0.035 + (gx * 7 + gy * 13 + seeds[2] * 50 | 0) % 55 / 1100;
+  const draw = (phase2) => {
+    const img = ctx.createImageData(size, size);
+    const d = img.data;
+    const angle = baseAngle + (animated ? phase2 * swirlSpeed : 0);
+    const cosA = Math.cos(angle);
+    const sinA = Math.sin(angle);
+    for (let i = 0; i < size * size * 4; i += 4) {
+      d[i] = colB.r;
+      d[i + 1] = colB.g;
+      d[i + 2] = colB.b;
+      d[i + 3] = 255;
+    }
+    for (let gy = 0; gy < gridSize; gy++) {
+      for (let gx = 0; gx < gridSize; gx++) {
+        const nx = (gx - padding + 0.5) / (gridSize - padding * 2);
+        const ny = (gy - padding + 0.5) / (gridSize - padding * 2);
+        const proj = (nx - 0.5) * cosA + (ny - 0.5) * sinA;
+        let drift = 0;
+        if (animated) {
+          const p = cellPhase(gx, gy);
+          const a = cellAmp(gx, gy);
+          drift = a * Math.sin(phase2 * 0.3 + p) + a * 0.55 * Math.sin(phase2 * 0.1 + p * 1.7) + 0.012 * Math.sin(phase2 * 0.2);
+        }
+        const tRaw = (proj - drift + falloff) / (falloff * 2);
+        const tClamp = Math.max(0, Math.min(1, tRaw));
+        const t = tClamp * tClamp * (3 - 2 * tClamp);
+        const bayer = BAYER8[gy % 8][gx % 8];
+        if (t > bayer) continue;
+        for (let py = 0; py < dotScale; py++) {
+          for (let px = 0; px < dotScale; px++) {
+            const x = (gx - padding) * dotScale + px;
+            const y = (gy - padding) * dotScale + py;
+            if (x < 0 || y < 0 || x >= size || y >= size) continue;
+            const idx = (y * size + x) * 4;
+            d[idx] = colA.r;
+            d[idx + 1] = colA.g;
+            d[idx + 2] = colA.b;
+          }
+        }
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  };
+  if (!animated) {
+    draw(0);
+    return null;
+  }
+  let raf;
+  let phase = 0;
+  let lastTime = 0;
+  const SPEED = 0.55;
+  const tick = (now) => {
+    if (lastTime) phase += (now - lastTime) * 1e-3 * SPEED;
+    lastTime = now;
+    draw(phase);
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+
+// src/index.ts
+function hashToColors(hash, tones, count = 2) {
+  const seeds = hashToSeeds(hash, count * 3);
+  const parsed = tones?.map(parseTone).filter((t) => t !== null);
+  const toneList = parsed?.length ? parsed : void 0;
+  const baseHue = toneList ? void 0 : seeds[0] * 360 % 360;
+  return Array.from(
+    { length: count },
+    (_, i) => generateColor(seeds[i * 3], seeds[i * 3 + 1], seeds[i * 3 + 2], toneList, i > 0, baseHue)
+  );
+}
+function createHashvatar(options) {
+  const {
+    hash,
+    size = 64,
+    mode = "gradient",
+    animated = false,
+    dotScale,
+    tones
+  } = options;
+  const canvas = document.createElement("canvas");
+  const colorCount = mode === "gradient" ? 4 : 2;
+  const colors = hashToColors(hash, tones, colorCount);
+  const seeds = hashToSeeds(hash, 4);
+  let cancel = null;
+  if (mode === "dither") {
+    cancel = renderDither(canvas, { size, colors, dotScale, animated, seeds });
+  } else {
+    cancel = renderGradient(canvas, { size, colors, animated, seeds });
+  }
+  return {
+    canvas,
+    colors,
+    destroy: () => cancel?.()
+  };
+}
+function renderHashvatar(canvas, options) {
+  const {
+    hash,
+    size = 64,
+    mode = "gradient",
+    animated = false,
+    dotScale,
+    tones
+  } = options;
+  const colorCount = mode === "gradient" ? 4 : 2;
+  const colors = hashToColors(hash, tones, colorCount);
+  const seeds = hashToSeeds(hash, 4);
+  let cancel = null;
+  if (mode === "dither") {
+    cancel = renderDither(canvas, { size, colors, dotScale, animated, seeds });
+  } else {
+    cancel = renderGradient(canvas, { size, colors, animated, seeds });
+  }
+  return () => cancel?.();
+}
+export {
+  createHashvatar,
+  hashToColors,
+  hashToSeeds,
+  oklchToCss,
+  oklchToHex,
+  parseTone,
+  renderDither,
+  renderGradient,
+  renderHashvatar
+};

package/dist/react.cjs

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.tsx
+var react_exports = {};
+__export(react_exports, {
+  Hashvatar: () => Hashvatar
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+var import_index = require("./index");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Hashvatar({ className, style, ...options }) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!ref.current) return;
+    const destroy = (0, import_index.renderHashvatar)(ref.current, options);
+    return destroy;
+  }, [
+    options.hash,
+    options.size,
+    options.mode,
+    options.animated,
+    options.dotScale,
+    JSON.stringify(options.tones)
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "canvas",
+    {
+      ref,
+      className,
+      style: { borderRadius: "50%", display: "block", ...style }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Hashvatar
+});

package/dist/react.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HashvatarOptions } from './index';
+
+interface HashvatarProps extends HashvatarOptions {
+    /** CSS class on the <canvas> element */
+    className?: string;
+    /** Inline style */
+    style?: React.CSSProperties;
+}
+/**
+ * React component wrapper for hashvatar.
+ *
+ * @example
+ * <Hashvatar hash="vitalik.eth" size={48} mode="dither" />
+ * <Hashvatar hash="0xABC..." size={64} tones={['hotpink']} animated />
+ */
+declare function Hashvatar({ className, style, ...options }: HashvatarProps): react_jsx_runtime.JSX.Element;
+
+export { Hashvatar, type HashvatarProps };

package/dist/react.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HashvatarOptions } from './index';
+
+interface HashvatarProps extends HashvatarOptions {
+    /** CSS class on the <canvas> element */
+    className?: string;
+    /** Inline style */
+    style?: React.CSSProperties;
+}
+/**
+ * React component wrapper for hashvatar.
+ *
+ * @example
+ * <Hashvatar hash="vitalik.eth" size={48} mode="dither" />
+ * <Hashvatar hash="0xABC..." size={64} tones={['hotpink']} animated />
+ */
+declare function Hashvatar({ className, style, ...options }: HashvatarProps): react_jsx_runtime.JSX.Element;
+
+export { Hashvatar, type HashvatarProps };

package/dist/react.js

@@ -0,0 +1,30 @@
+// src/react.tsx
+import { useEffect, useRef } from "react";
+import { renderHashvatar } from "./index";
+import { jsx } from "react/jsx-runtime";
+function Hashvatar({ className, style, ...options }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const destroy = renderHashvatar(ref.current, options);
+    return destroy;
+  }, [
+    options.hash,
+    options.size,
+    options.mode,
+    options.animated,
+    options.dotScale,
+    JSON.stringify(options.tones)
+  ]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref,
+      className,
+      style: { borderRadius: "50%", display: "block", ...style }
+    }
+  );
+}
+export {
+  Hashvatar
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "hashvatar",
+  "version": "0.1.0",
+  "description": "Deterministic avatar generation from any hash string. Zero dependencies.",
+  "author": "Médhy",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "demo": "npx serve . -p 5000",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "avatar",
+    "identicon",
+    "jazzicon",
+    "web3",
+    "wallet",
+    "deterministic",
+    "gradient",
+    "dither",
+    "halftone"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medhychabour/hashvatar"
+  }
+}