interactive-bg 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,52 @@
+export interface TopoOptions {
+    /** Stroke colour of regular contour lines. Any CSS colour. */
+    lineColor: string;
+    /** Stroke colour of every `majorEvery`-th ("index") line. Defaults to `lineColor`. */
+    majorLineColor?: string;
+    /** Opacity of all lines, from `0` (invisible) to `1` (opaque). Multiplies any alpha in the colours. */
+    lineOpacity: number;
+    /** Width of regular lines, in CSS pixels. */
+    lineWidth: number;
+    /** Width of index lines, in CSS pixels. */
+    majorLineWidth: number;
+    /** Every n-th contour is drawn as an index line. `0` disables index lines. */
+    majorEvery: number;
+    /** Number of contour levels across the full elevation range. More = denser lines. */
+    levels: number;
+    /** Noise frequency per CSS pixel. Smaller = larger, smoother landforms. */
+    scale: number;
+    /** Noise octaves. More = more detailed, rougher terrain (and more CPU). */
+    octaves: number;
+    /** How fast the terrain morphs, in noise units per second. `0` = static. */
+    speed: number;
+    /** Size of a sampling cell in CSS pixels. Smaller = smoother lines, more CPU. */
+    resolution: number;
+    /** Seed for the terrain. Same seed, same landscape. Pass a random number for a different one on every load. */
+    seed: number;
+    /** Radius of the pointer's influence, in CSS pixels. */
+    pointerRadius: number;
+    /** Height of the bump under the pointer. Negative values dig a crater. */
+    pointerStrength: number;
+}
+export declare const topoDefaults: Readonly<TopoOptions>;
+/** Options after clamping and deriving: what the field and the renderers consume. */
+export interface ResolvedTopoOptions {
+    lineColor: string;
+    majorLineColor: string;
+    lineOpacity: number;
+    lineWidth: number;
+    majorLineWidth: number;
+    /** Integer; `0` = no index lines. */
+    majorEvery: number;
+    /** Height difference between neighbouring contour levels. */
+    levelStep: number;
+    /** Grid spacing of the height field, in CSS pixels. */
+    cellSize: number;
+    octaves: number;
+    scale: number;
+    speed: number;
+    seed: number;
+    pointerRadius: number;
+    pointerStrength: number;
+}
+export declare function resolveTopoOptions(options: TopoOptions): ResolvedTopoOptions;

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

@@ -0,0 +1,52 @@
+export interface TopoOptions {
+    /** Stroke colour of regular contour lines. Any CSS colour. */
+    lineColor: string;
+    /** Stroke colour of every `majorEvery`-th ("index") line. Defaults to `lineColor`. */
+    majorLineColor?: string;
+    /** Opacity of all lines, from `0` (invisible) to `1` (opaque). Multiplies any alpha in the colours. */
+    lineOpacity: number;
+    /** Width of regular lines, in CSS pixels. */
+    lineWidth: number;
+    /** Width of index lines, in CSS pixels. */
+    majorLineWidth: number;
+    /** Every n-th contour is drawn as an index line. `0` disables index lines. */
+    majorEvery: number;
+    /** Number of contour levels across the full elevation range. More = denser lines. */
+    levels: number;
+    /** Noise frequency per CSS pixel. Smaller = larger, smoother landforms. */
+    scale: number;
+    /** Noise octaves. More = more detailed, rougher terrain (and more CPU). */
+    octaves: number;
+    /** How fast the terrain morphs, in noise units per second. `0` = static. */
+    speed: number;
+    /** Size of a sampling cell in CSS pixels. Smaller = smoother lines, more CPU. */
+    resolution: number;
+    /** Seed for the terrain. Same seed, same landscape. Pass a random number for a different one on every load. */
+    seed: number;
+    /** Radius of the pointer's influence, in CSS pixels. */
+    pointerRadius: number;
+    /** Height of the bump under the pointer. Negative values dig a crater. */
+    pointerStrength: number;
+}
+export declare const topoDefaults: Readonly<TopoOptions>;
+/** Options after clamping and deriving: what the field and the renderers consume. */
+export interface ResolvedTopoOptions {
+    lineColor: string;
+    majorLineColor: string;
+    lineOpacity: number;
+    lineWidth: number;
+    majorLineWidth: number;
+    /** Integer; `0` = no index lines. */
+    majorEvery: number;
+    /** Height difference between neighbouring contour levels. */
+    levelStep: number;
+    /** Grid spacing of the height field, in CSS pixels. */
+    cellSize: number;
+    octaves: number;
+    scale: number;
+    speed: number;
+    seed: number;
+    pointerRadius: number;
+    pointerStrength: number;
+}
+export declare function resolveTopoOptions(options: TopoOptions): ResolvedTopoOptions;

package/dist/styles/topo/options.js

@@ -0,0 +1,38 @@
+// src/styles/topo/options.ts
+var topoDefaults = Object.freeze({
+	lineColor: "#5b6576",
+	majorLineColor: "#7dd3a8",
+	lineOpacity: .5,
+	lineWidth: 1,
+	majorLineWidth: 1.75,
+	majorEvery: 5,
+	levels: 12,
+	scale: .0025,
+	octaves: 2,
+	speed: .025,
+	resolution: 6,
+	seed: 1332056948,
+	pointerRadius: 100,
+	pointerStrength: .35
+});
+function resolveTopoOptions(options) {
+	return {
+		lineColor: options.lineColor,
+		majorLineColor: options.majorLineColor ?? options.lineColor,
+		lineOpacity: Math.min(1, Math.max(0, options.lineOpacity)),
+		lineWidth: Math.max(.1, options.lineWidth),
+		majorLineWidth: Math.max(.1, options.majorLineWidth),
+		majorEvery: Math.max(0, Math.round(options.majorEvery)),
+		levelStep: 2 / Math.max(1, options.levels),
+		cellSize: Math.max(2, options.resolution),
+		octaves: Math.max(1, Math.round(options.octaves)),
+		scale: options.scale,
+		speed: Math.abs(options.speed),
+		seed: options.seed,
+		pointerRadius: Math.max(1, options.pointerRadius),
+		pointerStrength: options.pointerStrength
+	};
+}
+export { resolveTopoOptions, topoDefaults };
+
+//# sourceMappingURL=options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":[],"sources":["../../../src/styles/topo/options.ts"],"sourcesContent":["export interface TopoOptions {\n  /** Stroke colour of regular contour lines. Any CSS colour. */\n  lineColor: string;\n  /** Stroke colour of every `majorEvery`-th (\"index\") line. Defaults to `lineColor`. */\n  majorLineColor?: string;\n  /** Opacity of all lines, from `0` (invisible) to `1` (opaque). Multiplies any alpha in the colours. */\n  lineOpacity: number;\n  /** Width of regular lines, in CSS pixels. */\n  lineWidth: number;\n  /** Width of index lines, in CSS pixels. */\n  majorLineWidth: number;\n  /** Every n-th contour is drawn as an index line. `0` disables index lines. */\n  majorEvery: number;\n  /** Number of contour levels across the full elevation range. More = denser lines. */\n  levels: number;\n  /** Noise frequency per CSS pixel. Smaller = larger, smoother landforms. */\n  scale: number;\n  /** Noise octaves. More = more detailed, rougher terrain (and more CPU). */\n  octaves: number;\n  /** How fast the terrain morphs, in noise units per second. `0` = static. */\n  speed: number;\n  /** Size of a sampling cell in CSS pixels. Smaller = smoother lines, more CPU. */\n  resolution: number;\n  /** Seed for the terrain. Same seed, same landscape. Pass a random number for a different one on every load. */\n  seed: number;\n  /** Radius of the pointer's influence, in CSS pixels. */\n  pointerRadius: number;\n  /** Height of the bump under the pointer. Negative values dig a crater. */\n  pointerStrength: number;\n}\n\nexport const topoDefaults: Readonly<TopoOptions> = Object.freeze({\n  lineColor: '#5b6576',\n  majorLineColor: '#7dd3a8',\n  lineOpacity: 0.5,\n  lineWidth: 1,\n  majorLineWidth: 1.75,\n  majorEvery: 5,\n  levels: 12,\n  scale: 0.0025,\n  octaves: 2,\n  speed: 0.025,\n  resolution: 6,\n  seed: 1332056948,\n  pointerRadius: 100,\n  pointerStrength: 0.35,\n});\n\n/** Options after clamping and deriving: what the field and the renderers consume. */\nexport interface ResolvedTopoOptions {\n  lineColor: string;\n  majorLineColor: string;\n  lineOpacity: number;\n  lineWidth: number;\n  majorLineWidth: number;\n  /** Integer; `0` = no index lines. */\n  majorEvery: number;\n  /** Height difference between neighbouring contour levels. */\n  levelStep: number;\n  /** Grid spacing of the height field, in CSS pixels. */\n  cellSize: number;\n  octaves: number;\n  scale: number;\n  speed: number;\n  seed: number;\n  pointerRadius: number;\n  pointerStrength: number;\n}\n\nexport function resolveTopoOptions(options: TopoOptions): ResolvedTopoOptions {\n  return {\n    lineColor: options.lineColor,\n    majorLineColor: options.majorLineColor ?? options.lineColor,\n    lineOpacity: Math.min(1, Math.max(0, options.lineOpacity)),\n    lineWidth: Math.max(0.1, options.lineWidth),\n    majorLineWidth: Math.max(0.1, options.majorLineWidth),\n    majorEvery: Math.max(0, Math.round(options.majorEvery)),\n    // The height field spans roughly [-1, 1], so the levels cover a range of 2.\n    levelStep: 2 / Math.max(1, options.levels),\n    cellSize: Math.max(2, options.resolution),\n    octaves: Math.max(1, Math.round(options.octaves)),\n    scale: options.scale,\n    // The keyframes only step forwards in time; morphing backwards looks the same, so use the magnitude.\n    speed: Math.abs(options.speed),\n    seed: options.seed,\n    pointerRadius: Math.max(1, options.pointerRadius),\n    pointerStrength: options.pointerStrength,\n  };\n}\n"],"mappings":";AA+BA,IAAa,eAAsC,OAAO,OAAO;CAC/D,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,WAAW;CACX,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,SAAS;CACT,OAAO;CACP,YAAY;CACZ,MAAM;CACN,eAAe;CACf,iBAAiB;AACnB,CAAC;AAuBD,SAAgB,mBAAmB,SAA2C;CAC5E,OAAO;EACL,WAAW,QAAQ;EACnB,gBAAgB,QAAQ,kBAAkB,QAAQ;EAClD,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,WAAW,CAAC;EACzD,WAAW,KAAK,IAAI,IAAK,QAAQ,SAAS;EAC1C,gBAAgB,KAAK,IAAI,IAAK,QAAQ,cAAc;EACpD,YAAY,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,UAAU,CAAC;EAEtD,WAAW,IAAI,KAAK,IAAI,GAAG,QAAQ,MAAM;EACzC,UAAU,KAAK,IAAI,GAAG,QAAQ,UAAU;EACxC,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,OAAO,CAAC;EAChD,OAAO,QAAQ;EAEf,OAAO,KAAK,IAAI,QAAQ,KAAK;EAC7B,MAAM,QAAQ;EACd,eAAe,KAAK,IAAI,GAAG,QAAQ,aAAa;EAChD,iBAAiB,QAAQ;CAC3B;AACF"}

package/dist/styles/topo/terrain.cjs

@@ -0,0 +1,22 @@
+const require_field = require("./field.cjs");
+// src/styles/topo/terrain.ts
+function createTerrain(initial) {
+	const field = require_field.createKeyframeField(initial);
+	let speed = initial.speed;
+	let time = 0;
+	return {
+		field,
+		configure(options) {
+			field.configure(options);
+			speed = options.speed;
+		},
+		advance(frame) {
+			field.resize(frame.width, frame.height);
+			if (!frame.reducedMotion) time += frame.dt * speed;
+			return field.advance(time);
+		}
+	};
+}
+exports.createTerrain = createTerrain;
+
+//# sourceMappingURL=terrain.cjs.map

package/dist/styles/topo/terrain.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"terrain.cjs","names":["createKeyframeField"],"sources":["../../../src/styles/topo/terrain.ts"],"sourcesContent":["import type { Frame } from '../../core/style';\nimport { createKeyframeField, type KeyframeField } from './field';\nimport type { ResolvedTopoOptions } from './options';\n\n/** The animated height field both topo renderers draw: keyframes plus the clock that drives them. */\nexport interface Terrain {\n  readonly field: KeyframeField;\n  configure(options: ResolvedTopoOptions): void;\n  /** Move the terrain forward by one frame and return the blend factor between the keyframes. */\n  advance(frame: Frame): number;\n}\n\nexport function createTerrain(initial: ResolvedTopoOptions): Terrain {\n  const field = createKeyframeField(initial);\n  let speed = initial.speed;\n  let time = 0;\n  return {\n    field,\n    configure(options) {\n      field.configure(options);\n      speed = options.speed;\n    },\n    advance(frame) {\n      field.resize(frame.width, frame.height);\n      if (!frame.reducedMotion) time += frame.dt * speed;\n      return field.advance(time);\n    },\n  };\n}\n"],"mappings":";;AAYA,SAAgB,cAAc,SAAuC;CACnE,MAAM,QAAQA,cAAAA,oBAAoB,OAAO;CACzC,IAAI,QAAQ,QAAQ;CACpB,IAAI,OAAO;CACX,OAAO;EACL;EACA,UAAU,SAAS;GACjB,MAAM,UAAU,OAAO;GACvB,QAAQ,QAAQ;EAClB;EACA,QAAQ,OAAO;GACb,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM;GACtC,IAAI,CAAC,MAAM,eAAe,QAAQ,MAAM,KAAK;GAC7C,OAAO,MAAM,QAAQ,IAAI;EAC3B;CACF;AACF"}

package/dist/styles/topo/terrain.d.cts

@@ -0,0 +1,11 @@
+import type { Frame } from '../../core/style.cjs';
+import { type KeyframeField } from './field.cjs';
+import type { ResolvedTopoOptions } from './options.cjs';
+/** The animated height field both topo renderers draw: keyframes plus the clock that drives them. */
+export interface Terrain {
+    readonly field: KeyframeField;
+    configure(options: ResolvedTopoOptions): void;
+    /** Move the terrain forward by one frame and return the blend factor between the keyframes. */
+    advance(frame: Frame): number;
+}
+export declare function createTerrain(initial: ResolvedTopoOptions): Terrain;

package/dist/styles/topo/terrain.d.ts

@@ -0,0 +1,11 @@
+import type { Frame } from '../../core/style.js';
+import { type KeyframeField } from './field.js';
+import type { ResolvedTopoOptions } from './options.js';
+/** The animated height field both topo renderers draw: keyframes plus the clock that drives them. */
+export interface Terrain {
+    readonly field: KeyframeField;
+    configure(options: ResolvedTopoOptions): void;
+    /** Move the terrain forward by one frame and return the blend factor between the keyframes. */
+    advance(frame: Frame): number;
+}
+export declare function createTerrain(initial: ResolvedTopoOptions): Terrain;

package/dist/styles/topo/terrain.js

@@ -0,0 +1,22 @@
+import { createKeyframeField } from "./field.js";
+// src/styles/topo/terrain.ts
+function createTerrain(initial) {
+	const field = createKeyframeField(initial);
+	let speed = initial.speed;
+	let time = 0;
+	return {
+		field,
+		configure(options) {
+			field.configure(options);
+			speed = options.speed;
+		},
+		advance(frame) {
+			field.resize(frame.width, frame.height);
+			if (!frame.reducedMotion) time += frame.dt * speed;
+			return field.advance(time);
+		}
+	};
+}
+export { createTerrain };
+
+//# sourceMappingURL=terrain.js.map

package/dist/styles/topo/terrain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"terrain.js","names":[],"sources":["../../../src/styles/topo/terrain.ts"],"sourcesContent":["import type { Frame } from '../../core/style';\nimport { createKeyframeField, type KeyframeField } from './field';\nimport type { ResolvedTopoOptions } from './options';\n\n/** The animated height field both topo renderers draw: keyframes plus the clock that drives them. */\nexport interface Terrain {\n  readonly field: KeyframeField;\n  configure(options: ResolvedTopoOptions): void;\n  /** Move the terrain forward by one frame and return the blend factor between the keyframes. */\n  advance(frame: Frame): number;\n}\n\nexport function createTerrain(initial: ResolvedTopoOptions): Terrain {\n  const field = createKeyframeField(initial);\n  let speed = initial.speed;\n  let time = 0;\n  return {\n    field,\n    configure(options) {\n      field.configure(options);\n      speed = options.speed;\n    },\n    advance(frame) {\n      field.resize(frame.width, frame.height);\n      if (!frame.reducedMotion) time += frame.dt * speed;\n      return field.advance(time);\n    },\n  };\n}\n"],"mappings":";;AAYA,SAAgB,cAAc,SAAuC;CACnE,MAAM,QAAQ,oBAAoB,OAAO;CACzC,IAAI,QAAQ,QAAQ;CACpB,IAAI,OAAO;CACX,OAAO;EACL;EACA,UAAU,SAAS;GACjB,MAAM,UAAU,OAAO;GACvB,QAAQ,QAAQ;EAClB;EACA,QAAQ,OAAO;GACb,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM;GACtC,IAAI,CAAC,MAAM,eAAe,QAAQ,MAAM,KAAK;GAC7C,OAAO,MAAM,QAAQ,IAAI;EAC3B;CACF;AACF"}

package/dist/styles/topo/webgl.cjs

@@ -0,0 +1,150 @@
+const require_color = require("../../core/color.cjs");
+const require_webgl = require("../../core/webgl.cjs");
+const require_options = require("./options.cjs");
+const require_terrain = require("./terrain.cjs");
+// src/styles/topo/webgl.ts
+var FRAGMENT = `#version 300 es
+precision highp float;
+precision highp sampler2D;
+
+uniform sampler2D uKeyA;
+uniform sampler2D uKeyB;
+uniform float uBlend;
+uniform vec2 uGrid;       // cols, rows
+uniform float uCellSize;  // CSS px between grid samples
+uniform float uDpr;
+uniform float uHeight;    // canvas height in device px
+uniform vec3 uPointer;    // x, y (CSS px), bump height
+uniform float uRadius2;
+uniform float uStep;      // height difference between contour levels
+uniform float uMajorEvery;
+uniform vec2 uHalfWidth;  // half line widths (device px): minor, major
+uniform vec4 uMinor;      // straight RGBA, opacity applied
+uniform vec4 uMajor;
+
+out vec4 outColor;
+
+float heightAt(ivec2 c) {
+  return mix(texelFetch(uKeyA, c, 0).r, texelFetch(uKeyB, c, 0).r, uBlend);
+}
+
+void main() {
+  vec2 p = vec2(gl_FragCoord.x, uHeight - gl_FragCoord.y) / uDpr;
+
+  // Bilinear interpolation of the height field (same surface the CPU renderer traces).
+  vec2 g = p / uCellSize;
+  vec2 cell = clamp(floor(g), vec2(0.0), uGrid - 2.0);
+  vec2 f = g - cell;
+  ivec2 c = ivec2(cell);
+  float h = mix(
+    mix(heightAt(c), heightAt(c + ivec2(1, 0)), f.x),
+    mix(heightAt(c + ivec2(0, 1)), heightAt(c + ivec2(1, 1)), f.x),
+    f.y);
+
+  vec2 d = p - uPointer.xy;
+  h += uPointer.z * exp(-dot(d, d) / uRadius2);
+
+  // Distance to the nearest contour, in device pixels, from the screen-space gradient.
+  float v = h / uStep;
+  float level = floor(v + 0.5);
+  float dist = abs(v - level) / max(fwidth(v), 1e-5);
+
+  bool major = uMajorEvery > 0.0 && mod(level, uMajorEvery) == 0.0;
+  float halfWidth = major ? uHalfWidth.y : uHalfWidth.x;
+  vec4 line = major ? uMajor : uMinor;
+  // Analytic antialiasing: coverage ramps over one pixel at the line edge.
+  float a = line.a * clamp(halfWidth + 0.5 - dist, 0.0, 1.0);
+  outColor = vec4(line.rgb * a, a); // premultiplied; the engine blends it over the background
+}`;
+var UNIFORMS = [
+	"uKeyA",
+	"uKeyB",
+	"uBlend",
+	"uGrid",
+	"uCellSize",
+	"uDpr",
+	"uHeight",
+	"uPointer",
+	"uRadius2",
+	"uStep",
+	"uMajorEvery",
+	"uHalfWidth",
+	"uMinor",
+	"uMajor"
+];
+/**
+* Per-pixel contour lines in a fragment shader. The CPU only uploads the two noise
+* keyframes when they change (once per keyframe interval) and sets a few uniforms per frame.
+*/
+function createTopoWebGL(gl, initial) {
+	let options = require_options.resolveTopoOptions(initial);
+	const terrain = require_terrain.createTerrain(options);
+	const program = require_webgl.createProgram(gl, require_webgl.FULLSCREEN_VERTEX_SHADER, FRAGMENT);
+	const uniforms = program ? require_webgl.getUniforms(gl, program, UNIFORMS) : null;
+	const textures = [gl.createTexture(), gl.createTexture()];
+	for (const texture of textures) {
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	}
+	let textureCols = 0;
+	let textureRows = 0;
+	let uploadedVersion = -1;
+	/** Upload the keyframes when they changed since the last frame. */
+	function upload() {
+		const { field } = terrain;
+		const resized = textureCols !== field.cols || textureRows !== field.rows;
+		if (!resized && uploadedVersion === field.version) return;
+		const keys = [field.keyA, field.keyB];
+		for (let unit = 0; unit < 2; unit++) {
+			gl.activeTexture(gl.TEXTURE0 + unit);
+			gl.bindTexture(gl.TEXTURE_2D, textures[unit]);
+			if (resized) gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, field.cols, field.rows, 0, gl.RED, gl.FLOAT, keys[unit]);
+			else gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, field.cols, field.rows, gl.RED, gl.FLOAT, keys[unit]);
+		}
+		textureCols = field.cols;
+		textureRows = field.rows;
+		uploadedVersion = field.version;
+	}
+	return {
+		update(next) {
+			options = require_options.resolveTopoOptions(next);
+			terrain.configure(options);
+		},
+		render(frame) {
+			const blend = terrain.advance(frame);
+			if (!program || !uniforms) return;
+			upload();
+			const minor = require_color.parseColor(options.lineColor);
+			const major = require_color.parseColor(options.majorLineColor);
+			const opacity = options.lineOpacity;
+			const { field } = terrain;
+			gl.useProgram(program);
+			gl.uniform1i(uniforms.uKeyA, 0);
+			gl.uniform1i(uniforms.uKeyB, 1);
+			gl.uniform1f(uniforms.uBlend, blend);
+			gl.uniform2f(uniforms.uGrid, field.cols, field.rows);
+			gl.uniform1f(uniforms.uCellSize, options.cellSize);
+			gl.uniform1f(uniforms.uDpr, frame.dpr);
+			gl.uniform1f(uniforms.uHeight, gl.drawingBufferHeight);
+			gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);
+			gl.uniform1f(uniforms.uRadius2, options.pointerRadius * options.pointerRadius);
+			gl.uniform1f(uniforms.uStep, options.levelStep);
+			gl.uniform1f(uniforms.uMajorEvery, options.majorEvery);
+			gl.uniform2f(uniforms.uHalfWidth, options.lineWidth * frame.dpr / 2, options.majorLineWidth * frame.dpr / 2);
+			gl.uniform4f(uniforms.uMinor, minor[0], minor[1], minor[2], minor[3] * opacity);
+			gl.uniform4f(uniforms.uMajor, major[0], major[1], major[2], major[3] * opacity);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		},
+		destroy() {
+			gl.deleteTexture(textures[0]);
+			gl.deleteTexture(textures[1]);
+			gl.deleteProgram(program);
+		}
+	};
+}
+exports.createTopoWebGL = createTopoWebGL;
+
+//# sourceMappingURL=webgl.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":["resolveTopoOptions","createTerrain","createProgram","FULLSCREEN_VERTEX_SHADER","getUniforms","parseColor"],"sources":["../../../src/styles/topo/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { StyleRenderer } from '../../core/style';\nimport { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from '../../core/webgl';\nimport { resolveTopoOptions, type TopoOptions } from './options';\nimport { createTerrain } from './terrain';\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\nprecision highp sampler2D;\n\nuniform sampler2D uKeyA;\nuniform sampler2D uKeyB;\nuniform float uBlend;\nuniform vec2 uGrid;       // cols, rows\nuniform float uCellSize;  // CSS px between grid samples\nuniform float uDpr;\nuniform float uHeight;    // canvas height in device px\nuniform vec3 uPointer;    // x, y (CSS px), bump height\nuniform float uRadius2;\nuniform float uStep;      // height difference between contour levels\nuniform float uMajorEvery;\nuniform vec2 uHalfWidth;  // half line widths (device px): minor, major\nuniform vec4 uMinor;      // straight RGBA, opacity applied\nuniform vec4 uMajor;\n\nout vec4 outColor;\n\nfloat heightAt(ivec2 c) {\n  return mix(texelFetch(uKeyA, c, 0).r, texelFetch(uKeyB, c, 0).r, uBlend);\n}\n\nvoid main() {\n  vec2 p = vec2(gl_FragCoord.x, uHeight - gl_FragCoord.y) / uDpr;\n\n  // Bilinear interpolation of the height field (same surface the CPU renderer traces).\n  vec2 g = p / uCellSize;\n  vec2 cell = clamp(floor(g), vec2(0.0), uGrid - 2.0);\n  vec2 f = g - cell;\n  ivec2 c = ivec2(cell);\n  float h = mix(\n    mix(heightAt(c), heightAt(c + ivec2(1, 0)), f.x),\n    mix(heightAt(c + ivec2(0, 1)), heightAt(c + ivec2(1, 1)), f.x),\n    f.y);\n\n  vec2 d = p - uPointer.xy;\n  h += uPointer.z * exp(-dot(d, d) / uRadius2);\n\n  // Distance to the nearest contour, in device pixels, from the screen-space gradient.\n  float v = h / uStep;\n  float level = floor(v + 0.5);\n  float dist = abs(v - level) / max(fwidth(v), 1e-5);\n\n  bool major = uMajorEvery > 0.0 && mod(level, uMajorEvery) == 0.0;\n  float halfWidth = major ? uHalfWidth.y : uHalfWidth.x;\n  vec4 line = major ? uMajor : uMinor;\n  // Analytic antialiasing: coverage ramps over one pixel at the line edge.\n  float a = line.a * clamp(halfWidth + 0.5 - dist, 0.0, 1.0);\n  outColor = vec4(line.rgb * a, a); // premultiplied; the engine blends it over the background\n}`;\n\nconst UNIFORMS = [\n  'uKeyA', 'uKeyB', 'uBlend', 'uGrid', 'uCellSize', 'uDpr', 'uHeight', 'uPointer', 'uRadius2',\n  'uStep', 'uMajorEvery', 'uHalfWidth', 'uMinor', 'uMajor',\n] as const;\n\n/**\n * Per-pixel contour lines in a fragment shader. The CPU only uploads the two noise\n * keyframes when they change (once per keyframe interval) and sets a few uniforms per frame.\n */\nexport function createTopoWebGL(gl: WebGL2RenderingContext, initial: TopoOptions): StyleRenderer<TopoOptions> {\n  let options = resolveTopoOptions(initial);\n  const terrain = createTerrain(options);\n\n  const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n  const textures = [gl.createTexture(), gl.createTexture()] as const;\n  for (const texture of textures) {\n    gl.bindTexture(gl.TEXTURE_2D, texture);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n  }\n  let textureCols = 0;\n  let textureRows = 0;\n  let uploadedVersion = -1;\n\n  /** Upload the keyframes when they changed since the last frame. */\n  function upload(): void {\n    const { field } = terrain;\n    const resized = textureCols !== field.cols || textureRows !== field.rows;\n    if (!resized && uploadedVersion === field.version) return;\n    const keys = [field.keyA, field.keyB];\n    for (let unit = 0; unit < 2; unit++) {\n      gl.activeTexture(gl.TEXTURE0 + unit);\n      gl.bindTexture(gl.TEXTURE_2D, textures[unit]);\n      if (resized) {\n        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, field.cols, field.rows, 0, gl.RED, gl.FLOAT, keys[unit]);\n      } else {\n        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, field.cols, field.rows, gl.RED, gl.FLOAT, keys[unit]);\n      }\n    }\n    textureCols = field.cols;\n    textureRows = field.rows;\n    uploadedVersion = field.version;\n  }\n\n  return {\n    update(next) {\n      options = resolveTopoOptions(next);\n      terrain.configure(options);\n    },\n    render(frame) {\n      const blend = terrain.advance(frame);\n      if (!program || !uniforms) return; // context lost during setup; the engine recreates us\n      upload();\n\n      const minor = parseColor(options.lineColor);\n      const major = parseColor(options.majorLineColor);\n      const opacity = options.lineOpacity;\n      const { field } = terrain;\n\n      gl.useProgram(program);\n      gl.uniform1i(uniforms.uKeyA, 0);\n      gl.uniform1i(uniforms.uKeyB, 1);\n      gl.uniform1f(uniforms.uBlend, blend);\n      gl.uniform2f(uniforms.uGrid, field.cols, field.rows);\n      gl.uniform1f(uniforms.uCellSize, options.cellSize);\n      gl.uniform1f(uniforms.uDpr, frame.dpr);\n      gl.uniform1f(uniforms.uHeight, gl.drawingBufferHeight);\n      gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);\n      gl.uniform1f(uniforms.uRadius2, options.pointerRadius * options.pointerRadius);\n      gl.uniform1f(uniforms.uStep, options.levelStep);\n      gl.uniform1f(uniforms.uMajorEvery, options.majorEvery);\n      gl.uniform2f(uniforms.uHalfWidth, (options.lineWidth * frame.dpr) / 2, (options.majorLineWidth * frame.dpr) / 2);\n      gl.uniform4f(uniforms.uMinor, minor[0], minor[1], minor[2], minor[3] * opacity);\n      gl.uniform4f(uniforms.uMajor, major[0], major[1], major[2], major[3] * opacity);\n      gl.drawArrays(gl.TRIANGLES, 0, 3);\n    },\n    destroy() {\n      gl.deleteTexture(textures[0]);\n      gl.deleteTexture(textures[1]);\n      gl.deleteProgram(program);\n    },\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type TopoOptions } from './options.cjs';
+/**
+ * Per-pixel contour lines in a fragment shader. The CPU only uploads the two noise
+ * keyframes when they change (once per keyframe interval) and sets a few uniforms per frame.
+ */
+export declare function createTopoWebGL(gl: WebGL2RenderingContext, initial: TopoOptions): StyleRenderer<TopoOptions>;

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

@@ -0,0 +1,7 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type TopoOptions } from './options.js';
+/**
+ * Per-pixel contour lines in a fragment shader. The CPU only uploads the two noise
+ * keyframes when they change (once per keyframe interval) and sets a few uniforms per frame.
+ */
+export declare function createTopoWebGL(gl: WebGL2RenderingContext, initial: TopoOptions): StyleRenderer<TopoOptions>;

package/dist/styles/topo/webgl.js

@@ -0,0 +1,150 @@
+import { parseColor } from "../../core/color.js";
+import { FULLSCREEN_VERTEX_SHADER, createProgram, getUniforms } from "../../core/webgl.js";
+import { resolveTopoOptions } from "./options.js";
+import { createTerrain } from "./terrain.js";
+// src/styles/topo/webgl.ts
+var FRAGMENT = `#version 300 es
+precision highp float;
+precision highp sampler2D;
+
+uniform sampler2D uKeyA;
+uniform sampler2D uKeyB;
+uniform float uBlend;
+uniform vec2 uGrid;       // cols, rows
+uniform float uCellSize;  // CSS px between grid samples
+uniform float uDpr;
+uniform float uHeight;    // canvas height in device px
+uniform vec3 uPointer;    // x, y (CSS px), bump height
+uniform float uRadius2;
+uniform float uStep;      // height difference between contour levels
+uniform float uMajorEvery;
+uniform vec2 uHalfWidth;  // half line widths (device px): minor, major
+uniform vec4 uMinor;      // straight RGBA, opacity applied
+uniform vec4 uMajor;
+
+out vec4 outColor;
+
+float heightAt(ivec2 c) {
+  return mix(texelFetch(uKeyA, c, 0).r, texelFetch(uKeyB, c, 0).r, uBlend);
+}
+
+void main() {
+  vec2 p = vec2(gl_FragCoord.x, uHeight - gl_FragCoord.y) / uDpr;
+
+  // Bilinear interpolation of the height field (same surface the CPU renderer traces).
+  vec2 g = p / uCellSize;
+  vec2 cell = clamp(floor(g), vec2(0.0), uGrid - 2.0);
+  vec2 f = g - cell;
+  ivec2 c = ivec2(cell);
+  float h = mix(
+    mix(heightAt(c), heightAt(c + ivec2(1, 0)), f.x),
+    mix(heightAt(c + ivec2(0, 1)), heightAt(c + ivec2(1, 1)), f.x),
+    f.y);
+
+  vec2 d = p - uPointer.xy;
+  h += uPointer.z * exp(-dot(d, d) / uRadius2);
+
+  // Distance to the nearest contour, in device pixels, from the screen-space gradient.
+  float v = h / uStep;
+  float level = floor(v + 0.5);
+  float dist = abs(v - level) / max(fwidth(v), 1e-5);
+
+  bool major = uMajorEvery > 0.0 && mod(level, uMajorEvery) == 0.0;
+  float halfWidth = major ? uHalfWidth.y : uHalfWidth.x;
+  vec4 line = major ? uMajor : uMinor;
+  // Analytic antialiasing: coverage ramps over one pixel at the line edge.
+  float a = line.a * clamp(halfWidth + 0.5 - dist, 0.0, 1.0);
+  outColor = vec4(line.rgb * a, a); // premultiplied; the engine blends it over the background
+}`;
+var UNIFORMS = [
+	"uKeyA",
+	"uKeyB",
+	"uBlend",
+	"uGrid",
+	"uCellSize",
+	"uDpr",
+	"uHeight",
+	"uPointer",
+	"uRadius2",
+	"uStep",
+	"uMajorEvery",
+	"uHalfWidth",
+	"uMinor",
+	"uMajor"
+];
+/**
+* Per-pixel contour lines in a fragment shader. The CPU only uploads the two noise
+* keyframes when they change (once per keyframe interval) and sets a few uniforms per frame.
+*/
+function createTopoWebGL(gl, initial) {
+	let options = resolveTopoOptions(initial);
+	const terrain = createTerrain(options);
+	const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FRAGMENT);
+	const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;
+	const textures = [gl.createTexture(), gl.createTexture()];
+	for (const texture of textures) {
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	}
+	let textureCols = 0;
+	let textureRows = 0;
+	let uploadedVersion = -1;
+	/** Upload the keyframes when they changed since the last frame. */
+	function upload() {
+		const { field } = terrain;
+		const resized = textureCols !== field.cols || textureRows !== field.rows;
+		if (!resized && uploadedVersion === field.version) return;
+		const keys = [field.keyA, field.keyB];
+		for (let unit = 0; unit < 2; unit++) {
+			gl.activeTexture(gl.TEXTURE0 + unit);
+			gl.bindTexture(gl.TEXTURE_2D, textures[unit]);
+			if (resized) gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, field.cols, field.rows, 0, gl.RED, gl.FLOAT, keys[unit]);
+			else gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, field.cols, field.rows, gl.RED, gl.FLOAT, keys[unit]);
+		}
+		textureCols = field.cols;
+		textureRows = field.rows;
+		uploadedVersion = field.version;
+	}
+	return {
+		update(next) {
+			options = resolveTopoOptions(next);
+			terrain.configure(options);
+		},
+		render(frame) {
+			const blend = terrain.advance(frame);
+			if (!program || !uniforms) return;
+			upload();
+			const minor = parseColor(options.lineColor);
+			const major = parseColor(options.majorLineColor);
+			const opacity = options.lineOpacity;
+			const { field } = terrain;
+			gl.useProgram(program);
+			gl.uniform1i(uniforms.uKeyA, 0);
+			gl.uniform1i(uniforms.uKeyB, 1);
+			gl.uniform1f(uniforms.uBlend, blend);
+			gl.uniform2f(uniforms.uGrid, field.cols, field.rows);
+			gl.uniform1f(uniforms.uCellSize, options.cellSize);
+			gl.uniform1f(uniforms.uDpr, frame.dpr);
+			gl.uniform1f(uniforms.uHeight, gl.drawingBufferHeight);
+			gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);
+			gl.uniform1f(uniforms.uRadius2, options.pointerRadius * options.pointerRadius);
+			gl.uniform1f(uniforms.uStep, options.levelStep);
+			gl.uniform1f(uniforms.uMajorEvery, options.majorEvery);
+			gl.uniform2f(uniforms.uHalfWidth, options.lineWidth * frame.dpr / 2, options.majorLineWidth * frame.dpr / 2);
+			gl.uniform4f(uniforms.uMinor, minor[0], minor[1], minor[2], minor[3] * opacity);
+			gl.uniform4f(uniforms.uMajor, major[0], major[1], major[2], major[3] * opacity);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		},
+		destroy() {
+			gl.deleteTexture(textures[0]);
+			gl.deleteTexture(textures[1]);
+			gl.deleteProgram(program);
+		}
+	};
+}
+export { createTopoWebGL };
+
+//# sourceMappingURL=webgl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.js","names":[],"sources":["../../../src/styles/topo/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { StyleRenderer } from '../../core/style';\nimport { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from '../../core/webgl';\nimport { resolveTopoOptions, type TopoOptions } from './options';\nimport { createTerrain } from './terrain';\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\nprecision highp sampler2D;\n\nuniform sampler2D uKeyA;\nuniform sampler2D uKeyB;\nuniform float uBlend;\nuniform vec2 uGrid;       // cols, rows\nuniform float uCellSize;  // CSS px between grid samples\nuniform float uDpr;\nuniform float uHeight;    // canvas height in device px\nuniform vec3 uPointer;    // x, y (CSS px), bump height\nuniform float uRadius2;\nuniform float uStep;      // height difference between contour levels\nuniform float uMajorEvery;\nuniform vec2 uHalfWidth;  // half line widths (device px): minor, major\nuniform vec4 uMinor;      // straight RGBA, opacity applied\nuniform vec4 uMajor;\n\nout vec4 outColor;\n\nfloat heightAt(ivec2 c) {\n  return mix(texelFetch(uKeyA, c, 0).r, texelFetch(uKeyB, c, 0).r, uBlend);\n}\n\nvoid main() {\n  vec2 p = vec2(gl_FragCoord.x, uHeight - gl_FragCoord.y) / uDpr;\n\n  // Bilinear interpolation of the height field (same surface the CPU renderer traces).\n  vec2 g = p / uCellSize;\n  vec2 cell = clamp(floor(g), vec2(0.0), uGrid - 2.0);\n  vec2 f = g - cell;\n  ivec2 c = ivec2(cell);\n  float h = mix(\n    mix(heightAt(c), heightAt(c + ivec2(1, 0)), f.x),\n    mix(heightAt(c + ivec2(0, 1)), heightAt(c + ivec2(1, 1)), f.x),\n    f.y);\n\n  vec2 d = p - uPointer.xy;\n  h += uPointer.z * exp(-dot(d, d) / uRadius2);\n\n  // Distance to the nearest contour, in device pixels, from the screen-space gradient.\n  float v = h / uStep;\n  float level = floor(v + 0.5);\n  float dist = abs(v - level) / max(fwidth(v), 1e-5);\n\n  bool major = uMajorEvery > 0.0 && mod(level, uMajorEvery) == 0.0;\n  float halfWidth = major ? uHalfWidth.y : uHalfWidth.x;\n  vec4 line = major ? uMajor : uMinor;\n  // Analytic antialiasing: coverage ramps over one pixel at the line edge.\n  float a = line.a * clamp(halfWidth + 0.5 - dist, 0.0, 1.0);\n  outColor = vec4(line.rgb * a, a); // premultiplied; the engine blends it over the background\n}`;\n\nconst UNIFORMS = [\n  'uKeyA', 'uKeyB', 'uBlend', 'uGrid', 'uCellSize', 'uDpr', 'uHeight', 'uPointer', 'uRadius2',\n  'uStep', 'uMajorEvery', 'uHalfWidth', 'uMinor', 'uMajor',\n] as const;\n\n/**\n * Per-pixel contour lines in a fragment shader. The CPU only uploads the two noise\n * keyframes when they change (once per keyframe interval) and sets a few uniforms per frame.\n */\nexport function createTopoWebGL(gl: WebGL2RenderingContext, initial: TopoOptions): StyleRenderer<TopoOptions> {\n  let options = resolveTopoOptions(initial);\n  const terrain = createTerrain(options);\n\n  const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n  const textures = [gl.createTexture(), gl.createTexture()] as const;\n  for (const texture of textures) {\n    gl.bindTexture(gl.TEXTURE_2D, texture);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n  }\n  let textureCols = 0;\n  let textureRows = 0;\n  let uploadedVersion = -1;\n\n  /** Upload the keyframes when they changed since the last frame. */\n  function upload(): void {\n    const { field } = terrain;\n    const resized = textureCols !== field.cols || textureRows !== field.rows;\n    if (!resized && uploadedVersion === field.version) return;\n    const keys = [field.keyA, field.keyB];\n    for (let unit = 0; unit < 2; unit++) {\n      gl.activeTexture(gl.TEXTURE0 + unit);\n      gl.bindTexture(gl.TEXTURE_2D, textures[unit]);\n      if (resized) {\n        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, field.cols, field.rows, 0, gl.RED, gl.FLOAT, keys[unit]);\n      } else {\n        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, field.cols, field.rows, gl.RED, gl.FLOAT, keys[unit]);\n      }\n    }\n    textureCols = field.cols;\n    textureRows = field.rows;\n    uploadedVersion = field.version;\n  }\n\n  return {\n    update(next) {\n      options = resolveTopoOptions(next);\n      terrain.configure(options);\n    },\n    render(frame) {\n      const blend = terrain.advance(frame);\n      if (!program || !uniforms) return; // context lost during setup; the engine recreates us\n      upload();\n\n      const minor = parseColor(options.lineColor);\n      const major = parseColor(options.majorLineColor);\n      const opacity = options.lineOpacity;\n      const { field } = terrain;\n\n      gl.useProgram(program);\n      gl.uniform1i(uniforms.uKeyA, 0);\n      gl.uniform1i(uniforms.uKeyB, 1);\n      gl.uniform1f(uniforms.uBlend, blend);\n      gl.uniform2f(uniforms.uGrid, field.cols, field.rows);\n      gl.uniform1f(uniforms.uCellSize, options.cellSize);\n      gl.uniform1f(uniforms.uDpr, frame.dpr);\n      gl.uniform1f(uniforms.uHeight, gl.drawingBufferHeight);\n      gl.uniform3f(uniforms.uPointer, frame.pointer.x, frame.pointer.y, options.pointerStrength * frame.pointer.influence);\n      gl.uniform1f(uniforms.uRadius2, options.pointerRadius * options.pointerRadius);\n      gl.uniform1f(uniforms.uStep, options.levelStep);\n      gl.uniform1f(uniforms.uMajorEvery, options.majorEvery);\n      gl.uniform2f(uniforms.uHalfWidth, (options.lineWidth * frame.dpr) / 2, (options.majorLineWidth * frame.dpr) / 2);\n      gl.uniform4f(uniforms.uMinor, minor[0], minor[1], minor[2], minor[3] * opacity);\n      gl.uniform4f(uniforms.uMajor, major[0], major[1], major[2], major[3] * opacity);\n      gl.drawArrays(gl.TRIANGLES, 0, 3);\n    },\n    destroy() {\n      gl.deleteTexture(textures[0]);\n      gl.deleteTexture(textures[1]);\n      gl.deleteProgram(program);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/topo/canvas2d.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_canvas2d_renderer = require("../core/canvas2d-renderer.cjs");
+const require_style = require("../core/style.cjs");
+const require_canvas2d = require("../styles/topo/canvas2d.cjs");
+const require_definition = require("../styles/topo/definition.cjs");
+// src/topo/canvas2d.ts
+/** Animated topographic contour lines, drawn with Canvas 2D only. */
+var topo = require_style.defineStyle({
+	...require_definition.topoStyle,
+	renderers: [require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createTopoCanvas2D)]
+});
+exports.topo = topo;
+
+//# sourceMappingURL=canvas2d.cjs.map

package/dist/topo/canvas2d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.cjs","names":["defineStyle","topoStyle","canvas2dRenderer","createTopoCanvas2D"],"sources":["../../src/topo/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createTopoCanvas2D } from '../styles/topo/canvas2d';\nimport { topoStyle } from '../styles/topo/definition';\nimport type { TopoOptions } from '../styles/topo/options';\n\nexport type { TopoOptions };\n\n/** Animated topographic contour lines, drawn with Canvas 2D only. */\nexport const topo: StyleFactory<TopoOptions> = defineStyle({ ...topoStyle, renderers: [canvas2dRenderer(createTopoCanvas2D)] });\n"],"mappings":";;;;;;;AASA,IAAa,OAAkCA,cAAAA,YAAY;CAAE,GAAGC,mBAAAA;CAAW,WAAW,CAACC,0BAAAA,iBAAiBC,iBAAAA,kBAAkB,CAAC;AAAE,CAAC"}

package/dist/topo/canvas2d.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { TopoOptions } from '../styles/topo/options.cjs';
+export type { TopoOptions };
+/** Animated topographic contour lines, drawn with Canvas 2D only. */
+export declare const topo: StyleFactory<TopoOptions>;

package/dist/topo/canvas2d.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { TopoOptions } from '../styles/topo/options.js';
+export type { TopoOptions };
+/** Animated topographic contour lines, drawn with Canvas 2D only. */
+export declare const topo: StyleFactory<TopoOptions>;

package/dist/topo/canvas2d.js

@@ -0,0 +1,13 @@
+import { canvas2dRenderer } from "../core/canvas2d-renderer.js";
+import { defineStyle } from "../core/style.js";
+import { createTopoCanvas2D } from "../styles/topo/canvas2d.js";
+import { topoStyle } from "../styles/topo/definition.js";
+// src/topo/canvas2d.ts
+/** Animated topographic contour lines, drawn with Canvas 2D only. */
+var topo = defineStyle({
+	...topoStyle,
+	renderers: [canvas2dRenderer(createTopoCanvas2D)]
+});
+export { topo };
+
+//# sourceMappingURL=canvas2d.js.map