dotmote 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ryan
+
+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,178 @@
+# dotmote
+
+<p>
+  <a href="https://www.npmjs.com/package/dotmote"><img alt="npm" src="https://img.shields.io/npm/v/dotmote" /></a>
+  <img alt="license" src="https://img.shields.io/npm/l/dotmote" />
+  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/dotmote" />
+  <a href="https://stackblitz.com/github/rryanchiu/dotmote"><img alt="Open in StackBlitz" src="https://img.shields.io/badge/Open%20in-StackBlitz-1269D3" /></a>
+</p>
+
+**[English](README.md)** · [简体中文](README.zh-CN.md)
+
+> **Try it live** — [Open in StackBlitz](https://stackblitz.com/github/rryanchiu/dotmote) to run the playground in your browser. You can also import this GitHub repo into CodeSandbox.
+
+A dotted-matrix glow background for React. Scatter a few letters, emoji, or shapes over an endless grid of dots — they drift, bump into each other, and glow through the lattice like a little light show.
+
+- **React 18+** · TypeScript · Canvas 2D · **SSR-safe**
+- **Zero runtime deps** — just `react` (peer)
+- Pure Canvas 2D — no particle or dot-grid libraries
+
+## Install
+
+```bash
+npm install dotmote
+```
+
+Requires `react >= 18`. Ships ESM + TypeScript types.
+
+## Quick start
+
+```tsx
+import { Dotmote } from 'dotmote';
+
+export function Page() {
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh' }}>
+      <Dotmote theme="gradient" />
+
+      <main style={{ position: 'relative', zIndex: 1, padding: 24 }}>
+        <h1>My page</h1>
+      </main>
+    </div>
+  );
+}
+```
+
+The wrapper `<div>` is absolutely positioned behind everything — put your content in a sibling with a higher `z-index`.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `values` | `string` | — | Content as a string — each character becomes one body (whitespace skipped). Shorthand for `items`. |
+| `items` | `(ContentItem \| string)[]` | `['A','B','C','D','E']` | The bodies to drift. Strings become letters; see [Content](#content). |
+| `theme` | `ThemePreset \| ThemeConfig` | `'auto'` | A preset name or an inline config (`dotColor`, `activeDotColor`, `glow`, `background`). `auto` picks `light`/`dark` from the OS. |
+| `motion` | `MotionMode` | `'drift'` | How the bodies move — see [Motion](#motion). |
+| `speed` | `number` | `1` | Global speed multiplier. |
+| `glowStrength` | `number` | `1` | Glow strength: `<1` fades it, `>1` brightens. (`glowAlpha` is a deprecated alias.) |
+| `dotRadius` | `number` | `spacing <= 9 ? 0.82 : 1` | Dot size in px. Bigger = chunkier dots. |
+| `fontFamily` | `string` | `"Trebuchet MS", ui-rounded, sans-serif` | Font stack (weight/size are prefixed: `900 ${fontSize}px …`). |
+| `fontSize` | `number` | — | Fixed character size in px. Overrides the auto size (and `fontSizeOverride`). |
+| `fontSizeOverride` | `number \| ((w)=>number)` | — | Override the automatic font size. |
+| `fontSizeMin` / `fontSizeMax` | `number` | `207` / `270` | Bounds of the automatic font clamp. |
+| `breakpoints` | `Partial<Breakpoints>` | `{small:372, medium:640, …}` | Responsive geometry. |
+| `spacingScale` | `number` | `1` | Lattice density — `<1` denser, `>1` sparser. |
+| `introDurationMs` | `number` | `520` | Hold + fade-in period. |
+| `className` / `class` / `style` | `string` / `string` / `CSSProperties` | — | Passed to the wrapper `<div>`. `class` is an alias for `className`. |
+| `ariaHidden` | `boolean` | `true` | `aria-hidden` on the wrapper. |
+
+## Themes
+
+Pick a neutral preset, or bring your own colors:
+
+```tsx
+<Dotmote theme="mono" />   // default
+<Dotmote theme="dark" />
+<Dotmote theme="gradient" />
+
+<Dotmote
+  theme={{
+    dotColor: 'rgba(96, 165, 250, 0.6)',
+    glow: ['rgba(56, 189, 248, 0.9)', 'rgba(99, 102, 241, 0.9)', 'rgba(236, 72, 153, 0.9)'],
+    background: '#0b1020',
+  }}
+/>
+```
+
+Presets: `auto`, `light`, `dark`, `mono`, `gradient`. `auto` (the default) follows
+the OS `prefers-color-scheme` — leave `theme` out to use it. The quick start uses
+`theme="gradient"`; pass `theme="mono"` for no background + neutral gray dots.
+
+```ts
+interface ThemeConfig {
+  dotColor?: string;       // lattice dot color
+  activeDotColor?: string; // flat glow color (all 3 stops); omit to use `glow`
+  glow: [string, string, string];
+  background?: string;
+}
+```
+
+Changing the theme hot-updates in place — the bodies keep their positions and motion.
+
+## Content
+
+`values` is the fastest way to fill the background — each character becomes a body:
+
+```tsx
+<Dotmote values="dotmote" />
+<Dotmote values="🌊🔥⭐🌙" />
+```
+
+For per-body control, use `items`:
+
+```tsx
+<Dotmote items={['A', 'B', 'C', 'D', 'E']} />
+<Dotmote items={[{ kind: 'shape', value: 'circle', radius: 60 }, { kind: 'emoji', value: '🌊' }]} />
+```
+
+```ts
+type ContentItem =
+  | { kind: 'text'; value: string }
+  | { kind: 'emoji'; value: string }
+  | { kind: 'shape'; value: 'circle' | 'square' | 'triangle' | 'star' | 'diamond'; radius?: number }
+  | { kind: 'path'; value: string }; // SVG path
+```
+
+## Motion
+
+| Mode | Behavior |
+| --- | --- |
+| `drift` | drift + wall bounce + pairs collide |
+| `roam` | drift + bounce, bodies pass through each other |
+| `static` | frozen after the intro fade — laid out horizontally-aligned as a centered row |
+| `ticker-left` / `ticker-right` | marquee: horizontally-aligned row at the center, scrolling and looping with even spacing |
+
+## Development
+
+```bash
+npm install
+npm run dev       # playground at http://localhost:5199/
+npm test          # vitest (physics + item normalization)
+npm run lint
+npm run typecheck
+npm run build     # tsc → dist/
+```
+
+The playground runs on any modern browser — resize across 372 / 640px to see the breakpoints, and open DevTools → Console to confirm the reload is clean.
+
+## Deploy the demo
+
+The playground (`examples/`) is a static Vite site; `npm run build:site` emits it to `site/`. The npm **library** is built separately with `npm run build` → `dist/` (that's what gets published to npm, not the site).
+
+### GitHub Pages
+
+1. Push the repo, then in Settings → **Pages → Source = "GitHub Actions"**.
+2. The included `.github/workflows/pages.yml` builds the demo on every push and publishes it at `https://<user>.github.io/dotmote/` (base `/dotmote/`).
+
+### Cloudflare Pages
+
+1. Dashboard → **Workers & Pages → Create → Pages → Connect to Git** → pick the repo.
+2. Build settings:
+   - Build command: `npm run build:site`
+   - Build output directory: `site`
+3. Leave the base path empty — Cloudflare serves from the domain root, so no `--base` is needed.
+
+## Architecture
+
+A thin React wrapper over a framework-agnostic Canvas core. Four canvases: a dot lattice, its white alpha mask, the gradient-illuminated bodies, and the composite. The lattice and mask redraw only on resize; the glow composites every frame.
+
+## Notes / limitations
+
+- **ESM only** — no CommonJS build; use a bundler that supports ESM.
+- **Emoji keep their own colors** — they ignore the glow gradient (text and shapes recolor).
+- **`path` is basic** — feed a path already centered near the origin and scaled to ~±100 units.
+- Collision is a simplified momentum swap, not a full physics impulse.
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,155 @@
+# dotmote
+
+<p>
+  <a href="https://www.npmjs.com/package/dotmote"><img alt="npm" src="https://img.shields.io/npm/v/dotmote" /></a>
+  <img alt="license" src="https://img.shields.io/npm/l/dotmote" />
+  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/dotmote" />
+</p>
+
+[English](README.md) · **简体中文**
+
+为 React 打造的点阵发光背景。把几个字母、emoji 或形状撒在一片无边的点阵上——它们四处漂移、彼此碰撞，然后从网格里透出光来，像一场小小的灯展。
+
+- **React 18+** · TypeScript · Canvas 2D · **SSR 安全**
+- **零运行时依赖** —— 只需 `react`（peer）
+- 纯 Canvas 2D，不用任何粒子或点阵库
+
+## 安装
+
+```bash
+npm install dotmote
+```
+
+需要 `react >= 18`。提供 ESM + TypeScript 类型声明。
+
+## 快速开始
+
+```tsx
+import { Dotmote } from 'dotmote';
+
+export function Page() {
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh' }}>
+      <Dotmote theme="gradient" />
+
+      <main style={{ position: 'relative', zIndex: 1, padding: 24 }}>
+        <h1>My page</h1>
+      </main>
+    </div>
+  );
+}
+```
+
+外层包裹的 `<div>` 是绝对定位、垫在所有内容后面——把你的内容放进一个 `z-index` 更高的兄弟节点即可。
+
+## 属性
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `values` | `string` | — | 用一个字符串填充内容——每个字符成为一个主体（空白会被跳过）。`items` 的简写。 |
+| `items` | `(ContentItem \| string)[]` | `['A','B','C','D','E']` | 要漂移的主体。字符串会变成字母；见 [内容](#内容)。 |
+| `theme` | `ThemePreset \| ThemeConfig` | `'mono'` | 预设名，或内联配置（`dotColor`、`activeDotColor`、`glow`、`background`）。 |
+| `motion` | `MotionMode` | `'drift'` | 主体的运动方式——见 [动效](#动效)。 |
+| `speed` | `number` | `1` | 全局速度倍率。 |
+| `glowStrength` | `number` | `1` | 发光强度：`<1` 变淡，`>1` 更亮。（`glowAlpha` 是已废弃的别名。） |
+| `dotRadius` | `number` | `spacing <= 9 ? 0.82 : 1` | 点的大小（px）。越大越"颗粒感"。 |
+| `fontFamily` | `string` | `"Trebuchet MS", ui-rounded, sans-serif` | 字体栈（字重/字号会自动前置：`900 ${fontSize}px …`）。 |
+| `fontSizeOverride` | `number \| ((w)=>number)` | — | 覆盖自动字号。 |
+| `fontSizeMin` / `fontSizeMax` | `number` | `207` / `270` | 自动字号钳制的上下界。 |
+| `breakpoints` | `Partial<Breakpoints>` | `{small:372, medium:640, …}` | 响应式几何。 |
+| `spacingScale` | `number` | `1` | 点阵密度——`<1` 更密，`>1` 更疏。 |
+| `introDurationMs` | `number` | `520` | 停留 + 淡入时长。 |
+| `className` / `style` | `string` / `CSSProperties` | — | 传给包裹 `<div>`。 |
+| `ariaHidden` | `boolean` | `true` | 包裹 `<div>` 的 `aria-hidden`。 |
+
+## 主题
+
+选一个中性预设，或换成你自己的配色：
+
+```tsx
+<Dotmote theme="mono" />   // 默认
+<Dotmote theme="dark" />
+<Dotmote theme="gradient" />
+
+<Dotmote
+  theme={{
+    dotColor: 'rgba(96, 165, 250, 0.6)',
+    glow: ['rgba(56, 189, 248, 0.9)', 'rgba(99, 102, 241, 0.9)', 'rgba(236, 72, 153, 0.9)'],
+    background: '#0b1020',
+  }}
+/>
+```
+
+预设：`light`、`dark`、`mono`、`gradient`、`rainbow`。
+
+```ts
+interface ThemeConfig {
+  dotColor?: string;       // 点阵颜色
+  activeDotColor?: string; // 纯色发光（3 个 stop 同色）；不填则用 `glow`
+  glow: [string, string, string];
+  background?: string;
+}
+```
+
+切换主题会原地热更新——主体保持当前位置和运动不变。
+
+## 内容
+
+`values` 是最快的填充方式——每个字符成为一个主体：
+
+```tsx
+<Dotmote values="dotmote" />
+<Dotmote values="🌊🔥⭐🌙" />
+```
+
+想逐个控制，就用 `items`：
+
+```tsx
+<Dotmote items={['A', 'B', 'C', 'D', 'E']} />
+<Dotmote items={[{ kind: 'shape', value: 'circle', radius: 60 }, { kind: 'emoji', value: '🌊' }]} />
+```
+
+```ts
+type ContentItem =
+  | { kind: 'text'; value: string }
+  | { kind: 'emoji'; value: string }
+  | { kind: 'shape'; value: 'circle' | 'square' | 'triangle' | 'star' | 'diamond'; radius?: number }
+  | { kind: 'path'; value: string }; // SVG 路径
+```
+
+## 动效
+
+| Mode | 行为 |
+| --- | --- |
+| `drift` | 漂移 + 碰壁反弹 + 两两碰撞 |
+| `roam` | 漂移 + 反弹，主体彼此穿过 |
+| `static` | 淡入后静止 |
+| `ticker-left` / `ticker-right` | 跑马灯：主体排成一行循环滚动 |
+
+## 开发
+
+```bash
+npm install
+npm run dev       # playground 在 http://localhost:5199/examples/index.html
+npm test          # vitest（物理 + 内容归一化）
+npm run lint
+npm run typecheck
+npm run build     # tsc → dist/
+```
+
+playground 在任何现代浏览器都能跑——把窗口跨过 372 / 640px 看断点变化，并在 DevTools → Console 里确认刷新无报错。
+
+## 架构
+
+薄薄一层 React 包装，下面是框架无关的 Canvas 核心。四个画布：点阵、它的白色 alpha 遮罩、被渐变照亮的主体、以及合成层。点阵和遮罩只在尺寸变化时重绘；发光层每帧合成。
+
+## 说明 / 限制
+
+- **仅 ESM** —— 没有 CommonJS 构建；请用支持 ESM 的打包器。
+- **emoji 保持自身颜色** —— 它们不跟随发光渐变（文本和形状会变色）。
+- **`path` 只支持基础用法** —— 传入一条已大致以原点为中心、缩放到约 ±100 单位的路径。
+- 碰撞是简化的动量交换，不是完整的物理冲量。
+
+## 许可证
+
+MIT

package/dist/Dotmote.d.ts

@@ -0,0 +1,16 @@
+import type { DotmoteProps } from './types.js';
+/**
+ * A brand-agnostic dotted-matrix glow background.
+ *
+ * Renders a full-size lattice of dots with a few drifting "bodies"
+ * (letters / emoji / shapes) revealed *through* the dots as glowing,
+ * dot-assembled light blobs. The colors and content are fully configurable and
+ * default to neutral, brand-free values.
+ *
+ * SSR-safe: the component renders an empty `<canvas>` during server / static
+ * rendering; every `window` / `document` / `ResizeObserver` / DPR touch happens
+ * inside a `useEffect` after mount.
+ */
+export declare function Dotmote(props: DotmoteProps): JSX.Element;
+export default Dotmote;
+//# sourceMappingURL=Dotmote.d.ts.map

package/dist/Dotmote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dotmote.d.ts","sourceRoot":"","sources":["../src/Dotmote.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,YAAY,CAAC;AAqEpB;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAuFxD;AAED,eAAe,OAAO,CAAC"}

package/dist/Dotmote.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { resolveTheme } from './themes.js';
+import { normalizeItems } from './core/physics.js';
+import { createDotMatrixCore, DEFAULT_BREAKPOINTS, } from './core/createDotMatrixCore.js';
+const DEFAULT_ITEMS_INPUT = ['A', 'B', 'C', 'D', 'E'];
+const DEFAULT_FONT_FAMILY = '"Trebuchet MS", ui-rounded, sans-serif';
+const DEFAULT_DOT = 'rgba(128, 128, 128, 0.5)';
+const DEFAULT_GLOW = [
+    'rgba(120, 120, 120, 0.9)',
+    'rgba(170, 170, 170, 0.9)',
+    'rgba(220, 220, 220, 0.9)',
+];
+function resolveItemBodies(props) {
+    if (props.values !== undefined) {
+        const out = [];
+        for (const ch of Array.from(props.values)) {
+            if (ch.trim().length === 0)
+                continue;
+            out.push({ kind: 'text', value: ch });
+        }
+        return out;
+    }
+    return normalizeItems(props.items ?? DEFAULT_ITEMS_INPUT);
+}
+function buildOptions(props, dark = false) {
+    const theme = resolveTheme(props.theme, dark);
+    const glow = theme.activeDotColor
+        ? [theme.activeDotColor, theme.activeDotColor, theme.activeDotColor]
+        : theme.glow ?? DEFAULT_GLOW;
+    return {
+        items: resolveItemBodies(props),
+        dot: theme.dotColor ?? DEFAULT_DOT,
+        glow,
+        background: theme.background,
+        dotRadius: props.dotRadius,
+        glowStrength: props.glowStrength ?? props.glowAlpha ?? 1,
+        speed: props.speed ?? 1,
+        motion: props.motion ?? 'drift',
+        fontFamily: props.fontFamily ?? DEFAULT_FONT_FAMILY,
+        fontSize: props.fontSize,
+        fontSizeOverride: props.fontSizeOverride,
+        fontSizeMin: props.fontSizeMin ?? 207,
+        fontSizeMax: props.fontSizeMax ?? 270,
+        breakpoints: { ...DEFAULT_BREAKPOINTS, ...(props.breakpoints ?? {}) },
+        spacingScale: props.spacingScale ?? 1,
+        introDurationMs: props.introDurationMs ?? 520,
+    };
+}
+const containerBase = {
+    position: 'absolute',
+    inset: 0,
+    overflow: 'hidden',
+    pointerEvents: 'none',
+};
+const canvasStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+};
+/**
+ * A brand-agnostic dotted-matrix glow background.
+ *
+ * Renders a full-size lattice of dots with a few drifting "bodies"
+ * (letters / emoji / shapes) revealed *through* the dots as glowing,
+ * dot-assembled light blobs. The colors and content are fully configurable and
+ * default to neutral, brand-free values.
+ *
+ * SSR-safe: the component renders an empty `<canvas>` during server / static
+ * rendering; every `window` / `document` / `ResizeObserver` / DPR touch happens
+ * inside a `useEffect` after mount.
+ */
+export function Dotmote(props) {
+    const { className, class: cls, style, ariaHidden = true, } = props;
+    // `class` is an HTML-style alias for `className` (React uses `className`).
+    const wrapperClass = className ?? cls;
+    // OS color scheme, used only when `theme` resolves to `auto`. Defaults to
+    // light so server / static rendering stays SSR-safe (no `window`/`matchMedia`
+    // at render time); it syncs to the real value after mount.
+    const [dark, setDark] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const update = () => setDark(mq.matches);
+        update();
+        mq.addEventListener('change', update);
+        return () => mq.removeEventListener('change', update);
+    }, []);
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const coreRef = useRef(null);
+    // Deliberately enumerate the primitive props (rather than the whole `props`
+    // object) so inline `theme` / `breakpoints` literals don't rebuild options
+    // every render. buildOptions reads only the fields listed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const options = useMemo(() => buildOptions(props, dark), [
+        props.values,
+        props.items,
+        props.theme,
+        props.dotRadius,
+        props.glowStrength,
+        props.glowAlpha,
+        props.speed,
+        props.motion,
+        props.fontFamily,
+        props.fontSize,
+        props.fontSizeOverride,
+        props.fontSizeMin,
+        props.fontSizeMax,
+        props.breakpoints,
+        props.spacingScale,
+        props.introDurationMs,
+        dark,
+    ]);
+    // Keep the latest options available to the mount effect without re-running it.
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    // Create / destroy the core exactly once per mounted instance.
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container)
+            return;
+        const core = createDotMatrixCore(canvas, container, optionsRef.current);
+        coreRef.current = core;
+        core.start();
+        return () => {
+            coreRef.current = null;
+            core.destroy();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Hot-update on option change (theme colors, content, layout, ...).
+    useEffect(() => {
+        coreRef.current?.configure(optionsRef.current);
+    }, [options]);
+    return (_jsx("div", { ref: containerRef, className: wrapperClass, style: { ...containerBase, ...style }, "aria-hidden": ariaHidden, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+}
+export default Dotmote;
+//# sourceMappingURL=Dotmote.js.map

package/dist/Dotmote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dotmote.js","sourceRoot":"","sources":["../src/Dotmote.tsx"],"names":[],"mappings":"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"}

package/dist/core/createDotMatrixCore.d.ts

@@ -0,0 +1,37 @@
+import type { ContentItem, CoreOptions } from '../types.js';
+/** Responsive defaults, mirrored from the React component's props. */
+export declare const DEFAULT_BREAKPOINTS: {
+    readonly small: 372;
+    readonly medium: 640;
+    readonly smallSpacing: 8;
+    readonly mediumSpacing: 9;
+    readonly largeSpacing: 12;
+};
+/** Default content: five neutral letters. */
+export declare const DEFAULT_ITEMS: ContentItem[];
+export interface DotMatrixCoreConfig {
+    /** Create an offscreen canvas. Defaults to `document.createElement('canvas')`. */
+    canvasFactory?: () => HTMLCanvasElement;
+    /** Watch the container with `ResizeObserver`. Default `true`. */
+    observeResize?: boolean;
+}
+export interface DotMatrixCoreHandle {
+    /** Merge new resolved options. Re-renders static layers; rebuilds bodies only on items/geometry change. */
+    configure(options: CoreOptions): void;
+    /** Measure the container (unless width/height are passed) and re-render static layers. */
+    resize(cssWidth?: number, cssHeight?: number): void;
+    start(): void;
+    stop(): void;
+    destroy(): void;
+}
+/**
+ * Framework-agnostic canvas core for the dot-matrix glow background.
+ *
+ * Owns four canvases (three offscreen) and the full render/physic/lifecycle
+ * loop. The React component (and any vanilla / miniapp adapter) is a thin
+ * wrapper over this. All browser globals (`window`, `document`,
+ * `ResizeObserver`, `requestAnimationFrame`) are only touched once a handle is
+ * created at runtime — never at module scope — so import-time SSR is safe.
+ */
+export declare function createDotMatrixCore(canvas: HTMLCanvasElement, container?: HTMLElement | null, initialOptions?: CoreOptions, config?: DotMatrixCoreConfig): DotMatrixCoreHandle;
+//# sourceMappingURL=createDotMatrixCore.d.ts.map

package/dist/core/createDotMatrixCore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDotMatrixCore.d.ts","sourceRoot":"","sources":["../../src/core/createDotMatrixCore.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,WAAW,EAAE,WAAW,EAAc,MAAM,aAAa,CAAC;AAU9E,sEAAsE;AACtE,eAAO,MAAM,mBAAmB;;;;;;CAMtB,CAAC;AAEX,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,WAAW,EAMtC,CAAC;AAwBF,MAAM,WAAW,mBAAmB;IAClC,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,iBAAiB,CAAC;IACxC,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAClC,2GAA2G;IAC3G,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,0FAA0F;IAC1F,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,IAAI,IAAI,CAAC;IACb,OAAO,IAAI,IAAI,CAAC;CACjB;AAiHD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,iBAAiB,EACzB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,EAC9B,cAAc,CAAC,EAAE,WAAW,EAC5B,MAAM,GAAE,mBAAwB,GAC/B,mBAAmB,CAibrB"}