interactive-bg 0.0.0-stage → 0.1.0

package/dist/styles/dots/definition.js

@@ -0,0 +1,16 @@
+import { wanderIdleFps } from "../../shared/grid.js";
+import { dotsDefaults } from "./options.js";
+// src/styles/dots/definition.ts
+/**
+* A grid of dots that wander gently around their places. The pointer pushes
+* nearby dots away, more the closer they are, and clicks send out a wave.
+*/
+var dotsStyle = {
+	name: "dots",
+	defaults: dotsDefaults,
+	animates: (options) => options.jitter > 0 && options.jitterSpeed > 0,
+	idleFps: wanderIdleFps
+};
+export { dotsStyle };
+
+//# sourceMappingURL=definition.js.map

package/dist/styles/dots/definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","names":[],"sources":["../../../src/styles/dots/definition.ts"],"sourcesContent":["import type { StyleBase } from '../../core/style';\nimport { wanderIdleFps } from '../../shared/grid';\nimport { dotsDefaults, type DotsOptions } from './options';\n\n/**\n * A grid of dots that wander gently around their places. The pointer pushes\n * nearby dots away, more the closer they are, and clicks send out a wave.\n */\nexport const dotsStyle: StyleBase<DotsOptions> = {\n  name: 'dots',\n  defaults: dotsDefaults,\n  animates: (options) => options.jitter > 0 && options.jitterSpeed > 0,\n  // The wander is slow and sub-pixel, so it rarely needs the engine's full idle frame rate.\n  idleFps: wanderIdleFps,\n};\n"],"mappings":";;;;;;;AAQA,IAAa,YAAoC;CAC/C,MAAM;CACN,UAAU;CACV,WAAW,YAAY,QAAQ,SAAS,KAAK,QAAQ,cAAc;CAEnE,SAAS;AACX"}

package/dist/styles/dots/motion.cjs

@@ -0,0 +1,6 @@
+// src/styles/dots/motion.ts
+/** Size boost of a dot riding the crest of a wave (1 + WAVE_GROW × ring). */
+var WAVE_GROW = .6;
+exports.WAVE_GROW = WAVE_GROW;
+
+//# sourceMappingURL=motion.cjs.map

package/dist/styles/dots/motion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.cjs","names":[],"sources":["../../../src/styles/dots/motion.ts"],"sourcesContent":["// The dots-specific part of the motion model; the rest is shared with other\n// grid styles in shared/grid.ts.\n\n/** Size boost of a dot riding the crest of a wave (1 + WAVE_GROW × ring). */\nexport const WAVE_GROW = 0.6;\n"],"mappings":";;AAIA,IAAa,YAAY"}

package/dist/styles/dots/motion.d.cts

@@ -0,0 +1,2 @@
+/** Size boost of a dot riding the crest of a wave (1 + WAVE_GROW × ring). */
+export declare const WAVE_GROW = 0.6;

package/dist/styles/dots/motion.d.ts

@@ -0,0 +1,2 @@
+/** Size boost of a dot riding the crest of a wave (1 + WAVE_GROW × ring). */
+export declare const WAVE_GROW = 0.6;

package/dist/styles/dots/motion.js

@@ -0,0 +1,6 @@
+// src/styles/dots/motion.ts
+/** Size boost of a dot riding the crest of a wave (1 + WAVE_GROW × ring). */
+var WAVE_GROW = .6;
+export { WAVE_GROW };
+
+//# sourceMappingURL=motion.js.map

package/dist/styles/dots/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":[],"sources":["../../../src/styles/dots/motion.ts"],"sourcesContent":["// The dots-specific part of the motion model; the rest is shared with other\n// grid styles in shared/grid.ts.\n\n/** Size boost of a dot riding the crest of a wave (1 + WAVE_GROW × ring). */\nexport const WAVE_GROW = 0.6;\n"],"mappings":";;AAIA,IAAa,YAAY"}

package/dist/styles/dots/options.cjs

@@ -0,0 +1,33 @@
+// src/styles/dots/options.ts
+var dotsDefaults = Object.freeze({
+	color: "#8b95a5",
+	opacity: .6,
+	size: 1.6,
+	spacing: 26,
+	jitter: 1.2,
+	jitterSpeed: .35,
+	pointerRadius: 160,
+	pointerStrength: 22,
+	waveSpeed: 520,
+	waveStrength: 10,
+	waveWidth: 60,
+	waveDuration: 1.8
+});
+function resolveDotsOptions(options) {
+	return {
+		...options,
+		opacity: Math.min(1, Math.max(0, options.opacity)),
+		size: Math.max(.1, options.size),
+		spacing: Math.max(4, options.spacing),
+		jitter: Math.max(0, options.jitter),
+		jitterSpeed: Math.max(0, options.jitterSpeed),
+		pointerRadius: Math.max(1, options.pointerRadius),
+		waveSpeed: Math.max(1, options.waveSpeed),
+		waveWidth: Math.max(1, options.waveWidth),
+		waveDuration: Math.max(.05, options.waveDuration)
+	};
+}
+exports.dotsDefaults = dotsDefaults;
+exports.resolveDotsOptions = resolveDotsOptions;
+
+//# sourceMappingURL=options.cjs.map

package/dist/styles/dots/options.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.cjs","names":[],"sources":["../../../src/styles/dots/options.ts"],"sourcesContent":["export interface DotsOptions {\n  /** Dot colour. Any CSS colour. */\n  color: string;\n  /** Opacity of the dots, from `0` to `1`. Multiplies any alpha in the colour. */\n  opacity: number;\n  /** Dot radius in CSS pixels. */\n  size: number;\n  /**\n   * Distance between neighbouring dots in CSS pixels. The grid also keeps at least half of\n   * this as empty space along every edge, so dots at the edges aren't clipped.\n   */\n  spacing: number;\n  /** How far each dot wanders around its place, in CSS pixels. `0` = still. */\n  jitter: number;\n  /** How fast the dots wander, in cycles per second. `0` = still. */\n  jitterSpeed: number;\n  /** Radius around the pointer within which dots are pushed away, in CSS pixels. */\n  pointerRadius: number;\n  /** How far the dots right next to the pointer are pushed, in CSS pixels. Negative values pull them in. */\n  pointerStrength: number;\n  /** How fast a click wave travels outwards, in CSS pixels per second. */\n  waveSpeed: number;\n  /** How far a click wave pushes dots, in CSS pixels. `0` disables waves. */\n  waveStrength: number;\n  /** Width of a click wave's ring, in CSS pixels. */\n  waveWidth: number;\n  /** How long a click wave lasts before it has faded out, in seconds. */\n  waveDuration: number;\n}\n\nexport const dotsDefaults: Readonly<DotsOptions> = Object.freeze({\n  color: '#8b95a5',\n  opacity: 0.6,\n  size: 1.6,\n  spacing: 26,\n  jitter: 1.2,\n  jitterSpeed: 0.35,\n  pointerRadius: 160,\n  pointerStrength: 22,\n  waveSpeed: 520,\n  waveStrength: 10,\n  waveWidth: 60,\n  waveDuration: 1.8,\n});\n\n/** Options after clamping: what the renderers consume. */\nexport type ResolvedDotsOptions = DotsOptions;\n\nexport function resolveDotsOptions(options: DotsOptions): ResolvedDotsOptions {\n  return {\n    ...options,\n    opacity: Math.min(1, Math.max(0, options.opacity)),\n    size: Math.max(0.1, options.size),\n    spacing: Math.max(4, options.spacing),\n    jitter: Math.max(0, options.jitter),\n    jitterSpeed: Math.max(0, options.jitterSpeed),\n    pointerRadius: Math.max(1, options.pointerRadius),\n    waveSpeed: Math.max(1, options.waveSpeed),\n    waveWidth: Math.max(1, options.waveWidth),\n    waveDuration: Math.max(0.05, options.waveDuration),\n  };\n}\n"],"mappings":";AA8BA,IAAa,eAAsC,OAAO,OAAO;CAC/D,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;CACR,aAAa;CACb,eAAe;CACf,iBAAiB;CACjB,WAAW;CACX,cAAc;CACd,WAAW;CACX,cAAc;AAChB,CAAC;AAKD,SAAgB,mBAAmB,SAA2C;CAC5E,OAAO;EACL,GAAG;EACH,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,OAAO,CAAC;EACjD,MAAM,KAAK,IAAI,IAAK,QAAQ,IAAI;EAChC,SAAS,KAAK,IAAI,GAAG,QAAQ,OAAO;EACpC,QAAQ,KAAK,IAAI,GAAG,QAAQ,MAAM;EAClC,aAAa,KAAK,IAAI,GAAG,QAAQ,WAAW;EAC5C,eAAe,KAAK,IAAI,GAAG,QAAQ,aAAa;EAChD,WAAW,KAAK,IAAI,GAAG,QAAQ,SAAS;EACxC,WAAW,KAAK,IAAI,GAAG,QAAQ,SAAS;EACxC,cAAc,KAAK,IAAI,KAAM,QAAQ,YAAY;CACnD;AACF"}

package/dist/styles/dots/options.d.cts

@@ -0,0 +1,33 @@
+export interface DotsOptions {
+    /** Dot colour. Any CSS colour. */
+    color: string;
+    /** Opacity of the dots, from `0` to `1`. Multiplies any alpha in the colour. */
+    opacity: number;
+    /** Dot radius in CSS pixels. */
+    size: number;
+    /**
+     * Distance between neighbouring dots in CSS pixels. The grid also keeps at least half of
+     * this as empty space along every edge, so dots at the edges aren't clipped.
+     */
+    spacing: number;
+    /** How far each dot wanders around its place, in CSS pixels. `0` = still. */
+    jitter: number;
+    /** How fast the dots wander, in cycles per second. `0` = still. */
+    jitterSpeed: number;
+    /** Radius around the pointer within which dots are pushed away, in CSS pixels. */
+    pointerRadius: number;
+    /** How far the dots right next to the pointer are pushed, in CSS pixels. Negative values pull them in. */
+    pointerStrength: number;
+    /** How fast a click wave travels outwards, in CSS pixels per second. */
+    waveSpeed: number;
+    /** How far a click wave pushes dots, in CSS pixels. `0` disables waves. */
+    waveStrength: number;
+    /** Width of a click wave's ring, in CSS pixels. */
+    waveWidth: number;
+    /** How long a click wave lasts before it has faded out, in seconds. */
+    waveDuration: number;
+}
+export declare const dotsDefaults: Readonly<DotsOptions>;
+/** Options after clamping: what the renderers consume. */
+export type ResolvedDotsOptions = DotsOptions;
+export declare function resolveDotsOptions(options: DotsOptions): ResolvedDotsOptions;

package/dist/styles/dots/options.d.ts

@@ -0,0 +1,33 @@
+export interface DotsOptions {
+    /** Dot colour. Any CSS colour. */
+    color: string;
+    /** Opacity of the dots, from `0` to `1`. Multiplies any alpha in the colour. */
+    opacity: number;
+    /** Dot radius in CSS pixels. */
+    size: number;
+    /**
+     * Distance between neighbouring dots in CSS pixels. The grid also keeps at least half of
+     * this as empty space along every edge, so dots at the edges aren't clipped.
+     */
+    spacing: number;
+    /** How far each dot wanders around its place, in CSS pixels. `0` = still. */
+    jitter: number;
+    /** How fast the dots wander, in cycles per second. `0` = still. */
+    jitterSpeed: number;
+    /** Radius around the pointer within which dots are pushed away, in CSS pixels. */
+    pointerRadius: number;
+    /** How far the dots right next to the pointer are pushed, in CSS pixels. Negative values pull them in. */
+    pointerStrength: number;
+    /** How fast a click wave travels outwards, in CSS pixels per second. */
+    waveSpeed: number;
+    /** How far a click wave pushes dots, in CSS pixels. `0` disables waves. */
+    waveStrength: number;
+    /** Width of a click wave's ring, in CSS pixels. */
+    waveWidth: number;
+    /** How long a click wave lasts before it has faded out, in seconds. */
+    waveDuration: number;
+}
+export declare const dotsDefaults: Readonly<DotsOptions>;
+/** Options after clamping: what the renderers consume. */
+export type ResolvedDotsOptions = DotsOptions;
+export declare function resolveDotsOptions(options: DotsOptions): ResolvedDotsOptions;

package/dist/styles/dots/options.js

@@ -0,0 +1,32 @@
+// src/styles/dots/options.ts
+var dotsDefaults = Object.freeze({
+	color: "#8b95a5",
+	opacity: .6,
+	size: 1.6,
+	spacing: 26,
+	jitter: 1.2,
+	jitterSpeed: .35,
+	pointerRadius: 160,
+	pointerStrength: 22,
+	waveSpeed: 520,
+	waveStrength: 10,
+	waveWidth: 60,
+	waveDuration: 1.8
+});
+function resolveDotsOptions(options) {
+	return {
+		...options,
+		opacity: Math.min(1, Math.max(0, options.opacity)),
+		size: Math.max(.1, options.size),
+		spacing: Math.max(4, options.spacing),
+		jitter: Math.max(0, options.jitter),
+		jitterSpeed: Math.max(0, options.jitterSpeed),
+		pointerRadius: Math.max(1, options.pointerRadius),
+		waveSpeed: Math.max(1, options.waveSpeed),
+		waveWidth: Math.max(1, options.waveWidth),
+		waveDuration: Math.max(.05, options.waveDuration)
+	};
+}
+export { dotsDefaults, resolveDotsOptions };
+
+//# sourceMappingURL=options.js.map

package/dist/styles/dots/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":[],"sources":["../../../src/styles/dots/options.ts"],"sourcesContent":["export interface DotsOptions {\n  /** Dot colour. Any CSS colour. */\n  color: string;\n  /** Opacity of the dots, from `0` to `1`. Multiplies any alpha in the colour. */\n  opacity: number;\n  /** Dot radius in CSS pixels. */\n  size: number;\n  /**\n   * Distance between neighbouring dots in CSS pixels. The grid also keeps at least half of\n   * this as empty space along every edge, so dots at the edges aren't clipped.\n   */\n  spacing: number;\n  /** How far each dot wanders around its place, in CSS pixels. `0` = still. */\n  jitter: number;\n  /** How fast the dots wander, in cycles per second. `0` = still. */\n  jitterSpeed: number;\n  /** Radius around the pointer within which dots are pushed away, in CSS pixels. */\n  pointerRadius: number;\n  /** How far the dots right next to the pointer are pushed, in CSS pixels. Negative values pull them in. */\n  pointerStrength: number;\n  /** How fast a click wave travels outwards, in CSS pixels per second. */\n  waveSpeed: number;\n  /** How far a click wave pushes dots, in CSS pixels. `0` disables waves. */\n  waveStrength: number;\n  /** Width of a click wave's ring, in CSS pixels. */\n  waveWidth: number;\n  /** How long a click wave lasts before it has faded out, in seconds. */\n  waveDuration: number;\n}\n\nexport const dotsDefaults: Readonly<DotsOptions> = Object.freeze({\n  color: '#8b95a5',\n  opacity: 0.6,\n  size: 1.6,\n  spacing: 26,\n  jitter: 1.2,\n  jitterSpeed: 0.35,\n  pointerRadius: 160,\n  pointerStrength: 22,\n  waveSpeed: 520,\n  waveStrength: 10,\n  waveWidth: 60,\n  waveDuration: 1.8,\n});\n\n/** Options after clamping: what the renderers consume. */\nexport type ResolvedDotsOptions = DotsOptions;\n\nexport function resolveDotsOptions(options: DotsOptions): ResolvedDotsOptions {\n  return {\n    ...options,\n    opacity: Math.min(1, Math.max(0, options.opacity)),\n    size: Math.max(0.1, options.size),\n    spacing: Math.max(4, options.spacing),\n    jitter: Math.max(0, options.jitter),\n    jitterSpeed: Math.max(0, options.jitterSpeed),\n    pointerRadius: Math.max(1, options.pointerRadius),\n    waveSpeed: Math.max(1, options.waveSpeed),\n    waveWidth: Math.max(1, options.waveWidth),\n    waveDuration: Math.max(0.05, options.waveDuration),\n  };\n}\n"],"mappings":";AA8BA,IAAa,eAAsC,OAAO,OAAO;CAC/D,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;CACR,aAAa;CACb,eAAe;CACf,iBAAiB;CACjB,WAAW;CACX,cAAc;CACd,WAAW;CACX,cAAc;AAChB,CAAC;AAKD,SAAgB,mBAAmB,SAA2C;CAC5E,OAAO;EACL,GAAG;EACH,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,OAAO,CAAC;EACjD,MAAM,KAAK,IAAI,IAAK,QAAQ,IAAI;EAChC,SAAS,KAAK,IAAI,GAAG,QAAQ,OAAO;EACpC,QAAQ,KAAK,IAAI,GAAG,QAAQ,MAAM;EAClC,aAAa,KAAK,IAAI,GAAG,QAAQ,WAAW;EAC5C,eAAe,KAAK,IAAI,GAAG,QAAQ,aAAa;EAChD,WAAW,KAAK,IAAI,GAAG,QAAQ,SAAS;EACxC,WAAW,KAAK,IAAI,GAAG,QAAQ,SAAS;EACxC,cAAc,KAAK,IAAI,KAAM,QAAQ,YAAY;CACnD;AACF"}

package/dist/styles/dots/webgl.cjs

@@ -0,0 +1,113 @@
+const require_color = require("../../core/color.cjs");
+const require_webgl = require("../../core/webgl.cjs");
+const require_grid = require("../../shared/grid.cjs");
+const require_motion = require("./motion.cjs");
+const require_options = require("./options.cjs");
+const require_grid_webgl = require("../../shared/grid-webgl.cjs");
+// src/styles/dots/webgl.ts
+var VERTEX = `#version 300 es
+precision highp float;
+
+${require_grid_webgl.GRID_VERTEX_GLSL}
+uniform float uSize;          // dot radius, CSS px
+uniform vec3 uPointer;        // x, y, push distance (strength × influence)
+uniform float uPointerRadius;
+uniform vec4 uWaves[8];  // x, y, ring radius, envelope (0 = inactive)
+uniform float uWaveStrength;
+uniform float uWaveWidth;
+
+out float vRadius;            // device px
+out float vPointSize;         // device px
+
+void main() {
+  vec2 ij = markCell();
+  vec2 rest = restPosition(ij);
+  vec2 p = rest + wander(ij);
+
+  vec2 d = rest - uPointer.xy;
+  float dist = length(d);
+  if (dist > 0.0 && dist < uPointerRadius) {
+    float k = 1.0 - dist / uPointerRadius;
+    p += d / dist * uPointer.z * k * k;
+  }
+
+  float grow = 0.0;
+  for (int w = 0; w < 8; w++) {
+    vec4 wave = uWaves[w];
+    if (wave.w <= 0.0) continue;
+    vec2 dw = rest - wave.xy;
+    float dd = length(dw);
+    if (dd == 0.0) continue;
+    float x = (dd - wave.z) / uWaveWidth;
+    float ring = exp(-x * x) * wave.w;
+    p += dw / dd * uWaveStrength * ring;
+    grow += ring;
+  }
+
+  vRadius = uSize * (1.0 + ${require_motion.WAVE_GROW.toFixed(3)} * grow) * uDpr;
+  vPointSize = 2.0 * vRadius + 2.0; // room for the antialiased edge
+  gl_PointSize = vPointSize;
+  gl_Position = toClip(p);
+}`;
+var FRAGMENT = `#version 300 es
+precision highp float;
+
+uniform vec4 uColor;          // straight RGBA, opacity applied
+in float vRadius;
+in float vPointSize;
+out vec4 outColor;
+
+void main() {
+  float dist = length(gl_PointCoord - 0.5) * vPointSize;
+  float a = uColor.a * clamp(vRadius + 0.5 - dist, 0.0, 1.0);
+  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background
+}`;
+var UNIFORMS = [
+	...require_grid_webgl.GRID_UNIFORMS,
+	"uSize",
+	"uPointer",
+	"uPointerRadius",
+	"uWaves",
+	"uWaveStrength",
+	"uWaveWidth",
+	"uColor"
+];
+/** Every dot is one GL point; the vertex shader places it, so the CPU only sets uniforms. */
+function createDotsWebGL(gl, initial) {
+	let options = require_options.resolveDotsOptions(initial);
+	const waves = require_grid.createWaveList();
+	const waveData = /* @__PURE__ */ new Float32Array(32);
+	let clock = 0;
+	const program = require_webgl.createProgram(gl, VERTEX, FRAGMENT);
+	const uniforms = program ? require_webgl.getUniforms(gl, program, UNIFORMS) : null;
+	return {
+		update(next) {
+			options = require_options.resolveDotsOptions(next);
+		},
+		render(frame) {
+			if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * require_grid.TAU;
+			waves.advance(frame, options.waveDuration, options.waveStrength !== 0);
+			if (!program || !uniforms) return waves.waves.length > 0;
+			waves.pack(waveData, options.waveSpeed, options.waveDuration);
+			const grid = require_grid.gridLayout(frame.width, frame.height, options.spacing);
+			const color = require_color.parseColor(options.color);
+			gl.useProgram(program);
+			require_grid_webgl.setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);
+			gl.uniform1f(uniforms.uSize, options.size);
+			gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);
+			gl.uniform1f(uniforms.uPointerRadius, options.pointerRadius);
+			gl.uniform4fv(uniforms.uWaves, waveData);
+			gl.uniform1f(uniforms.uWaveStrength, options.waveStrength);
+			gl.uniform1f(uniforms.uWaveWidth, options.waveWidth);
+			gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);
+			gl.drawArrays(gl.POINTS, 0, grid.cols * grid.rows);
+			return waves.waves.length > 0;
+		},
+		destroy() {
+			gl.deleteProgram(program);
+		}
+	};
+}
+exports.createDotsWebGL = createDotsWebGL;
+
+//# sourceMappingURL=webgl.cjs.map

package/dist/styles/dots/webgl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":["GRID_VERTEX_GLSL","WAVE_GROW","GRID_UNIFORMS","resolveDotsOptions","createWaveList","createProgram","getUniforms","TAU","gridLayout","parseColor"],"sources":["../../../src/styles/dots/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { StyleRenderer } from '../../core/style';\nimport { createProgram, getUniforms } from '../../core/webgl';\nimport { createWaveList, gridLayout, MAX_WAVES, TAU } from '../../shared/grid';\nimport { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms } from '../../shared/grid-webgl';\nimport { WAVE_GROW } from './motion';\nimport { resolveDotsOptions, type DotsOptions } from './options';\n\n// Mirrors the motion model in shared/grid.ts: pointerFalloff, waveRing.\nconst VERTEX = `#version 300 es\nprecision highp float;\n\n${GRID_VERTEX_GLSL}\nuniform float uSize;          // dot radius, CSS px\nuniform vec3 uPointer;        // x, y, push distance (strength × influence)\nuniform float uPointerRadius;\nuniform vec4 uWaves[${MAX_WAVES}];  // x, y, ring radius, envelope (0 = inactive)\nuniform float uWaveStrength;\nuniform float uWaveWidth;\n\nout float vRadius;            // device px\nout float vPointSize;         // device px\n\nvoid main() {\n  vec2 ij = markCell();\n  vec2 rest = restPosition(ij);\n  vec2 p = rest + wander(ij);\n\n  vec2 d = rest - uPointer.xy;\n  float dist = length(d);\n  if (dist > 0.0 && dist < uPointerRadius) {\n    float k = 1.0 - dist / uPointerRadius;\n    p += d / dist * uPointer.z * k * k;\n  }\n\n  float grow = 0.0;\n  for (int w = 0; w < ${MAX_WAVES}; w++) {\n    vec4 wave = uWaves[w];\n    if (wave.w <= 0.0) continue;\n    vec2 dw = rest - wave.xy;\n    float dd = length(dw);\n    if (dd == 0.0) continue;\n    float x = (dd - wave.z) / uWaveWidth;\n    float ring = exp(-x * x) * wave.w;\n    p += dw / dd * uWaveStrength * ring;\n    grow += ring;\n  }\n\n  vRadius = uSize * (1.0 + ${WAVE_GROW.toFixed(3)} * grow) * uDpr;\n  vPointSize = 2.0 * vRadius + 2.0; // room for the antialiased edge\n  gl_PointSize = vPointSize;\n  gl_Position = toClip(p);\n}`;\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nuniform vec4 uColor;          // straight RGBA, opacity applied\nin float vRadius;\nin float vPointSize;\nout vec4 outColor;\n\nvoid main() {\n  float dist = length(gl_PointCoord - 0.5) * vPointSize;\n  float a = uColor.a * clamp(vRadius + 0.5 - dist, 0.0, 1.0);\n  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background\n}`;\n\nconst UNIFORMS = [\n  ...GRID_UNIFORMS, 'uSize', 'uPointer', 'uPointerRadius', 'uWaves', 'uWaveStrength', 'uWaveWidth', 'uColor',\n] as const;\n\n/** Every dot is one GL point; the vertex shader places it, so the CPU only sets uniforms. */\nexport function createDotsWebGL(gl: WebGL2RenderingContext, initial: DotsOptions): StyleRenderer<DotsOptions> {\n  let options = resolveDotsOptions(initial);\n  const waves = createWaveList();\n  const waveData = new Float32Array(MAX_WAVES * 4);\n  let clock = 0;\n\n  const program = createProgram(gl, VERTEX, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n\n  return {\n    update(next) {\n      options = resolveDotsOptions(next);\n    },\n    render(frame) {\n      if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;\n      waves.advance(frame, options.waveDuration, options.waveStrength !== 0);\n      if (!program || !uniforms) return waves.waves.length > 0; // context lost during setup\n\n      waves.pack(waveData, options.waveSpeed, options.waveDuration);\n\n      const grid = gridLayout(frame.width, frame.height, options.spacing);\n      const color = parseColor(options.color);\n\n      gl.useProgram(program);\n      setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);\n      gl.uniform1f(uniforms.uSize, options.size);\n      gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);\n      gl.uniform1f(uniforms.uPointerRadius, options.pointerRadius);\n      gl.uniform4fv(uniforms.uWaves, waveData);\n      gl.uniform1f(uniforms.uWaveStrength, options.waveStrength);\n      gl.uniform1f(uniforms.uWaveWidth, options.waveWidth);\n      gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);\n      gl.drawArrays(gl.POINTS, 0, grid.cols * grid.rows);\n      return waves.waves.length > 0;\n    },\n    destroy() {\n      gl.deleteProgram(program);\n    },\n  };\n}\n"],"mappings":";;;;;;;AASA,IAAM,SAAS;;;EAGbA,mBAAAA,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAoCUC,eAAAA,UAAU,QAAQ,CAAC,EAAE;;;;;AAMlD,IAAM,WAAW;;;;;;;;;;;;;AAcjB,IAAM,WAAW;CACf,GAAGC,mBAAAA;CAAe;CAAS;CAAY;CAAkB;CAAU;CAAiB;CAAc;AACpG;;AAGA,SAAgB,gBAAgB,IAA4B,SAAkD;CAC5G,IAAI,UAAUC,gBAAAA,mBAAmB,OAAO;CACxC,MAAM,QAAQC,aAAAA,eAAe;CAC7B,MAAM,2BAAW,IAAI,aAAA,EAA0B;CAC/C,IAAI,QAAQ;CAEZ,MAAM,UAAUC,cAAAA,cAAc,IAAI,QAAQ,QAAQ;CAClD,MAAM,WAAW,UAAUC,cAAAA,YAAY,IAAI,SAAS,QAAQ,IAAI;CAEhE,OAAO;EACL,OAAO,MAAM;GACX,UAAUH,gBAAAA,mBAAmB,IAAI;EACnC;EACA,OAAO,OAAO;GACZ,IAAI,CAAC,MAAM,eAAe,SAAS,MAAM,KAAK,QAAQ,cAAcI,aAAAA;GACpE,MAAM,QAAQ,OAAO,QAAQ,cAAc,QAAQ,iBAAiB,CAAC;GACrE,IAAI,CAAC,WAAW,CAAC,UAAU,OAAO,MAAM,MAAM,SAAS;GAEvD,MAAM,KAAK,UAAU,QAAQ,WAAW,QAAQ,YAAY;GAE5D,MAAM,OAAOC,aAAAA,WAAW,MAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO;GAClE,MAAM,QAAQC,cAAAA,WAAW,QAAQ,KAAK;GAEtC,GAAG,WAAW,OAAO;GACrB,mBAAA,gBAAgB,IAAI,UAAU,MAAM,OAAO,QAAQ,SAAS,OAAO,QAAQ,MAAM;GACjF,GAAG,UAAU,SAAS,OAAO,QAAQ,IAAI;GACzC,GAAG,UAAU,SAAS,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,QAAQ,kBAAkB,MAAM,QAAQ,SAAS;GACnH,GAAG,UAAU,SAAS,gBAAgB,QAAQ,aAAa;GAC3D,GAAG,WAAW,SAAS,QAAQ,QAAQ;GACvC,GAAG,UAAU,SAAS,eAAe,QAAQ,YAAY;GACzD,GAAG,UAAU,SAAS,YAAY,QAAQ,SAAS;GACnD,GAAG,UAAU,SAAS,QAAQ,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,KAAK,QAAQ,OAAO;GACtF,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK,OAAO,KAAK,IAAI;GACjD,OAAO,MAAM,MAAM,SAAS;EAC9B;EACA,UAAU;GACR,GAAG,cAAc,OAAO;EAC1B;CACF;AACF"}

package/dist/styles/dots/webgl.d.cts

@@ -0,0 +1,4 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type DotsOptions } from './options.cjs';
+/** Every dot is one GL point; the vertex shader places it, so the CPU only sets uniforms. */
+export declare function createDotsWebGL(gl: WebGL2RenderingContext, initial: DotsOptions): StyleRenderer<DotsOptions>;

package/dist/styles/dots/webgl.d.ts

@@ -0,0 +1,4 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type DotsOptions } from './options.js';
+/** Every dot is one GL point; the vertex shader places it, so the CPU only sets uniforms. */
+export declare function createDotsWebGL(gl: WebGL2RenderingContext, initial: DotsOptions): StyleRenderer<DotsOptions>;

package/dist/styles/dots/webgl.js

@@ -0,0 +1,113 @@
+import { parseColor } from "../../core/color.js";
+import { createProgram, getUniforms } from "../../core/webgl.js";
+import { TAU, createWaveList, gridLayout } from "../../shared/grid.js";
+import { WAVE_GROW } from "./motion.js";
+import { resolveDotsOptions } from "./options.js";
+import { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms } from "../../shared/grid-webgl.js";
+// src/styles/dots/webgl.ts
+var VERTEX = `#version 300 es
+precision highp float;
+
+${GRID_VERTEX_GLSL}
+uniform float uSize;          // dot radius, CSS px
+uniform vec3 uPointer;        // x, y, push distance (strength × influence)
+uniform float uPointerRadius;
+uniform vec4 uWaves[8];  // x, y, ring radius, envelope (0 = inactive)
+uniform float uWaveStrength;
+uniform float uWaveWidth;
+
+out float vRadius;            // device px
+out float vPointSize;         // device px
+
+void main() {
+  vec2 ij = markCell();
+  vec2 rest = restPosition(ij);
+  vec2 p = rest + wander(ij);
+
+  vec2 d = rest - uPointer.xy;
+  float dist = length(d);
+  if (dist > 0.0 && dist < uPointerRadius) {
+    float k = 1.0 - dist / uPointerRadius;
+    p += d / dist * uPointer.z * k * k;
+  }
+
+  float grow = 0.0;
+  for (int w = 0; w < 8; w++) {
+    vec4 wave = uWaves[w];
+    if (wave.w <= 0.0) continue;
+    vec2 dw = rest - wave.xy;
+    float dd = length(dw);
+    if (dd == 0.0) continue;
+    float x = (dd - wave.z) / uWaveWidth;
+    float ring = exp(-x * x) * wave.w;
+    p += dw / dd * uWaveStrength * ring;
+    grow += ring;
+  }
+
+  vRadius = uSize * (1.0 + ${WAVE_GROW.toFixed(3)} * grow) * uDpr;
+  vPointSize = 2.0 * vRadius + 2.0; // room for the antialiased edge
+  gl_PointSize = vPointSize;
+  gl_Position = toClip(p);
+}`;
+var FRAGMENT = `#version 300 es
+precision highp float;
+
+uniform vec4 uColor;          // straight RGBA, opacity applied
+in float vRadius;
+in float vPointSize;
+out vec4 outColor;
+
+void main() {
+  float dist = length(gl_PointCoord - 0.5) * vPointSize;
+  float a = uColor.a * clamp(vRadius + 0.5 - dist, 0.0, 1.0);
+  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background
+}`;
+var UNIFORMS = [
+	...GRID_UNIFORMS,
+	"uSize",
+	"uPointer",
+	"uPointerRadius",
+	"uWaves",
+	"uWaveStrength",
+	"uWaveWidth",
+	"uColor"
+];
+/** Every dot is one GL point; the vertex shader places it, so the CPU only sets uniforms. */
+function createDotsWebGL(gl, initial) {
+	let options = resolveDotsOptions(initial);
+	const waves = createWaveList();
+	const waveData = /* @__PURE__ */ new Float32Array(32);
+	let clock = 0;
+	const program = createProgram(gl, VERTEX, FRAGMENT);
+	const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;
+	return {
+		update(next) {
+			options = resolveDotsOptions(next);
+		},
+		render(frame) {
+			if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;
+			waves.advance(frame, options.waveDuration, options.waveStrength !== 0);
+			if (!program || !uniforms) return waves.waves.length > 0;
+			waves.pack(waveData, options.waveSpeed, options.waveDuration);
+			const grid = gridLayout(frame.width, frame.height, options.spacing);
+			const color = parseColor(options.color);
+			gl.useProgram(program);
+			setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);
+			gl.uniform1f(uniforms.uSize, options.size);
+			gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);
+			gl.uniform1f(uniforms.uPointerRadius, options.pointerRadius);
+			gl.uniform4fv(uniforms.uWaves, waveData);
+			gl.uniform1f(uniforms.uWaveStrength, options.waveStrength);
+			gl.uniform1f(uniforms.uWaveWidth, options.waveWidth);
+			gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);
+			gl.drawArrays(gl.POINTS, 0, grid.cols * grid.rows);
+			return waves.waves.length > 0;
+		},
+		destroy() {
+			gl.deleteProgram(program);
+		}
+	};
+}
+export { createDotsWebGL };
+
+//# sourceMappingURL=webgl.js.map

package/dist/styles/dots/webgl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.js","names":[],"sources":["../../../src/styles/dots/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { StyleRenderer } from '../../core/style';\nimport { createProgram, getUniforms } from '../../core/webgl';\nimport { createWaveList, gridLayout, MAX_WAVES, TAU } from '../../shared/grid';\nimport { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms } from '../../shared/grid-webgl';\nimport { WAVE_GROW } from './motion';\nimport { resolveDotsOptions, type DotsOptions } from './options';\n\n// Mirrors the motion model in shared/grid.ts: pointerFalloff, waveRing.\nconst VERTEX = `#version 300 es\nprecision highp float;\n\n${GRID_VERTEX_GLSL}\nuniform float uSize;          // dot radius, CSS px\nuniform vec3 uPointer;        // x, y, push distance (strength × influence)\nuniform float uPointerRadius;\nuniform vec4 uWaves[${MAX_WAVES}];  // x, y, ring radius, envelope (0 = inactive)\nuniform float uWaveStrength;\nuniform float uWaveWidth;\n\nout float vRadius;            // device px\nout float vPointSize;         // device px\n\nvoid main() {\n  vec2 ij = markCell();\n  vec2 rest = restPosition(ij);\n  vec2 p = rest + wander(ij);\n\n  vec2 d = rest - uPointer.xy;\n  float dist = length(d);\n  if (dist > 0.0 && dist < uPointerRadius) {\n    float k = 1.0 - dist / uPointerRadius;\n    p += d / dist * uPointer.z * k * k;\n  }\n\n  float grow = 0.0;\n  for (int w = 0; w < ${MAX_WAVES}; w++) {\n    vec4 wave = uWaves[w];\n    if (wave.w <= 0.0) continue;\n    vec2 dw = rest - wave.xy;\n    float dd = length(dw);\n    if (dd == 0.0) continue;\n    float x = (dd - wave.z) / uWaveWidth;\n    float ring = exp(-x * x) * wave.w;\n    p += dw / dd * uWaveStrength * ring;\n    grow += ring;\n  }\n\n  vRadius = uSize * (1.0 + ${WAVE_GROW.toFixed(3)} * grow) * uDpr;\n  vPointSize = 2.0 * vRadius + 2.0; // room for the antialiased edge\n  gl_PointSize = vPointSize;\n  gl_Position = toClip(p);\n}`;\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nuniform vec4 uColor;          // straight RGBA, opacity applied\nin float vRadius;\nin float vPointSize;\nout vec4 outColor;\n\nvoid main() {\n  float dist = length(gl_PointCoord - 0.5) * vPointSize;\n  float a = uColor.a * clamp(vRadius + 0.5 - dist, 0.0, 1.0);\n  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background\n}`;\n\nconst UNIFORMS = [\n  ...GRID_UNIFORMS, 'uSize', 'uPointer', 'uPointerRadius', 'uWaves', 'uWaveStrength', 'uWaveWidth', 'uColor',\n] as const;\n\n/** Every dot is one GL point; the vertex shader places it, so the CPU only sets uniforms. */\nexport function createDotsWebGL(gl: WebGL2RenderingContext, initial: DotsOptions): StyleRenderer<DotsOptions> {\n  let options = resolveDotsOptions(initial);\n  const waves = createWaveList();\n  const waveData = new Float32Array(MAX_WAVES * 4);\n  let clock = 0;\n\n  const program = createProgram(gl, VERTEX, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n\n  return {\n    update(next) {\n      options = resolveDotsOptions(next);\n    },\n    render(frame) {\n      if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;\n      waves.advance(frame, options.waveDuration, options.waveStrength !== 0);\n      if (!program || !uniforms) return waves.waves.length > 0; // context lost during setup\n\n      waves.pack(waveData, options.waveSpeed, options.waveDuration);\n\n      const grid = gridLayout(frame.width, frame.height, options.spacing);\n      const color = parseColor(options.color);\n\n      gl.useProgram(program);\n      setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);\n      gl.uniform1f(uniforms.uSize, options.size);\n      gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);\n      gl.uniform1f(uniforms.uPointerRadius, options.pointerRadius);\n      gl.uniform4fv(uniforms.uWaves, waveData);\n      gl.uniform1f(uniforms.uWaveStrength, options.waveStrength);\n      gl.uniform1f(uniforms.uWaveWidth, options.waveWidth);\n      gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);\n      gl.drawArrays(gl.POINTS, 0, grid.cols * grid.rows);\n      return waves.waves.length > 0;\n    },\n    destroy() {\n      gl.deleteProgram(program);\n    },\n  };\n}\n"],"mappings":";;;;;;;AASA,IAAM,SAAS;;;EAGb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAoCU,UAAU,QAAQ,CAAC,EAAE;;;;;AAMlD,IAAM,WAAW;;;;;;;;;;;;;AAcjB,IAAM,WAAW;CACf,GAAG;CAAe;CAAS;CAAY;CAAkB;CAAU;CAAiB;CAAc;AACpG;;AAGA,SAAgB,gBAAgB,IAA4B,SAAkD;CAC5G,IAAI,UAAU,mBAAmB,OAAO;CACxC,MAAM,QAAQ,eAAe;CAC7B,MAAM,2BAAW,IAAI,aAAA,EAA0B;CAC/C,IAAI,QAAQ;CAEZ,MAAM,UAAU,cAAc,IAAI,QAAQ,QAAQ;CAClD,MAAM,WAAW,UAAU,YAAY,IAAI,SAAS,QAAQ,IAAI;CAEhE,OAAO;EACL,OAAO,MAAM;GACX,UAAU,mBAAmB,IAAI;EACnC;EACA,OAAO,OAAO;GACZ,IAAI,CAAC,MAAM,eAAe,SAAS,MAAM,KAAK,QAAQ,cAAc;GACpE,MAAM,QAAQ,OAAO,QAAQ,cAAc,QAAQ,iBAAiB,CAAC;GACrE,IAAI,CAAC,WAAW,CAAC,UAAU,OAAO,MAAM,MAAM,SAAS;GAEvD,MAAM,KAAK,UAAU,QAAQ,WAAW,QAAQ,YAAY;GAE5D,MAAM,OAAO,WAAW,MAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO;GAClE,MAAM,QAAQ,WAAW,QAAQ,KAAK;GAEtC,GAAG,WAAW,OAAO;GACrB,gBAAgB,IAAI,UAAU,MAAM,OAAO,QAAQ,SAAS,OAAO,QAAQ,MAAM;GACjF,GAAG,UAAU,SAAS,OAAO,QAAQ,IAAI;GACzC,GAAG,UAAU,SAAS,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,QAAQ,kBAAkB,MAAM,QAAQ,SAAS;GACnH,GAAG,UAAU,SAAS,gBAAgB,QAAQ,aAAa;GAC3D,GAAG,WAAW,SAAS,QAAQ,QAAQ;GACvC,GAAG,UAAU,SAAS,eAAe,QAAQ,YAAY;GACzD,GAAG,UAAU,SAAS,YAAY,QAAQ,SAAS;GACnD,GAAG,UAAU,SAAS,QAAQ,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,KAAK,QAAQ,OAAO;GACtF,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK,OAAO,KAAK,IAAI;GACjD,OAAO,MAAM,MAAM,SAAS;EAC9B;EACA,UAAU;GACR,GAAG,cAAc,OAAO;EAC1B;CACF;AACF"}

package/dist/styles/plus/canvas2d.cjs

@@ -0,0 +1,88 @@
+const require_buffer = require("../../shared/buffer.cjs");
+const require_grid = require("../../shared/grid.cjs");
+const require_options = require("./options.cjs");
+const require_turns = require("./turns.cjs");
+// src/styles/plus/canvas2d.ts
+/** Signs made heavier by waves are drawn in this many weight steps per unit of ring height. */
+var WEIGHT_STEPS = 8;
+/** Ring heights beyond this are clamped (two overlapping wave crests). */
+var MAX_WEIGHT_STEP = 16;
+/**
+* Every sign's position computed on the CPU, with angles and weights from
+* SignTurns. All signs of one weight are a single path of round-capped lines,
+* stroked once.
+*/
+function createPlusCanvas2D(ctx, initial) {
+	let options = require_options.resolvePlusOptions(initial);
+	const waves = require_grid.createWaveList();
+	const phasesFor = require_grid.createPhaseCache();
+	const turns = require_turns.createSignTurns();
+	let clock = 0;
+	const weights = Array.from({ length: 17 }, () => require_buffer.createFloatBuffer(512));
+	function add(buffer, x, y, dx, dy) {
+		const data = require_buffer.reserve(buffer, 4);
+		data[buffer.length++] = x;
+		data[buffer.length++] = y;
+		data[buffer.length++] = dx;
+		data[buffer.length++] = dy;
+	}
+	function stroke(buffer, weight) {
+		const { data, length } = buffer;
+		ctx.lineWidth = weight;
+		ctx.beginPath();
+		for (let k = 0; k < length; k += 4) {
+			const x = data[k];
+			const y = data[k + 1];
+			const dx = data[k + 2];
+			const dy = data[k + 3];
+			ctx.moveTo(x - dx, y - dy);
+			ctx.lineTo(x + dx, y + dy);
+			ctx.moveTo(x + dy, y - dx);
+			ctx.lineTo(x - dy, y + dx);
+		}
+		ctx.stroke();
+	}
+	return {
+		update(next) {
+			options = require_options.resolvePlusOptions(next);
+		},
+		render(frame) {
+			if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * require_grid.TAU;
+			waves.advance(frame, options.waveDuration, require_options.wavesEnabled(options));
+			const { spacing, size, jitter } = options;
+			const grid = require_grid.gridLayout(frame.width, frame.height, spacing);
+			const { cols, rows, originX, originY } = grid;
+			const wander = phasesFor(cols, rows);
+			const { sx, cx, sy, cy } = require_grid.wanderClock(clock);
+			turns.update(frame, options, grid, waves.waves);
+			const turn = turns.data;
+			for (const buffer of weights) buffer.length = 0;
+			for (let j = 0; j < rows; j++) {
+				const restY = originY + j * spacing;
+				for (let i = 0; i < cols; i++) {
+					const k = j * cols + i;
+					const w = k * 4;
+					const x = originX + i * spacing + jitter * (sx * wander[w] + cx * wander[w + 1]);
+					const y = restY + jitter * (cy * wander[w + 2] - sy * wander[w + 3]);
+					const angle = turn[k * 2];
+					const step = Math.min(MAX_WEIGHT_STEP, Math.round(turn[k * 2 + 1] * WEIGHT_STEPS));
+					if (angle === 0) add(weights[step], x, y, size, 0);
+					else {
+						const a2 = angle * angle;
+						const cos = 1 - a2 * (.5 - a2 * (1 / 24 - a2 * (1 / 720 - a2 / 40320)));
+						const sin = angle * (1 - a2 * (1 / 6 - a2 * (1 / 120 - a2 / 5040)));
+						add(weights[step], x, y, size * cos, size * sin);
+					}
+				}
+			}
+			ctx.globalAlpha = options.opacity;
+			ctx.strokeStyle = options.color;
+			ctx.lineCap = "round";
+			for (let step = 0; step <= MAX_WEIGHT_STEP; step++) if (weights[step].length > 0) stroke(weights[step], options.weight * (1 + options.waveWeight * step / WEIGHT_STEPS));
+			return waves.waves.length > 0 || turns.settling;
+		}
+	};
+}
+exports.createPlusCanvas2D = createPlusCanvas2D;
+
+//# sourceMappingURL=canvas2d.cjs.map

package/dist/styles/plus/canvas2d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.cjs","names":["resolvePlusOptions","createWaveList","createPhaseCache","createSignTurns","createFloatBuffer","reserve","TAU","wavesEnabled","gridLayout","wanderClock"],"sources":["../../../src/styles/plus/canvas2d.ts"],"sourcesContent":["import type { StyleRenderer } from '../../core/style';\nimport { createFloatBuffer, reserve, type FloatBuffer } from '../../shared/buffer';\nimport { createPhaseCache, createWaveList, gridLayout, TAU, wanderClock } from '../../shared/grid';\nimport { resolvePlusOptions, wavesEnabled, type PlusOptions } from './options';\nimport { createSignTurns } from './turns';\n\n/** Signs made heavier by waves are drawn in this many weight steps per unit of ring height. */\nconst WEIGHT_STEPS = 8;\n/** Ring heights beyond this are clamped (two overlapping wave crests). */\nconst MAX_WEIGHT_STEP = 2 * WEIGHT_STEPS;\n\n/**\n * Every sign's position computed on the CPU, with angles and weights from\n * SignTurns. All signs of one weight are a single path of round-capped lines,\n * stroked once.\n */\nexport function createPlusCanvas2D(ctx: CanvasRenderingContext2D, initial: PlusOptions): StyleRenderer<PlusOptions> {\n  let options = resolvePlusOptions(initial);\n  const waves = createWaveList();\n  const phasesFor = createPhaseCache();\n  const turns = createSignTurns();\n  let clock = 0;\n\n  // Signs as x, y, arm vector (dx, dy), one buffer per weight step; signs outside a wave all land in step 0.\n  const weights = Array.from({ length: MAX_WEIGHT_STEP + 1 }, () => createFloatBuffer(512));\n\n  function add(buffer: FloatBuffer, x: number, y: number, dx: number, dy: number): void {\n    const data = reserve(buffer, 4);\n    data[buffer.length++] = x;\n    data[buffer.length++] = y;\n    data[buffer.length++] = dx;\n    data[buffer.length++] = dy;\n  }\n\n  function stroke(buffer: FloatBuffer, weight: number): void {\n    const { data, length } = buffer;\n    ctx.lineWidth = weight;\n    ctx.beginPath();\n    for (let k = 0; k < length; k += 4) {\n      const x = data[k];\n      const y = data[k + 1];\n      const dx = data[k + 2];\n      const dy = data[k + 3];\n      // Two arms: along (dx, dy) and along its perpendicular (-dy, dx).\n      ctx.moveTo(x - dx, y - dy);\n      ctx.lineTo(x + dx, y + dy);\n      ctx.moveTo(x + dy, y - dx);\n      ctx.lineTo(x - dy, y + dx);\n    }\n    ctx.stroke();\n  }\n\n  return {\n    update(next) {\n      options = resolvePlusOptions(next);\n    },\n    render(frame) {\n      if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;\n      waves.advance(frame, options.waveDuration, wavesEnabled(options));\n\n      const { spacing, size, jitter } = options;\n      const grid = gridLayout(frame.width, frame.height, spacing);\n      const { cols, rows, originX, originY } = grid;\n      const wander = phasesFor(cols, rows);\n      const { sx, cx, sy, cy } = wanderClock(clock);\n      turns.update(frame, options, grid, waves.waves);\n      const turn = turns.data;\n      for (const buffer of weights) buffer.length = 0;\n\n      for (let j = 0; j < rows; j++) {\n        const restY = originY + j * spacing;\n        for (let i = 0; i < cols; i++) {\n          const k = j * cols + i;\n          const w = k * 4;\n          const x = originX + i * spacing + jitter * (sx * wander[w] + cx * wander[w + 1]);\n          const y = restY + jitter * (cy * wander[w + 2] - sy * wander[w + 3]);\n          const angle = turn[k * 2];\n          const step = Math.min(MAX_WEIGHT_STEP, Math.round(turn[k * 2 + 1] * WEIGHT_STEPS));\n          if (angle === 0) {\n            add(weights[step], x, y, size, 0);\n          } else {\n            // Angles stay within ±45°, where these short series are exact to ~1e-6.\n            const a2 = angle * angle;\n            const cos = 1 - a2 * (0.5 - a2 * (1 / 24 - a2 * (1 / 720 - a2 / 40320)));\n            const sin = angle * (1 - a2 * (1 / 6 - a2 * (1 / 120 - a2 / 5040)));\n            add(weights[step], x, y, size * cos, size * sin);\n          }\n        }\n      }\n\n      ctx.globalAlpha = options.opacity;\n      ctx.strokeStyle = options.color;\n      ctx.lineCap = 'round';\n      for (let step = 0; step <= MAX_WEIGHT_STEP; step++) {\n        if (weights[step].length > 0) {\n          stroke(weights[step], options.weight * (1 + (options.waveWeight * step) / WEIGHT_STEPS));\n        }\n      }\n      return waves.waves.length > 0 || turns.settling;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/styles/plus/canvas2d.d.cts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type PlusOptions } from './options.cjs';
+/**
+ * Every sign's position computed on the CPU, with angles and weights from
+ * SignTurns. All signs of one weight are a single path of round-capped lines,
+ * stroked once.
+ */
+export declare function createPlusCanvas2D(ctx: CanvasRenderingContext2D, initial: PlusOptions): StyleRenderer<PlusOptions>;

package/dist/styles/plus/canvas2d.d.ts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type PlusOptions } from './options.js';
+/**
+ * Every sign's position computed on the CPU, with angles and weights from
+ * SignTurns. All signs of one weight are a single path of round-capped lines,
+ * stroked once.
+ */
+export declare function createPlusCanvas2D(ctx: CanvasRenderingContext2D, initial: PlusOptions): StyleRenderer<PlusOptions>;