@outpacelabs/gradient-avatars-react 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) Outpace Studios
+
+This work is licensed under the Creative Commons Attribution 4.0
+International License (CC BY 4.0). To view a copy of this license, visit
+https://creativecommons.org/licenses/by/4.0/.
+
+You are free to:
+
+  - Share — copy and redistribute the material in any medium or format
+  - Adapt — remix, transform, and build upon the material for any
+    purpose, even commercially
+
+Under the following terms:
+
+  - Attribution — You must give appropriate credit, provide a link to
+    the license, and indicate if changes were made. You may do so in
+    any reasonable manner, but not in any way that suggests the
+    licensor endorses you or your use.
+
+  - No additional restrictions — You may not apply legal terms or
+    technological measures that legally restrict others from doing
+    anything the license permits.

package/README.md

@@ -0,0 +1,37 @@
+# @outpacelabs/gradient-avatars-react
+
+React component for [`@outpacelabs/gradient-avatars`](https://www.npmjs.com/package/@outpacelabs/gradient-avatars).
+Renders a deterministic mesh-gradient avatar for any seed on a `<canvas>` —
+the same seed always yields the same gradient.
+
+```bash
+npm i @outpacelabs/gradient-avatars-react
+```
+
+## Usage
+
+```tsx
+import { GradientAvatar } from "@outpacelabs/gradient-avatars-react";
+
+<GradientAvatar seed={user.id} size={40} />
+<GradientAvatar seed="jane@example.com" size={96} className="ring-2 ring-white/10" />
+<GradientAvatar seed="square" size={64} radius={12} />
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `seed` | `string \| number` | — | Any value; each unique seed is a unique gradient. |
+| `size` | `number` | `32` | Rendered size in pixels. |
+| `radius` | `number \| string` | `"9999px"` | Corner radius. Number = pixels, string = any CSS length. Defaults to a full circle; pass `0` for a square. |
+| `className` | `string` | — | Extra classes on the wrapper `<span>`. |
+| `style` | `CSSProperties` | — | Extra inline styles merged onto the wrapper. |
+
+The engine helpers (`renderGradient`, `gradientToDataURL`, `gradientToBlob`,
+`generatePalette`, …) are re-exported for convenience — e.g. to offer a
+download/copy of the full-resolution image.
+
+## License
+
+[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — free to use with attribution. By [Outpace Studios](https://outpacestudios.com).

package/dist/index.cjs

@@ -0,0 +1,261 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// ../gradient-avatars/dist/index.js
+var HARMONY_TYPES = [
+  "analogous",
+  "triadic",
+  "splitComplementary",
+  "tetradic",
+  "complementary"
+];
+var GOLDEN_ANGLE = 137.5;
+var DEFAULT_BLUR_FRACTION = 0.06;
+function seededRandom(seed) {
+  let s = seed;
+  return () => {
+    s += 1831565813;
+    let t = s;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hslToHex(h, s, l) {
+  h = (h % 360 + 360) % 360;
+  s = Math.max(0, Math.min(100, s)) / 100;
+  l = Math.max(0, Math.min(100, l)) / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = (n) => {
+    const hex = Math.round((n + m) * 255).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+function harmonyHues(baseHue, harmony) {
+  switch (harmony) {
+    case "analogous":
+      return [baseHue, baseHue + 30, baseHue + 60, baseHue - 30];
+    case "triadic":
+      return [baseHue, baseHue + 120, baseHue + 240];
+    case "splitComplementary":
+      return [baseHue, baseHue + 150, baseHue + 210];
+    case "tetradic":
+      return [baseHue, baseHue + 90, baseHue + 180, baseHue + 270];
+    case "complementary":
+      return [baseHue, baseHue + 180, baseHue + 20, baseHue + 200];
+  }
+}
+function seedFromString(input) {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  h ^= h >>> 16;
+  h = Math.imul(h, 2146121005) >>> 0;
+  h ^= h >>> 15;
+  h = Math.imul(h, 2221713035) >>> 0;
+  h ^= h >>> 16;
+  return h >>> 0;
+}
+function toSeed(seed) {
+  if (typeof seed === "number") return seed;
+  return seedFromString(seed);
+}
+function generatePalette(seed) {
+  const s = toSeed(seed);
+  const random = seededRandom(s);
+  const baseHue = s * GOLDEN_ANGLE % 360;
+  const harmonyIndex = Math.floor(random() * HARMONY_TYPES.length);
+  const harmony = HARMONY_TYPES[harmonyIndex];
+  const hues = harmonyHues(baseHue, harmony);
+  const colors = hues.map((hue) => {
+    const saturation = 75 + random() * 25;
+    const lightness = 50 + random() * 20;
+    return hslToHex(hue, saturation, lightness);
+  });
+  return { seed: s, colors, harmony };
+}
+function drawMeshGradient(ctx, seed, size) {
+  const s = toSeed(seed);
+  const { colors } = generatePalette(s);
+  const random = seededRandom(s * 12345);
+  ctx.fillStyle = colors[0];
+  ctx.fillRect(0, 0, size, size);
+  const numSpots = 8 + Math.floor(random() * 5);
+  const spots = [];
+  for (let i = 0; i < numSpots; i++) {
+    const angle = random() * Math.PI * 2;
+    const distance = random() * size * 0.4;
+    const centerX = size / 2 + Math.cos(angle) * distance;
+    const centerY = size / 2 + Math.sin(angle) * distance;
+    spots.push({
+      x: centerX + (random() - 0.5) * size * 0.3,
+      y: centerY + (random() - 0.5) * size * 0.3,
+      radius: size * (0.3 + random() * 0.4),
+      color: colors[i % colors.length]
+    });
+  }
+  spots.sort((a, b) => b.radius - a.radius);
+  ctx.globalCompositeOperation = "source-over";
+  for (const spot of spots) {
+    const g = ctx.createRadialGradient(
+      spot.x,
+      spot.y,
+      0,
+      spot.x,
+      spot.y,
+      spot.radius
+    );
+    g.addColorStop(0, `${spot.color}FF`);
+    g.addColorStop(0.3, `${spot.color}DD`);
+    g.addColorStop(0.6, `${spot.color}88`);
+    g.addColorStop(1, `${spot.color}00`);
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, size, size);
+  }
+  const hx = size * 0.3 + random() * size * 0.2;
+  const hy = size * 0.3 + random() * size * 0.2;
+  const hg = ctx.createRadialGradient(hx, hy, 0, hx, hy, size * 0.3);
+  hg.addColorStop(0, "rgba(255,255,255,0.15)");
+  hg.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = hg;
+  ctx.fillRect(0, 0, size, size);
+}
+function blurFor(size, blur) {
+  if (blur === 0) return 0;
+  return blur ?? Math.round(size * DEFAULT_BLUR_FRACTION);
+}
+function renderGradient(canvas, seed, options = {}) {
+  const size = canvas.width;
+  const blur = blurFor(size, options.blur);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  if (blur <= 0) {
+    ctx.clearRect(0, 0, size, size);
+    drawMeshGradient(ctx, seed, size);
+    return;
+  }
+  const scratch = createCanvas(size, size);
+  const sctx = scratch.getContext("2d");
+  if (!sctx) return;
+  drawMeshGradient(sctx, seed, size);
+  const scaleUp = 1 + blur / size * 4;
+  const dw = size * scaleUp;
+  const offset = (dw - size) / 2;
+  ctx.clearRect(0, 0, size, size);
+  ctx.filter = `blur(${blur}px)`;
+  ctx.drawImage(scratch, -offset, -offset, dw, dw);
+  ctx.filter = "none";
+}
+function createCanvas(w, h) {
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(w, h);
+  }
+  const c = document.createElement("canvas");
+  c.width = w;
+  c.height = h;
+  return c;
+}
+function gradientToDataURL(seed, options = {}) {
+  const { size = 512, type = "image/png", quality = 0.92 } = options;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  renderGradient(canvas, seed, options);
+  return canvas.toDataURL(type, quality);
+}
+function gradientToBlob(seed, options = {}) {
+  const { size = 512, type = "image/png", quality = 0.92 } = options;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  renderGradient(canvas, seed, options);
+  return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+}
+var RENDER_SIZE = 256;
+var BLUR_FRACTION = 0.06;
+function GradientAvatar({
+  seed,
+  size = 32,
+  radius = "9999px",
+  className,
+  style
+}) {
+  const canvasRef = react.useRef(null);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, RENDER_SIZE, RENDER_SIZE);
+    drawMeshGradient(ctx, seed, RENDER_SIZE);
+  }, [seed]);
+  const blurPx = Math.max(1, Math.round(size * BLUR_FRACTION));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-block",
+        overflow: "hidden",
+        borderRadius: radius,
+        width: size,
+        height: size,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          width: RENDER_SIZE,
+          height: RENDER_SIZE,
+          style: {
+            width: "100%",
+            height: "100%",
+            display: "block",
+            filter: `blur(${blurPx}px)`
+          }
+        }
+      )
+    }
+  );
+}
+
+exports.GradientAvatar = GradientAvatar;
+exports.drawMeshGradient = drawMeshGradient;
+exports.generatePalette = generatePalette;
+exports.gradientToBlob = gradientToBlob;
+exports.gradientToDataURL = gradientToDataURL;
+exports.renderGradient = renderGradient;
+exports.seedFromString = seedFromString;
+exports.toSeed = toSeed;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../gradient-avatars/src/index.ts","../src/index.tsx"],"names":["useRef","useEffect","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * @outpacelabs/gradient-avatars\n *\n * Framework-agnostic mesh-gradient avatar generator. Every seed (string or\n * number) deterministically produces a unique gradient — no stored images,\n * no network. Pure palette/RNG core plus optional Canvas2D render helpers.\n */\n\nexport type Harmony =\n\t| \"analogous\"\n\t| \"triadic\"\n\t| \"splitComplementary\"\n\t| \"tetradic\"\n\t| \"complementary\";\n\nexport interface GradientPalette {\n\t/** The numeric seed the palette was derived from. */\n\tseed: number;\n\t/** Hex color stops used to paint the mesh. */\n\tcolors: string[];\n\t/** Which color-harmony rule produced the hues. */\n\tharmony: Harmony;\n}\n\nconst HARMONY_TYPES: Harmony[] = [\n\t\"analogous\",\n\t\"triadic\",\n\t\"splitComplementary\",\n\t\"tetradic\",\n\t\"complementary\",\n];\n\nconst GOLDEN_ANGLE = 137.5;\n\n/** Default blur radius as a fraction of the rendered dimension. */\nexport const DEFAULT_BLUR_FRACTION = 0.06;\n\nfunction seededRandom(seed: number): () => number {\n\tlet s = seed;\n\treturn () => {\n\t\ts += 0x6d2b79f5;\n\t\tlet t = s;\n\t\tt = Math.imul(t ^ (t >>> 15), t | 1);\n\t\tt ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n\t\treturn ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n\t};\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n\th = ((h % 360) + 360) % 360;\n\ts = Math.max(0, Math.min(100, s)) / 100;\n\tl = Math.max(0, Math.min(100, l)) / 100;\n\n\tconst c = (1 - Math.abs(2 * l - 1)) * s;\n\tconst x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n\tconst m = l - c / 2;\n\n\tlet r = 0;\n\tlet g = 0;\n\tlet b = 0;\n\tif (h < 60) {\n\t\tr = c;\n\t\tg = x;\n\t} else if (h < 120) {\n\t\tr = x;\n\t\tg = c;\n\t} else if (h < 180) {\n\t\tg = c;\n\t\tb = x;\n\t} else if (h < 240) {\n\t\tg = x;\n\t\tb = c;\n\t} else if (h < 300) {\n\t\tr = x;\n\t\tb = c;\n\t} else {\n\t\tr = c;\n\t\tb = x;\n\t}\n\n\tconst toHex = (n: number) => {\n\t\tconst hex = Math.round((n + m) * 255).toString(16);\n\t\treturn hex.length === 1 ? `0${hex}` : hex;\n\t};\n\treturn `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();\n}\n\nfunction harmonyHues(baseHue: number, harmony: Harmony): number[] {\n\tswitch (harmony) {\n\t\tcase \"analogous\":\n\t\t\treturn [baseHue, baseHue + 30, baseHue + 60, baseHue - 30];\n\t\tcase \"triadic\":\n\t\t\treturn [baseHue, baseHue + 120, baseHue + 240];\n\t\tcase \"splitComplementary\":\n\t\t\treturn [baseHue, baseHue + 150, baseHue + 210];\n\t\tcase \"tetradic\":\n\t\t\treturn [baseHue, baseHue + 90, baseHue + 180, baseHue + 270];\n\t\tcase \"complementary\":\n\t\t\treturn [baseHue, baseHue + 180, baseHue + 20, baseHue + 200];\n\t}\n}\n\n/**\n * Stable string → 32-bit unsigned hash (FNV-1a + bit-mixing avalanche).\n * Uses the full uint32 range as a seed so similar strings diverge fully.\n */\nexport function seedFromString(input: string): number {\n\tlet h = 2166136261 >>> 0;\n\tfor (let i = 0; i < input.length; i++) {\n\t\th ^= input.charCodeAt(i);\n\t\th = Math.imul(h, 16777619) >>> 0;\n\t}\n\th ^= h >>> 16;\n\th = Math.imul(h, 0x7feb352d) >>> 0;\n\th ^= h >>> 15;\n\th = Math.imul(h, 0x846ca68b) >>> 0;\n\th ^= h >>> 16;\n\treturn h >>> 0;\n}\n\n/** Normalize a string or number seed to the numeric seed used internally. */\nexport function toSeed(seed: number | string): number {\n\tif (typeof seed === \"number\") return seed;\n\treturn seedFromString(seed);\n}\n\n/** Derive the deterministic color palette for a seed. */\nexport function generatePalette(seed: number | string): GradientPalette {\n\tconst s = toSeed(seed);\n\tconst random = seededRandom(s);\n\tconst baseHue = (s * GOLDEN_ANGLE) % 360;\n\tconst harmonyIndex = Math.floor(random() * HARMONY_TYPES.length);\n\tconst harmony = HARMONY_TYPES[harmonyIndex];\n\tconst hues = harmonyHues(baseHue, harmony);\n\tconst colors = hues.map((hue) => {\n\t\tconst saturation = 75 + random() * 25;\n\t\tconst lightness = 50 + random() * 20;\n\t\treturn hslToHex(hue, saturation, lightness);\n\t});\n\treturn { seed: s, colors, harmony };\n}\n\n/**\n * Minimal Canvas2D context surface the renderer needs. Both\n * `HTMLCanvasElement` and `OffscreenCanvas` 2D contexts satisfy it.\n */\nexport type GradientContext = {\n\tfillStyle: string | CanvasGradient | CanvasPattern;\n\tglobalCompositeOperation: GlobalCompositeOperation;\n\tfillRect(x: number, y: number, w: number, h: number): void;\n\tcreateRadialGradient(\n\t\tx0: number,\n\t\ty0: number,\n\t\tr0: number,\n\t\tx1: number,\n\t\ty1: number,\n\t\tr1: number,\n\t): CanvasGradient;\n};\n\n/**\n * Draw the mesh gradient for `seed` into `ctx` at `size` x `size`.\n * The caller is responsible for any blur — apply `filter: blur(…)` on the\n * displayed canvas (≈6% of the rendered dimension) for the signature look,\n * or use {@link renderGradient} / {@link gradientToDataURL} which bake it in.\n */\nexport function drawMeshGradient(\n\tctx: GradientContext,\n\tseed: number | string,\n\tsize: number,\n): void {\n\tconst s = toSeed(seed);\n\tconst { colors } = generatePalette(s);\n\tconst random = seededRandom(s * 12345);\n\n\tctx.fillStyle = colors[0];\n\tctx.fillRect(0, 0, size, size);\n\n\tconst numSpots = 8 + Math.floor(random() * 5);\n\tconst spots: Array<{ x: number; y: number; radius: number; color: string }> =\n\t\t[];\n\n\tfor (let i = 0; i < numSpots; i++) {\n\t\tconst angle = random() * Math.PI * 2;\n\t\tconst distance = random() * size * 0.4;\n\t\tconst centerX = size / 2 + Math.cos(angle) * distance;\n\t\tconst centerY = size / 2 + Math.sin(angle) * distance;\n\t\tspots.push({\n\t\t\tx: centerX + (random() - 0.5) * size * 0.3,\n\t\t\ty: centerY + (random() - 0.5) * size * 0.3,\n\t\t\tradius: size * (0.3 + random() * 0.4),\n\t\t\tcolor: colors[i % colors.length],\n\t\t});\n\t}\n\n\tspots.sort((a, b) => b.radius - a.radius);\n\n\tctx.globalCompositeOperation = \"source-over\";\n\tfor (const spot of spots) {\n\t\tconst g = ctx.createRadialGradient(\n\t\t\tspot.x,\n\t\t\tspot.y,\n\t\t\t0,\n\t\t\tspot.x,\n\t\t\tspot.y,\n\t\t\tspot.radius,\n\t\t);\n\t\tg.addColorStop(0, `${spot.color}FF`);\n\t\tg.addColorStop(0.3, `${spot.color}DD`);\n\t\tg.addColorStop(0.6, `${spot.color}88`);\n\t\tg.addColorStop(1, `${spot.color}00`);\n\t\tctx.fillStyle = g;\n\t\tctx.fillRect(0, 0, size, size);\n\t}\n\n\tconst hx = size * 0.3 + random() * size * 0.2;\n\tconst hy = size * 0.3 + random() * size * 0.2;\n\tconst hg = ctx.createRadialGradient(hx, hy, 0, hx, hy, size * 0.3);\n\thg.addColorStop(0, \"rgba(255,255,255,0.15)\");\n\thg.addColorStop(1, \"rgba(255,255,255,0)\");\n\tctx.fillStyle = hg;\n\tctx.fillRect(0, 0, size, size);\n}\n\nexport interface RenderOptions {\n\t/**\n\t * Blur radius in pixels. Defaults to ~6% of the canvas size for the\n\t * signature soft look. Pass `0` to disable.\n\t */\n\tblur?: number;\n}\n\nfunction blurFor(size: number, blur?: number): number {\n\tif (blur === 0) return 0;\n\treturn blur ?? Math.round(size * DEFAULT_BLUR_FRACTION);\n}\n\n/**\n * Render a seed's gradient into an existing canvas, baking in the soft blur.\n * Draws at the canvas's current `width`/`height`. Browser/OffscreenCanvas only.\n */\nexport function renderGradient(\n\tcanvas: HTMLCanvasElement | OffscreenCanvas,\n\tseed: number | string,\n\toptions: RenderOptions = {},\n): void {\n\tconst size = canvas.width;\n\tconst blur = blurFor(size, options.blur);\n\n\tconst ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D | null;\n\tif (!ctx) return;\n\n\tif (blur <= 0) {\n\t\tctx.clearRect(0, 0, size, size);\n\t\tdrawMeshGradient(ctx, seed, size);\n\t\treturn;\n\t}\n\n\t// Draw the raw mesh on a scratch canvas, then composite it back with blur\n\t// scaled up slightly so the soft edges fall outside the frame (no ring).\n\tconst scratch = createCanvas(size, size);\n\tconst sctx = scratch.getContext(\"2d\") as CanvasRenderingContext2D | null;\n\tif (!sctx) return;\n\tdrawMeshGradient(sctx, seed, size);\n\n\tconst scaleUp = 1 + (blur / size) * 4;\n\tconst dw = size * scaleUp;\n\tconst offset = (dw - size) / 2;\n\tctx.clearRect(0, 0, size, size);\n\tctx.filter = `blur(${blur}px)`;\n\tctx.drawImage(scratch as CanvasImageSource, -offset, -offset, dw, dw);\n\tctx.filter = \"none\";\n}\n\nfunction createCanvas(\n\tw: number,\n\th: number,\n): HTMLCanvasElement | OffscreenCanvas {\n\tif (typeof OffscreenCanvas !== \"undefined\") {\n\t\treturn new OffscreenCanvas(w, h);\n\t}\n\tconst c = document.createElement(\"canvas\");\n\tc.width = w;\n\tc.height = h;\n\treturn c;\n}\n\nexport interface ExportOptions extends RenderOptions {\n\t/** Output pixel dimensions (square). Default: 512. */\n\tsize?: number;\n\t/** Image MIME type. Default: \"image/png\". */\n\ttype?: string;\n\t/** Quality 0–1 for lossy types. Default: 0.92. */\n\tquality?: number;\n}\n\n/** Render a seed's gradient and return it as a data URL. Browser only. */\nexport function gradientToDataURL(\n\tseed: number | string,\n\toptions: ExportOptions = {},\n): string {\n\tconst { size = 512, type = \"image/png\", quality = 0.92 } = options;\n\tconst canvas = document.createElement(\"canvas\");\n\tcanvas.width = size;\n\tcanvas.height = size;\n\trenderGradient(canvas, seed, options);\n\treturn canvas.toDataURL(type, quality);\n}\n\n/** Render a seed's gradient and resolve a Blob (or null). Browser only. */\nexport function gradientToBlob(\n\tseed: number | string,\n\toptions: ExportOptions = {},\n): Promise<Blob | null> {\n\tconst { size = 512, type = \"image/png\", quality = 0.92 } = options;\n\tconst canvas = document.createElement(\"canvas\");\n\tcanvas.width = size;\n\tcanvas.height = size;\n\trenderGradient(canvas, seed, options);\n\treturn new Promise((resolve) => canvas.toBlob(resolve, type, quality));\n}\n","import { drawMeshGradient } from \"@outpacelabs/gradient-avatars\";\nimport type { CSSProperties } from \"react\";\nimport { useEffect, useRef } from \"react\";\n\nexport interface GradientAvatarProps {\n\t/** Any string or number — each unique seed produces a unique gradient. */\n\tseed: number | string;\n\t/** Rendered size in pixels. Default: 32. */\n\tsize?: number;\n\t/**\n\t * Corner radius. Number = pixels, string = any CSS length.\n\t * Defaults to a full circle; pass `0` for a square or e.g. `12` for a\n\t * rounded square. Default: \"9999px\".\n\t */\n\tradius?: number | string;\n\t/** Additional CSS classes on the wrapper. */\n\tclassName?: string;\n\t/** Extra inline styles merged onto the wrapper. */\n\tstyle?: CSSProperties;\n}\n\n/** Internal render resolution. Higher than display size so the CSS blur is smooth. */\nconst RENDER_SIZE = 256;\n/** Blur radius as a fraction of display size. */\nconst BLUR_FRACTION = 0.06;\n\n/**\n * Renders a deterministic mesh-gradient avatar on a `<canvas>`.\n * The same seed always produces the same gradient.\n */\nexport function GradientAvatar({\n\tseed,\n\tsize = 32,\n\tradius = \"9999px\",\n\tclassName,\n\tstyle,\n}: GradientAvatarProps) {\n\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\n\tuseEffect(() => {\n\t\tconst canvas = canvasRef.current;\n\t\tif (!canvas) return;\n\t\tconst ctx = canvas.getContext(\"2d\");\n\t\tif (!ctx) return;\n\t\tctx.clearRect(0, 0, RENDER_SIZE, RENDER_SIZE);\n\t\tdrawMeshGradient(ctx, seed, RENDER_SIZE);\n\t}, [seed]);\n\n\tconst blurPx = Math.max(1, Math.round(size * BLUR_FRACTION));\n\n\treturn (\n\t\t<span\n\t\t\tclassName={className}\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"inline-block\",\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tborderRadius: radius,\n\t\t\t\twidth: size,\n\t\t\t\theight: size,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<canvas\n\t\t\t\tref={canvasRef}\n\t\t\t\twidth={RENDER_SIZE}\n\t\t\t\theight={RENDER_SIZE}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\tdisplay: \"block\",\n\t\t\t\t\tfilter: `blur(${blurPx}px)`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</span>\n\t);\n}\n\nexport type {\n\tExportOptions,\n\tGradientPalette,\n\tHarmony,\n\tRenderOptions,\n} from \"@outpacelabs/gradient-avatars\";\nexport {\n\tdrawMeshGradient,\n\tgeneratePalette,\n\tgradientToBlob,\n\tgradientToDataURL,\n\trenderGradient,\n\tseedFromString,\n\ttoSeed,\n} from \"@outpacelabs/gradient-avatars\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+/**
+ * @outpacelabs/gradient-avatars
+ *
+ * Framework-agnostic mesh-gradient avatar generator. Every seed (string or
+ * number) deterministically produces a unique gradient — no stored images,
+ * no network. Pure palette/RNG core plus optional Canvas2D render helpers.
+ */
+type Harmony = "analogous" | "triadic" | "splitComplementary" | "tetradic" | "complementary";
+interface GradientPalette {
+    /** The numeric seed the palette was derived from. */
+    seed: number;
+    /** Hex color stops used to paint the mesh. */
+    colors: string[];
+    /** Which color-harmony rule produced the hues. */
+    harmony: Harmony;
+}
+/**
+ * Stable string → 32-bit unsigned hash (FNV-1a + bit-mixing avalanche).
+ * Uses the full uint32 range as a seed so similar strings diverge fully.
+ */
+declare function seedFromString(input: string): number;
+/** Normalize a string or number seed to the numeric seed used internally. */
+declare function toSeed(seed: number | string): number;
+/** Derive the deterministic color palette for a seed. */
+declare function generatePalette(seed: number | string): GradientPalette;
+/**
+ * Minimal Canvas2D context surface the renderer needs. Both
+ * `HTMLCanvasElement` and `OffscreenCanvas` 2D contexts satisfy it.
+ */
+type GradientContext = {
+    fillStyle: string | CanvasGradient | CanvasPattern;
+    globalCompositeOperation: GlobalCompositeOperation;
+    fillRect(x: number, y: number, w: number, h: number): void;
+    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+};
+/**
+ * Draw the mesh gradient for `seed` into `ctx` at `size` x `size`.
+ * The caller is responsible for any blur — apply `filter: blur(…)` on the
+ * displayed canvas (≈6% of the rendered dimension) for the signature look,
+ * or use {@link renderGradient} / {@link gradientToDataURL} which bake it in.
+ */
+declare function drawMeshGradient(ctx: GradientContext, seed: number | string, size: number): void;
+interface RenderOptions {
+    /**
+     * Blur radius in pixels. Defaults to ~6% of the canvas size for the
+     * signature soft look. Pass `0` to disable.
+     */
+    blur?: number;
+}
+/**
+ * Render a seed's gradient into an existing canvas, baking in the soft blur.
+ * Draws at the canvas's current `width`/`height`. Browser/OffscreenCanvas only.
+ */
+declare function renderGradient(canvas: HTMLCanvasElement | OffscreenCanvas, seed: number | string, options?: RenderOptions): void;
+interface ExportOptions extends RenderOptions {
+    /** Output pixel dimensions (square). Default: 512. */
+    size?: number;
+    /** Image MIME type. Default: "image/png". */
+    type?: string;
+    /** Quality 0–1 for lossy types. Default: 0.92. */
+    quality?: number;
+}
+/** Render a seed's gradient and return it as a data URL. Browser only. */
+declare function gradientToDataURL(seed: number | string, options?: ExportOptions): string;
+/** Render a seed's gradient and resolve a Blob (or null). Browser only. */
+declare function gradientToBlob(seed: number | string, options?: ExportOptions): Promise<Blob | null>;
+
+interface GradientAvatarProps {
+    /** Any string or number — each unique seed produces a unique gradient. */
+    seed: number | string;
+    /** Rendered size in pixels. Default: 32. */
+    size?: number;
+    /**
+     * Corner radius. Number = pixels, string = any CSS length.
+     * Defaults to a full circle; pass `0` for a square or e.g. `12` for a
+     * rounded square. Default: "9999px".
+     */
+    radius?: number | string;
+    /** Additional CSS classes on the wrapper. */
+    className?: string;
+    /** Extra inline styles merged onto the wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Renders a deterministic mesh-gradient avatar on a `<canvas>`.
+ * The same seed always produces the same gradient.
+ */
+declare function GradientAvatar({ seed, size, radius, className, style, }: GradientAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { type ExportOptions, GradientAvatar, type GradientAvatarProps, type GradientPalette, type Harmony, type RenderOptions, drawMeshGradient, generatePalette, gradientToBlob, gradientToDataURL, renderGradient, seedFromString, toSeed };

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+/**
+ * @outpacelabs/gradient-avatars
+ *
+ * Framework-agnostic mesh-gradient avatar generator. Every seed (string or
+ * number) deterministically produces a unique gradient — no stored images,
+ * no network. Pure palette/RNG core plus optional Canvas2D render helpers.
+ */
+type Harmony = "analogous" | "triadic" | "splitComplementary" | "tetradic" | "complementary";
+interface GradientPalette {
+    /** The numeric seed the palette was derived from. */
+    seed: number;
+    /** Hex color stops used to paint the mesh. */
+    colors: string[];
+    /** Which color-harmony rule produced the hues. */
+    harmony: Harmony;
+}
+/**
+ * Stable string → 32-bit unsigned hash (FNV-1a + bit-mixing avalanche).
+ * Uses the full uint32 range as a seed so similar strings diverge fully.
+ */
+declare function seedFromString(input: string): number;
+/** Normalize a string or number seed to the numeric seed used internally. */
+declare function toSeed(seed: number | string): number;
+/** Derive the deterministic color palette for a seed. */
+declare function generatePalette(seed: number | string): GradientPalette;
+/**
+ * Minimal Canvas2D context surface the renderer needs. Both
+ * `HTMLCanvasElement` and `OffscreenCanvas` 2D contexts satisfy it.
+ */
+type GradientContext = {
+    fillStyle: string | CanvasGradient | CanvasPattern;
+    globalCompositeOperation: GlobalCompositeOperation;
+    fillRect(x: number, y: number, w: number, h: number): void;
+    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+};
+/**
+ * Draw the mesh gradient for `seed` into `ctx` at `size` x `size`.
+ * The caller is responsible for any blur — apply `filter: blur(…)` on the
+ * displayed canvas (≈6% of the rendered dimension) for the signature look,
+ * or use {@link renderGradient} / {@link gradientToDataURL} which bake it in.
+ */
+declare function drawMeshGradient(ctx: GradientContext, seed: number | string, size: number): void;
+interface RenderOptions {
+    /**
+     * Blur radius in pixels. Defaults to ~6% of the canvas size for the
+     * signature soft look. Pass `0` to disable.
+     */
+    blur?: number;
+}
+/**
+ * Render a seed's gradient into an existing canvas, baking in the soft blur.
+ * Draws at the canvas's current `width`/`height`. Browser/OffscreenCanvas only.
+ */
+declare function renderGradient(canvas: HTMLCanvasElement | OffscreenCanvas, seed: number | string, options?: RenderOptions): void;
+interface ExportOptions extends RenderOptions {
+    /** Output pixel dimensions (square). Default: 512. */
+    size?: number;
+    /** Image MIME type. Default: "image/png". */
+    type?: string;
+    /** Quality 0–1 for lossy types. Default: 0.92. */
+    quality?: number;
+}
+/** Render a seed's gradient and return it as a data URL. Browser only. */
+declare function gradientToDataURL(seed: number | string, options?: ExportOptions): string;
+/** Render a seed's gradient and resolve a Blob (or null). Browser only. */
+declare function gradientToBlob(seed: number | string, options?: ExportOptions): Promise<Blob | null>;
+
+interface GradientAvatarProps {
+    /** Any string or number — each unique seed produces a unique gradient. */
+    seed: number | string;
+    /** Rendered size in pixels. Default: 32. */
+    size?: number;
+    /**
+     * Corner radius. Number = pixels, string = any CSS length.
+     * Defaults to a full circle; pass `0` for a square or e.g. `12` for a
+     * rounded square. Default: "9999px".
+     */
+    radius?: number | string;
+    /** Additional CSS classes on the wrapper. */
+    className?: string;
+    /** Extra inline styles merged onto the wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Renders a deterministic mesh-gradient avatar on a `<canvas>`.
+ * The same seed always produces the same gradient.
+ */
+declare function GradientAvatar({ seed, size, radius, className, style, }: GradientAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { type ExportOptions, GradientAvatar, type GradientAvatarProps, type GradientPalette, type Harmony, type RenderOptions, drawMeshGradient, generatePalette, gradientToBlob, gradientToDataURL, renderGradient, seedFromString, toSeed };

package/dist/index.js

@@ -0,0 +1,252 @@
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// ../gradient-avatars/dist/index.js
+var HARMONY_TYPES = [
+  "analogous",
+  "triadic",
+  "splitComplementary",
+  "tetradic",
+  "complementary"
+];
+var GOLDEN_ANGLE = 137.5;
+var DEFAULT_BLUR_FRACTION = 0.06;
+function seededRandom(seed) {
+  let s = seed;
+  return () => {
+    s += 1831565813;
+    let t = s;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hslToHex(h, s, l) {
+  h = (h % 360 + 360) % 360;
+  s = Math.max(0, Math.min(100, s)) / 100;
+  l = Math.max(0, Math.min(100, l)) / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = (n) => {
+    const hex = Math.round((n + m) * 255).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+function harmonyHues(baseHue, harmony) {
+  switch (harmony) {
+    case "analogous":
+      return [baseHue, baseHue + 30, baseHue + 60, baseHue - 30];
+    case "triadic":
+      return [baseHue, baseHue + 120, baseHue + 240];
+    case "splitComplementary":
+      return [baseHue, baseHue + 150, baseHue + 210];
+    case "tetradic":
+      return [baseHue, baseHue + 90, baseHue + 180, baseHue + 270];
+    case "complementary":
+      return [baseHue, baseHue + 180, baseHue + 20, baseHue + 200];
+  }
+}
+function seedFromString(input) {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  h ^= h >>> 16;
+  h = Math.imul(h, 2146121005) >>> 0;
+  h ^= h >>> 15;
+  h = Math.imul(h, 2221713035) >>> 0;
+  h ^= h >>> 16;
+  return h >>> 0;
+}
+function toSeed(seed) {
+  if (typeof seed === "number") return seed;
+  return seedFromString(seed);
+}
+function generatePalette(seed) {
+  const s = toSeed(seed);
+  const random = seededRandom(s);
+  const baseHue = s * GOLDEN_ANGLE % 360;
+  const harmonyIndex = Math.floor(random() * HARMONY_TYPES.length);
+  const harmony = HARMONY_TYPES[harmonyIndex];
+  const hues = harmonyHues(baseHue, harmony);
+  const colors = hues.map((hue) => {
+    const saturation = 75 + random() * 25;
+    const lightness = 50 + random() * 20;
+    return hslToHex(hue, saturation, lightness);
+  });
+  return { seed: s, colors, harmony };
+}
+function drawMeshGradient(ctx, seed, size) {
+  const s = toSeed(seed);
+  const { colors } = generatePalette(s);
+  const random = seededRandom(s * 12345);
+  ctx.fillStyle = colors[0];
+  ctx.fillRect(0, 0, size, size);
+  const numSpots = 8 + Math.floor(random() * 5);
+  const spots = [];
+  for (let i = 0; i < numSpots; i++) {
+    const angle = random() * Math.PI * 2;
+    const distance = random() * size * 0.4;
+    const centerX = size / 2 + Math.cos(angle) * distance;
+    const centerY = size / 2 + Math.sin(angle) * distance;
+    spots.push({
+      x: centerX + (random() - 0.5) * size * 0.3,
+      y: centerY + (random() - 0.5) * size * 0.3,
+      radius: size * (0.3 + random() * 0.4),
+      color: colors[i % colors.length]
+    });
+  }
+  spots.sort((a, b) => b.radius - a.radius);
+  ctx.globalCompositeOperation = "source-over";
+  for (const spot of spots) {
+    const g = ctx.createRadialGradient(
+      spot.x,
+      spot.y,
+      0,
+      spot.x,
+      spot.y,
+      spot.radius
+    );
+    g.addColorStop(0, `${spot.color}FF`);
+    g.addColorStop(0.3, `${spot.color}DD`);
+    g.addColorStop(0.6, `${spot.color}88`);
+    g.addColorStop(1, `${spot.color}00`);
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, size, size);
+  }
+  const hx = size * 0.3 + random() * size * 0.2;
+  const hy = size * 0.3 + random() * size * 0.2;
+  const hg = ctx.createRadialGradient(hx, hy, 0, hx, hy, size * 0.3);
+  hg.addColorStop(0, "rgba(255,255,255,0.15)");
+  hg.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = hg;
+  ctx.fillRect(0, 0, size, size);
+}
+function blurFor(size, blur) {
+  if (blur === 0) return 0;
+  return blur ?? Math.round(size * DEFAULT_BLUR_FRACTION);
+}
+function renderGradient(canvas, seed, options = {}) {
+  const size = canvas.width;
+  const blur = blurFor(size, options.blur);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  if (blur <= 0) {
+    ctx.clearRect(0, 0, size, size);
+    drawMeshGradient(ctx, seed, size);
+    return;
+  }
+  const scratch = createCanvas(size, size);
+  const sctx = scratch.getContext("2d");
+  if (!sctx) return;
+  drawMeshGradient(sctx, seed, size);
+  const scaleUp = 1 + blur / size * 4;
+  const dw = size * scaleUp;
+  const offset = (dw - size) / 2;
+  ctx.clearRect(0, 0, size, size);
+  ctx.filter = `blur(${blur}px)`;
+  ctx.drawImage(scratch, -offset, -offset, dw, dw);
+  ctx.filter = "none";
+}
+function createCanvas(w, h) {
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(w, h);
+  }
+  const c = document.createElement("canvas");
+  c.width = w;
+  c.height = h;
+  return c;
+}
+function gradientToDataURL(seed, options = {}) {
+  const { size = 512, type = "image/png", quality = 0.92 } = options;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  renderGradient(canvas, seed, options);
+  return canvas.toDataURL(type, quality);
+}
+function gradientToBlob(seed, options = {}) {
+  const { size = 512, type = "image/png", quality = 0.92 } = options;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  renderGradient(canvas, seed, options);
+  return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+}
+var RENDER_SIZE = 256;
+var BLUR_FRACTION = 0.06;
+function GradientAvatar({
+  seed,
+  size = 32,
+  radius = "9999px",
+  className,
+  style
+}) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, RENDER_SIZE, RENDER_SIZE);
+    drawMeshGradient(ctx, seed, RENDER_SIZE);
+  }, [seed]);
+  const blurPx = Math.max(1, Math.round(size * BLUR_FRACTION));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-block",
+        overflow: "hidden",
+        borderRadius: radius,
+        width: size,
+        height: size,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          width: RENDER_SIZE,
+          height: RENDER_SIZE,
+          style: {
+            width: "100%",
+            height: "100%",
+            display: "block",
+            filter: `blur(${blurPx}px)`
+          }
+        }
+      )
+    }
+  );
+}
+
+export { GradientAvatar, drawMeshGradient, generatePalette, gradientToBlob, gradientToDataURL, renderGradient, seedFromString, toSeed };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../gradient-avatars/src/index.ts","../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @outpacelabs/gradient-avatars\n *\n * Framework-agnostic mesh-gradient avatar generator. Every seed (string or\n * number) deterministically produces a unique gradient — no stored images,\n * no network. Pure palette/RNG core plus optional Canvas2D render helpers.\n */\n\nexport type Harmony =\n\t| \"analogous\"\n\t| \"triadic\"\n\t| \"splitComplementary\"\n\t| \"tetradic\"\n\t| \"complementary\";\n\nexport interface GradientPalette {\n\t/** The numeric seed the palette was derived from. */\n\tseed: number;\n\t/** Hex color stops used to paint the mesh. */\n\tcolors: string[];\n\t/** Which color-harmony rule produced the hues. */\n\tharmony: Harmony;\n}\n\nconst HARMONY_TYPES: Harmony[] = [\n\t\"analogous\",\n\t\"triadic\",\n\t\"splitComplementary\",\n\t\"tetradic\",\n\t\"complementary\",\n];\n\nconst GOLDEN_ANGLE = 137.5;\n\n/** Default blur radius as a fraction of the rendered dimension. */\nexport const DEFAULT_BLUR_FRACTION = 0.06;\n\nfunction seededRandom(seed: number): () => number {\n\tlet s = seed;\n\treturn () => {\n\t\ts += 0x6d2b79f5;\n\t\tlet t = s;\n\t\tt = Math.imul(t ^ (t >>> 15), t | 1);\n\t\tt ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n\t\treturn ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n\t};\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n\th = ((h % 360) + 360) % 360;\n\ts = Math.max(0, Math.min(100, s)) / 100;\n\tl = Math.max(0, Math.min(100, l)) / 100;\n\n\tconst c = (1 - Math.abs(2 * l - 1)) * s;\n\tconst x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n\tconst m = l - c / 2;\n\n\tlet r = 0;\n\tlet g = 0;\n\tlet b = 0;\n\tif (h < 60) {\n\t\tr = c;\n\t\tg = x;\n\t} else if (h < 120) {\n\t\tr = x;\n\t\tg = c;\n\t} else if (h < 180) {\n\t\tg = c;\n\t\tb = x;\n\t} else if (h < 240) {\n\t\tg = x;\n\t\tb = c;\n\t} else if (h < 300) {\n\t\tr = x;\n\t\tb = c;\n\t} else {\n\t\tr = c;\n\t\tb = x;\n\t}\n\n\tconst toHex = (n: number) => {\n\t\tconst hex = Math.round((n + m) * 255).toString(16);\n\t\treturn hex.length === 1 ? `0${hex}` : hex;\n\t};\n\treturn `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();\n}\n\nfunction harmonyHues(baseHue: number, harmony: Harmony): number[] {\n\tswitch (harmony) {\n\t\tcase \"analogous\":\n\t\t\treturn [baseHue, baseHue + 30, baseHue + 60, baseHue - 30];\n\t\tcase \"triadic\":\n\t\t\treturn [baseHue, baseHue + 120, baseHue + 240];\n\t\tcase \"splitComplementary\":\n\t\t\treturn [baseHue, baseHue + 150, baseHue + 210];\n\t\tcase \"tetradic\":\n\t\t\treturn [baseHue, baseHue + 90, baseHue + 180, baseHue + 270];\n\t\tcase \"complementary\":\n\t\t\treturn [baseHue, baseHue + 180, baseHue + 20, baseHue + 200];\n\t}\n}\n\n/**\n * Stable string → 32-bit unsigned hash (FNV-1a + bit-mixing avalanche).\n * Uses the full uint32 range as a seed so similar strings diverge fully.\n */\nexport function seedFromString(input: string): number {\n\tlet h = 2166136261 >>> 0;\n\tfor (let i = 0; i < input.length; i++) {\n\t\th ^= input.charCodeAt(i);\n\t\th = Math.imul(h, 16777619) >>> 0;\n\t}\n\th ^= h >>> 16;\n\th = Math.imul(h, 0x7feb352d) >>> 0;\n\th ^= h >>> 15;\n\th = Math.imul(h, 0x846ca68b) >>> 0;\n\th ^= h >>> 16;\n\treturn h >>> 0;\n}\n\n/** Normalize a string or number seed to the numeric seed used internally. */\nexport function toSeed(seed: number | string): number {\n\tif (typeof seed === \"number\") return seed;\n\treturn seedFromString(seed);\n}\n\n/** Derive the deterministic color palette for a seed. */\nexport function generatePalette(seed: number | string): GradientPalette {\n\tconst s = toSeed(seed);\n\tconst random = seededRandom(s);\n\tconst baseHue = (s * GOLDEN_ANGLE) % 360;\n\tconst harmonyIndex = Math.floor(random() * HARMONY_TYPES.length);\n\tconst harmony = HARMONY_TYPES[harmonyIndex];\n\tconst hues = harmonyHues(baseHue, harmony);\n\tconst colors = hues.map((hue) => {\n\t\tconst saturation = 75 + random() * 25;\n\t\tconst lightness = 50 + random() * 20;\n\t\treturn hslToHex(hue, saturation, lightness);\n\t});\n\treturn { seed: s, colors, harmony };\n}\n\n/**\n * Minimal Canvas2D context surface the renderer needs. Both\n * `HTMLCanvasElement` and `OffscreenCanvas` 2D contexts satisfy it.\n */\nexport type GradientContext = {\n\tfillStyle: string | CanvasGradient | CanvasPattern;\n\tglobalCompositeOperation: GlobalCompositeOperation;\n\tfillRect(x: number, y: number, w: number, h: number): void;\n\tcreateRadialGradient(\n\t\tx0: number,\n\t\ty0: number,\n\t\tr0: number,\n\t\tx1: number,\n\t\ty1: number,\n\t\tr1: number,\n\t): CanvasGradient;\n};\n\n/**\n * Draw the mesh gradient for `seed` into `ctx` at `size` x `size`.\n * The caller is responsible for any blur — apply `filter: blur(…)` on the\n * displayed canvas (≈6% of the rendered dimension) for the signature look,\n * or use {@link renderGradient} / {@link gradientToDataURL} which bake it in.\n */\nexport function drawMeshGradient(\n\tctx: GradientContext,\n\tseed: number | string,\n\tsize: number,\n): void {\n\tconst s = toSeed(seed);\n\tconst { colors } = generatePalette(s);\n\tconst random = seededRandom(s * 12345);\n\n\tctx.fillStyle = colors[0];\n\tctx.fillRect(0, 0, size, size);\n\n\tconst numSpots = 8 + Math.floor(random() * 5);\n\tconst spots: Array<{ x: number; y: number; radius: number; color: string }> =\n\t\t[];\n\n\tfor (let i = 0; i < numSpots; i++) {\n\t\tconst angle = random() * Math.PI * 2;\n\t\tconst distance = random() * size * 0.4;\n\t\tconst centerX = size / 2 + Math.cos(angle) * distance;\n\t\tconst centerY = size / 2 + Math.sin(angle) * distance;\n\t\tspots.push({\n\t\t\tx: centerX + (random() - 0.5) * size * 0.3,\n\t\t\ty: centerY + (random() - 0.5) * size * 0.3,\n\t\t\tradius: size * (0.3 + random() * 0.4),\n\t\t\tcolor: colors[i % colors.length],\n\t\t});\n\t}\n\n\tspots.sort((a, b) => b.radius - a.radius);\n\n\tctx.globalCompositeOperation = \"source-over\";\n\tfor (const spot of spots) {\n\t\tconst g = ctx.createRadialGradient(\n\t\t\tspot.x,\n\t\t\tspot.y,\n\t\t\t0,\n\t\t\tspot.x,\n\t\t\tspot.y,\n\t\t\tspot.radius,\n\t\t);\n\t\tg.addColorStop(0, `${spot.color}FF`);\n\t\tg.addColorStop(0.3, `${spot.color}DD`);\n\t\tg.addColorStop(0.6, `${spot.color}88`);\n\t\tg.addColorStop(1, `${spot.color}00`);\n\t\tctx.fillStyle = g;\n\t\tctx.fillRect(0, 0, size, size);\n\t}\n\n\tconst hx = size * 0.3 + random() * size * 0.2;\n\tconst hy = size * 0.3 + random() * size * 0.2;\n\tconst hg = ctx.createRadialGradient(hx, hy, 0, hx, hy, size * 0.3);\n\thg.addColorStop(0, \"rgba(255,255,255,0.15)\");\n\thg.addColorStop(1, \"rgba(255,255,255,0)\");\n\tctx.fillStyle = hg;\n\tctx.fillRect(0, 0, size, size);\n}\n\nexport interface RenderOptions {\n\t/**\n\t * Blur radius in pixels. Defaults to ~6% of the canvas size for the\n\t * signature soft look. Pass `0` to disable.\n\t */\n\tblur?: number;\n}\n\nfunction blurFor(size: number, blur?: number): number {\n\tif (blur === 0) return 0;\n\treturn blur ?? Math.round(size * DEFAULT_BLUR_FRACTION);\n}\n\n/**\n * Render a seed's gradient into an existing canvas, baking in the soft blur.\n * Draws at the canvas's current `width`/`height`. Browser/OffscreenCanvas only.\n */\nexport function renderGradient(\n\tcanvas: HTMLCanvasElement | OffscreenCanvas,\n\tseed: number | string,\n\toptions: RenderOptions = {},\n): void {\n\tconst size = canvas.width;\n\tconst blur = blurFor(size, options.blur);\n\n\tconst ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D | null;\n\tif (!ctx) return;\n\n\tif (blur <= 0) {\n\t\tctx.clearRect(0, 0, size, size);\n\t\tdrawMeshGradient(ctx, seed, size);\n\t\treturn;\n\t}\n\n\t// Draw the raw mesh on a scratch canvas, then composite it back with blur\n\t// scaled up slightly so the soft edges fall outside the frame (no ring).\n\tconst scratch = createCanvas(size, size);\n\tconst sctx = scratch.getContext(\"2d\") as CanvasRenderingContext2D | null;\n\tif (!sctx) return;\n\tdrawMeshGradient(sctx, seed, size);\n\n\tconst scaleUp = 1 + (blur / size) * 4;\n\tconst dw = size * scaleUp;\n\tconst offset = (dw - size) / 2;\n\tctx.clearRect(0, 0, size, size);\n\tctx.filter = `blur(${blur}px)`;\n\tctx.drawImage(scratch as CanvasImageSource, -offset, -offset, dw, dw);\n\tctx.filter = \"none\";\n}\n\nfunction createCanvas(\n\tw: number,\n\th: number,\n): HTMLCanvasElement | OffscreenCanvas {\n\tif (typeof OffscreenCanvas !== \"undefined\") {\n\t\treturn new OffscreenCanvas(w, h);\n\t}\n\tconst c = document.createElement(\"canvas\");\n\tc.width = w;\n\tc.height = h;\n\treturn c;\n}\n\nexport interface ExportOptions extends RenderOptions {\n\t/** Output pixel dimensions (square). Default: 512. */\n\tsize?: number;\n\t/** Image MIME type. Default: \"image/png\". */\n\ttype?: string;\n\t/** Quality 0–1 for lossy types. Default: 0.92. */\n\tquality?: number;\n}\n\n/** Render a seed's gradient and return it as a data URL. Browser only. */\nexport function gradientToDataURL(\n\tseed: number | string,\n\toptions: ExportOptions = {},\n): string {\n\tconst { size = 512, type = \"image/png\", quality = 0.92 } = options;\n\tconst canvas = document.createElement(\"canvas\");\n\tcanvas.width = size;\n\tcanvas.height = size;\n\trenderGradient(canvas, seed, options);\n\treturn canvas.toDataURL(type, quality);\n}\n\n/** Render a seed's gradient and resolve a Blob (or null). Browser only. */\nexport function gradientToBlob(\n\tseed: number | string,\n\toptions: ExportOptions = {},\n): Promise<Blob | null> {\n\tconst { size = 512, type = \"image/png\", quality = 0.92 } = options;\n\tconst canvas = document.createElement(\"canvas\");\n\tcanvas.width = size;\n\tcanvas.height = size;\n\trenderGradient(canvas, seed, options);\n\treturn new Promise((resolve) => canvas.toBlob(resolve, type, quality));\n}\n","import { drawMeshGradient } from \"@outpacelabs/gradient-avatars\";\nimport type { CSSProperties } from \"react\";\nimport { useEffect, useRef } from \"react\";\n\nexport interface GradientAvatarProps {\n\t/** Any string or number — each unique seed produces a unique gradient. */\n\tseed: number | string;\n\t/** Rendered size in pixels. Default: 32. */\n\tsize?: number;\n\t/**\n\t * Corner radius. Number = pixels, string = any CSS length.\n\t * Defaults to a full circle; pass `0` for a square or e.g. `12` for a\n\t * rounded square. Default: \"9999px\".\n\t */\n\tradius?: number | string;\n\t/** Additional CSS classes on the wrapper. */\n\tclassName?: string;\n\t/** Extra inline styles merged onto the wrapper. */\n\tstyle?: CSSProperties;\n}\n\n/** Internal render resolution. Higher than display size so the CSS blur is smooth. */\nconst RENDER_SIZE = 256;\n/** Blur radius as a fraction of display size. */\nconst BLUR_FRACTION = 0.06;\n\n/**\n * Renders a deterministic mesh-gradient avatar on a `<canvas>`.\n * The same seed always produces the same gradient.\n */\nexport function GradientAvatar({\n\tseed,\n\tsize = 32,\n\tradius = \"9999px\",\n\tclassName,\n\tstyle,\n}: GradientAvatarProps) {\n\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\n\tuseEffect(() => {\n\t\tconst canvas = canvasRef.current;\n\t\tif (!canvas) return;\n\t\tconst ctx = canvas.getContext(\"2d\");\n\t\tif (!ctx) return;\n\t\tctx.clearRect(0, 0, RENDER_SIZE, RENDER_SIZE);\n\t\tdrawMeshGradient(ctx, seed, RENDER_SIZE);\n\t}, [seed]);\n\n\tconst blurPx = Math.max(1, Math.round(size * BLUR_FRACTION));\n\n\treturn (\n\t\t<span\n\t\t\tclassName={className}\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"inline-block\",\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tborderRadius: radius,\n\t\t\t\twidth: size,\n\t\t\t\theight: size,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<canvas\n\t\t\t\tref={canvasRef}\n\t\t\t\twidth={RENDER_SIZE}\n\t\t\t\theight={RENDER_SIZE}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\tdisplay: \"block\",\n\t\t\t\t\tfilter: `blur(${blurPx}px)`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</span>\n\t);\n}\n\nexport type {\n\tExportOptions,\n\tGradientPalette,\n\tHarmony,\n\tRenderOptions,\n} from \"@outpacelabs/gradient-avatars\";\nexport {\n\tdrawMeshGradient,\n\tgeneratePalette,\n\tgradientToBlob,\n\tgradientToDataURL,\n\trenderGradient,\n\tseedFromString,\n\ttoSeed,\n} from \"@outpacelabs/gradient-avatars\";\n"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@outpacelabs/gradient-avatars-react",
+  "version": "0.2.0",
+  "description": "React component for @outpacelabs/gradient-avatars — deterministic mesh-gradient avatars, one per seed.",
+  "keywords": [
+    "avatars",
+    "gradient",
+    "mesh-gradient",
+    "generative",
+    "react",
+    "profile-pictures"
+  ],
+  "homepage": "https://avatars.outpacestudios.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/outpacelabs/avatars.git",
+    "directory": "packages/gradient-avatars-react"
+  },
+  "bugs": {
+    "url": "https://github.com/outpacelabs/avatars/issues"
+  },
+  "author": "Outpace Studios (https://outpacestudios.com)",
+  "license": "CC-BY-4.0",
+  "type": "module",
+  "sideEffects": false,
+  "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"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "react": "^19.2.4",
+    "tsup": "^8.3.5",
+    "typescript": "^5.9.3",
+    "@outpacelabs/gradient-avatars": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}