interactive-bg 0.1.1 → 0.2.0

package/dist/styles/shimmer/webgl.cjs

@@ -0,0 +1,89 @@
+const require_color = require("../../core/color.cjs");
+const require_webgl = require("../../core/webgl.cjs");
+const require_field = require("./field.cjs");
+const require_options = require("./options.cjs");
+// src/styles/shimmer/webgl.ts
+var FRAGMENT = `#version 300 es
+precision highp float;
+
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uFrequency;
+uniform float uColorScale;
+uniform vec3 uBaseColor;
+uniform float uChroma;
+uniform float uWarp;
+uniform float uOpacity;
+uniform vec3 uPointer; // x, y, strength × influence
+
+out vec4 fragColor;
+
+vec2 distort(vec2 p, float offset) {
+  p += offset;
+  for (float i = 1.0; i < 7.0; i++) {
+    p.x += uWarp * 0.3 / i * sin(i * 5.0 * p.y + uTime);
+    p.y += uWarp * 0.1 / i * cos(i * 3.0 * p.x + uTime);
+  }
+  return p;
+}
+
+void main() {
+  // gl_FragCoord is bottom-up; flip it so pointer coordinates are top-down.
+  vec2 uv = vec2(gl_FragCoord.x / uRes.x, 1.0 - gl_FragCoord.y / uRes.y);
+
+  float aspect = uRes.x / uRes.y;
+  vec2 d = (uv - uPointer.xy) * vec2(aspect, 1.0);
+  uv += vec2(d.x / aspect, d.y) * exp(-dot(d, d) / 0.03) * uPointer.z;
+
+  float r = sin(distort(uv, 0.0).x * uFrequency) * 0.5 + 0.5;
+  float g = sin(distort(uv, uChroma).x * uFrequency) * 0.5 + 0.5;
+  float b = sin(distort(uv, 2.0 * uChroma).x * uFrequency) * 0.5 + 0.5;
+  vec3 colour = pow(vec3(r, g, b), vec3(uColorScale));
+  vec3 finalColour = mix(uBaseColor, colour, 0.8);
+  fragColor = vec4(finalColour * uOpacity, uOpacity);
+}`;
+var UNIFORMS = [
+	"uRes",
+	"uTime",
+	"uFrequency",
+	"uColorScale",
+	"uBaseColor",
+	"uChroma",
+	"uWarp",
+	"uOpacity",
+	"uPointer"
+];
+/** The exact analytic band field from the reference, running in WebGL2. */
+function createShimmerWebGL(gl, initial) {
+	let options = require_options.resolveShimmerOptions(initial);
+	let clock = 0;
+	const program = require_webgl.createProgram(gl, require_webgl.FULLSCREEN_VERTEX_SHADER, FRAGMENT);
+	const uniforms = program ? require_webgl.getUniforms(gl, program, UNIFORMS) : null;
+	return {
+		update(next) {
+			options = require_options.resolveShimmerOptions(next);
+		},
+		render(frame) {
+			if (!program || !uniforms) return;
+			if (!frame.reducedMotion && options.speed > 0) clock += frame.dt;
+			const [baseR, baseG, baseB] = require_color.parseColor(options.baseColor);
+			gl.useProgram(program);
+			gl.uniform2f(uniforms.uRes, gl.drawingBufferWidth, gl.drawingBufferHeight);
+			gl.uniform1f(uniforms.uTime, clock * require_field.TIME_RATE * options.speed);
+			gl.uniform1f(uniforms.uFrequency, options.frequency);
+			gl.uniform1f(uniforms.uColorScale, options.colorScale);
+			gl.uniform3f(uniforms.uBaseColor, baseR, baseG, baseB);
+			gl.uniform1f(uniforms.uChroma, options.chroma);
+			gl.uniform1f(uniforms.uWarp, options.warp);
+			gl.uniform1f(uniforms.uOpacity, options.opacity);
+			gl.uniform3f(uniforms.uPointer, frame.pointer.x / Math.max(1, frame.width), frame.pointer.y / Math.max(1, frame.height), frame.reducedMotion ? 0 : options.pointerStrength * frame.pointer.influence);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		},
+		destroy() {
+			gl.deleteProgram(program);
+		}
+	};
+}
+exports.createShimmerWebGL = createShimmerWebGL;
+
+//# sourceMappingURL=webgl.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":["resolveShimmerOptions","createProgram","FULLSCREEN_VERTEX_SHADER","getUniforms","parseColor","TIME_RATE"],"sources":["../../../src/styles/shimmer/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { Frame, StyleRenderer } from '../../core/style';\nimport { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from '../../core/webgl';\nimport { TIME_RATE } from './field';\nimport { resolveShimmerOptions, type ShimmerOptions } from './options';\n\n// A faithful port of the reference's `sr-ground-canvas` shader: a pair of\n// coupled sine waves warp the UVs six times, the three channels are offset\n// slightly, and the resulting sine bands are raised to a high power.\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uFrequency;\nuniform float uColorScale;\nuniform vec3 uBaseColor;\nuniform float uChroma;\nuniform float uWarp;\nuniform float uOpacity;\nuniform vec3 uPointer; // x, y, strength × influence\n\nout vec4 fragColor;\n\nvec2 distort(vec2 p, float offset) {\n  p += offset;\n  for (float i = 1.0; i < 7.0; i++) {\n    p.x += uWarp * 0.3 / i * sin(i * 5.0 * p.y + uTime);\n    p.y += uWarp * 0.1 / i * cos(i * 3.0 * p.x + uTime);\n  }\n  return p;\n}\n\nvoid main() {\n  // gl_FragCoord is bottom-up; flip it so pointer coordinates are top-down.\n  vec2 uv = vec2(gl_FragCoord.x / uRes.x, 1.0 - gl_FragCoord.y / uRes.y);\n\n  float aspect = uRes.x / uRes.y;\n  vec2 d = (uv - uPointer.xy) * vec2(aspect, 1.0);\n  uv += vec2(d.x / aspect, d.y) * exp(-dot(d, d) / 0.03) * uPointer.z;\n\n  float r = sin(distort(uv, 0.0).x * uFrequency) * 0.5 + 0.5;\n  float g = sin(distort(uv, uChroma).x * uFrequency) * 0.5 + 0.5;\n  float b = sin(distort(uv, 2.0 * uChroma).x * uFrequency) * 0.5 + 0.5;\n  vec3 colour = pow(vec3(r, g, b), vec3(uColorScale));\n  vec3 finalColour = mix(uBaseColor, colour, 0.8);\n  fragColor = vec4(finalColour * uOpacity, uOpacity);\n}`;\n\nconst UNIFORMS = [\n  'uRes',\n  'uTime',\n  'uFrequency',\n  'uColorScale',\n  'uBaseColor',\n  'uChroma',\n  'uWarp',\n  'uOpacity',\n  'uPointer',\n] as const;\n\n/** The exact analytic band field from the reference, running in WebGL2. */\nexport function createShimmerWebGL(gl: WebGL2RenderingContext, initial: ShimmerOptions): StyleRenderer<ShimmerOptions> {\n  let options = resolveShimmerOptions(initial);\n  let clock = 0;\n\n  const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n\n  return {\n    update(next) {\n      options = resolveShimmerOptions(next);\n    },\n    render(frame: Frame) {\n      if (!program || !uniforms) return; // context lost during setup\n      if (!frame.reducedMotion && options.speed > 0) clock += frame.dt;\n\n      const [baseR, baseG, baseB] = parseColor(options.baseColor);\n      gl.useProgram(program);\n      gl.uniform2f(uniforms.uRes, gl.drawingBufferWidth, gl.drawingBufferHeight);\n      gl.uniform1f(uniforms.uTime, clock * TIME_RATE * options.speed);\n      gl.uniform1f(uniforms.uFrequency, options.frequency);\n      gl.uniform1f(uniforms.uColorScale, options.colorScale);\n      gl.uniform3f(uniforms.uBaseColor, baseR, baseG, baseB);\n      gl.uniform1f(uniforms.uChroma, options.chroma);\n      gl.uniform1f(uniforms.uWarp, options.warp);\n      gl.uniform1f(uniforms.uOpacity, options.opacity);\n      gl.uniform3f(\n        uniforms.uPointer,\n        frame.pointer.x / Math.max(1, frame.width),\n        frame.pointer.y / Math.max(1, frame.height),\n        frame.reducedMotion ? 0 : options.pointerStrength * frame.pointer.influence,\n      );\n      gl.drawArrays(gl.TRIANGLES, 0, 3);\n    },\n    destroy() {\n      gl.deleteProgram(program);\n    },\n  };\n}\n"],"mappings":";;;;;AASA,IAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCjB,IAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,mBAAmB,IAA4B,SAAwD;CACrH,IAAI,UAAUA,gBAAAA,sBAAsB,OAAO;CAC3C,IAAI,QAAQ;CAEZ,MAAM,UAAUC,cAAAA,cAAc,IAAIC,cAAAA,0BAA0B,QAAQ;CACpE,MAAM,WAAW,UAAUC,cAAAA,YAAY,IAAI,SAAS,QAAQ,IAAI;CAEhE,OAAO;EACL,OAAO,MAAM;GACX,UAAUH,gBAAAA,sBAAsB,IAAI;EACtC;EACA,OAAO,OAAc;GACnB,IAAI,CAAC,WAAW,CAAC,UAAU;GAC3B,IAAI,CAAC,MAAM,iBAAiB,QAAQ,QAAQ,GAAG,SAAS,MAAM;GAE9D,MAAM,CAAC,OAAO,OAAO,SAASI,cAAAA,WAAW,QAAQ,SAAS;GAC1D,GAAG,WAAW,OAAO;GACrB,GAAG,UAAU,SAAS,MAAM,GAAG,oBAAoB,GAAG,mBAAmB;GACzE,GAAG,UAAU,SAAS,OAAO,QAAQC,cAAAA,YAAY,QAAQ,KAAK;GAC9D,GAAG,UAAU,SAAS,YAAY,QAAQ,SAAS;GACnD,GAAG,UAAU,SAAS,aAAa,QAAQ,UAAU;GACrD,GAAG,UAAU,SAAS,YAAY,OAAO,OAAO,KAAK;GACrD,GAAG,UAAU,SAAS,SAAS,QAAQ,MAAM;GAC7C,GAAG,UAAU,SAAS,OAAO,QAAQ,IAAI;GACzC,GAAG,UAAU,SAAS,UAAU,QAAQ,OAAO;GAC/C,GAAG,UACD,SAAS,UACT,MAAM,QAAQ,IAAI,KAAK,IAAI,GAAG,MAAM,KAAK,GACzC,MAAM,QAAQ,IAAI,KAAK,IAAI,GAAG,MAAM,MAAM,GAC1C,MAAM,gBAAgB,IAAI,QAAQ,kBAAkB,MAAM,QAAQ,SACpE;GACA,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC;EAClC;EACA,UAAU;GACR,GAAG,cAAc,OAAO;EAC1B;CACF;AACF"}

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

@@ -0,0 +1,4 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type ShimmerOptions } from './options.cjs';
+/** The exact analytic band field from the reference, running in WebGL2. */
+export declare function createShimmerWebGL(gl: WebGL2RenderingContext, initial: ShimmerOptions): StyleRenderer<ShimmerOptions>;

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

@@ -0,0 +1,4 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type ShimmerOptions } from './options.js';
+/** The exact analytic band field from the reference, running in WebGL2. */
+export declare function createShimmerWebGL(gl: WebGL2RenderingContext, initial: ShimmerOptions): StyleRenderer<ShimmerOptions>;

package/dist/styles/shimmer/webgl.js

@@ -0,0 +1,89 @@
+import { parseColor } from "../../core/color.js";
+import { FULLSCREEN_VERTEX_SHADER, createProgram, getUniforms } from "../../core/webgl.js";
+import { TIME_RATE } from "./field.js";
+import { resolveShimmerOptions } from "./options.js";
+// src/styles/shimmer/webgl.ts
+var FRAGMENT = `#version 300 es
+precision highp float;
+
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uFrequency;
+uniform float uColorScale;
+uniform vec3 uBaseColor;
+uniform float uChroma;
+uniform float uWarp;
+uniform float uOpacity;
+uniform vec3 uPointer; // x, y, strength × influence
+
+out vec4 fragColor;
+
+vec2 distort(vec2 p, float offset) {
+  p += offset;
+  for (float i = 1.0; i < 7.0; i++) {
+    p.x += uWarp * 0.3 / i * sin(i * 5.0 * p.y + uTime);
+    p.y += uWarp * 0.1 / i * cos(i * 3.0 * p.x + uTime);
+  }
+  return p;
+}
+
+void main() {
+  // gl_FragCoord is bottom-up; flip it so pointer coordinates are top-down.
+  vec2 uv = vec2(gl_FragCoord.x / uRes.x, 1.0 - gl_FragCoord.y / uRes.y);
+
+  float aspect = uRes.x / uRes.y;
+  vec2 d = (uv - uPointer.xy) * vec2(aspect, 1.0);
+  uv += vec2(d.x / aspect, d.y) * exp(-dot(d, d) / 0.03) * uPointer.z;
+
+  float r = sin(distort(uv, 0.0).x * uFrequency) * 0.5 + 0.5;
+  float g = sin(distort(uv, uChroma).x * uFrequency) * 0.5 + 0.5;
+  float b = sin(distort(uv, 2.0 * uChroma).x * uFrequency) * 0.5 + 0.5;
+  vec3 colour = pow(vec3(r, g, b), vec3(uColorScale));
+  vec3 finalColour = mix(uBaseColor, colour, 0.8);
+  fragColor = vec4(finalColour * uOpacity, uOpacity);
+}`;
+var UNIFORMS = [
+	"uRes",
+	"uTime",
+	"uFrequency",
+	"uColorScale",
+	"uBaseColor",
+	"uChroma",
+	"uWarp",
+	"uOpacity",
+	"uPointer"
+];
+/** The exact analytic band field from the reference, running in WebGL2. */
+function createShimmerWebGL(gl, initial) {
+	let options = resolveShimmerOptions(initial);
+	let clock = 0;
+	const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FRAGMENT);
+	const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;
+	return {
+		update(next) {
+			options = resolveShimmerOptions(next);
+		},
+		render(frame) {
+			if (!program || !uniforms) return;
+			if (!frame.reducedMotion && options.speed > 0) clock += frame.dt;
+			const [baseR, baseG, baseB] = parseColor(options.baseColor);
+			gl.useProgram(program);
+			gl.uniform2f(uniforms.uRes, gl.drawingBufferWidth, gl.drawingBufferHeight);
+			gl.uniform1f(uniforms.uTime, clock * TIME_RATE * options.speed);
+			gl.uniform1f(uniforms.uFrequency, options.frequency);
+			gl.uniform1f(uniforms.uColorScale, options.colorScale);
+			gl.uniform3f(uniforms.uBaseColor, baseR, baseG, baseB);
+			gl.uniform1f(uniforms.uChroma, options.chroma);
+			gl.uniform1f(uniforms.uWarp, options.warp);
+			gl.uniform1f(uniforms.uOpacity, options.opacity);
+			gl.uniform3f(uniforms.uPointer, frame.pointer.x / Math.max(1, frame.width), frame.pointer.y / Math.max(1, frame.height), frame.reducedMotion ? 0 : options.pointerStrength * frame.pointer.influence);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		},
+		destroy() {
+			gl.deleteProgram(program);
+		}
+	};
+}
+export { createShimmerWebGL };
+
+//# sourceMappingURL=webgl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.js","names":[],"sources":["../../../src/styles/shimmer/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { Frame, StyleRenderer } from '../../core/style';\nimport { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from '../../core/webgl';\nimport { TIME_RATE } from './field';\nimport { resolveShimmerOptions, type ShimmerOptions } from './options';\n\n// A faithful port of the reference's `sr-ground-canvas` shader: a pair of\n// coupled sine waves warp the UVs six times, the three channels are offset\n// slightly, and the resulting sine bands are raised to a high power.\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uFrequency;\nuniform float uColorScale;\nuniform vec3 uBaseColor;\nuniform float uChroma;\nuniform float uWarp;\nuniform float uOpacity;\nuniform vec3 uPointer; // x, y, strength × influence\n\nout vec4 fragColor;\n\nvec2 distort(vec2 p, float offset) {\n  p += offset;\n  for (float i = 1.0; i < 7.0; i++) {\n    p.x += uWarp * 0.3 / i * sin(i * 5.0 * p.y + uTime);\n    p.y += uWarp * 0.1 / i * cos(i * 3.0 * p.x + uTime);\n  }\n  return p;\n}\n\nvoid main() {\n  // gl_FragCoord is bottom-up; flip it so pointer coordinates are top-down.\n  vec2 uv = vec2(gl_FragCoord.x / uRes.x, 1.0 - gl_FragCoord.y / uRes.y);\n\n  float aspect = uRes.x / uRes.y;\n  vec2 d = (uv - uPointer.xy) * vec2(aspect, 1.0);\n  uv += vec2(d.x / aspect, d.y) * exp(-dot(d, d) / 0.03) * uPointer.z;\n\n  float r = sin(distort(uv, 0.0).x * uFrequency) * 0.5 + 0.5;\n  float g = sin(distort(uv, uChroma).x * uFrequency) * 0.5 + 0.5;\n  float b = sin(distort(uv, 2.0 * uChroma).x * uFrequency) * 0.5 + 0.5;\n  vec3 colour = pow(vec3(r, g, b), vec3(uColorScale));\n  vec3 finalColour = mix(uBaseColor, colour, 0.8);\n  fragColor = vec4(finalColour * uOpacity, uOpacity);\n}`;\n\nconst UNIFORMS = [\n  'uRes',\n  'uTime',\n  'uFrequency',\n  'uColorScale',\n  'uBaseColor',\n  'uChroma',\n  'uWarp',\n  'uOpacity',\n  'uPointer',\n] as const;\n\n/** The exact analytic band field from the reference, running in WebGL2. */\nexport function createShimmerWebGL(gl: WebGL2RenderingContext, initial: ShimmerOptions): StyleRenderer<ShimmerOptions> {\n  let options = resolveShimmerOptions(initial);\n  let clock = 0;\n\n  const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n\n  return {\n    update(next) {\n      options = resolveShimmerOptions(next);\n    },\n    render(frame: Frame) {\n      if (!program || !uniforms) return; // context lost during setup\n      if (!frame.reducedMotion && options.speed > 0) clock += frame.dt;\n\n      const [baseR, baseG, baseB] = parseColor(options.baseColor);\n      gl.useProgram(program);\n      gl.uniform2f(uniforms.uRes, gl.drawingBufferWidth, gl.drawingBufferHeight);\n      gl.uniform1f(uniforms.uTime, clock * TIME_RATE * options.speed);\n      gl.uniform1f(uniforms.uFrequency, options.frequency);\n      gl.uniform1f(uniforms.uColorScale, options.colorScale);\n      gl.uniform3f(uniforms.uBaseColor, baseR, baseG, baseB);\n      gl.uniform1f(uniforms.uChroma, options.chroma);\n      gl.uniform1f(uniforms.uWarp, options.warp);\n      gl.uniform1f(uniforms.uOpacity, options.opacity);\n      gl.uniform3f(\n        uniforms.uPointer,\n        frame.pointer.x / Math.max(1, frame.width),\n        frame.pointer.y / Math.max(1, frame.height),\n        frame.reducedMotion ? 0 : options.pointerStrength * frame.pointer.influence,\n      );\n      gl.drawArrays(gl.TRIANGLES, 0, 3);\n    },\n    destroy() {\n      gl.deleteProgram(program);\n    },\n  };\n}\n"],"mappings":";;;;;AASA,IAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCjB,IAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,mBAAmB,IAA4B,SAAwD;CACrH,IAAI,UAAU,sBAAsB,OAAO;CAC3C,IAAI,QAAQ;CAEZ,MAAM,UAAU,cAAc,IAAI,0BAA0B,QAAQ;CACpE,MAAM,WAAW,UAAU,YAAY,IAAI,SAAS,QAAQ,IAAI;CAEhE,OAAO;EACL,OAAO,MAAM;GACX,UAAU,sBAAsB,IAAI;EACtC;EACA,OAAO,OAAc;GACnB,IAAI,CAAC,WAAW,CAAC,UAAU;GAC3B,IAAI,CAAC,MAAM,iBAAiB,QAAQ,QAAQ,GAAG,SAAS,MAAM;GAE9D,MAAM,CAAC,OAAO,OAAO,SAAS,WAAW,QAAQ,SAAS;GAC1D,GAAG,WAAW,OAAO;GACrB,GAAG,UAAU,SAAS,MAAM,GAAG,oBAAoB,GAAG,mBAAmB;GACzE,GAAG,UAAU,SAAS,OAAO,QAAQ,YAAY,QAAQ,KAAK;GAC9D,GAAG,UAAU,SAAS,YAAY,QAAQ,SAAS;GACnD,GAAG,UAAU,SAAS,aAAa,QAAQ,UAAU;GACrD,GAAG,UAAU,SAAS,YAAY,OAAO,OAAO,KAAK;GACrD,GAAG,UAAU,SAAS,SAAS,QAAQ,MAAM;GAC7C,GAAG,UAAU,SAAS,OAAO,QAAQ,IAAI;GACzC,GAAG,UAAU,SAAS,UAAU,QAAQ,OAAO;GAC/C,GAAG,UACD,SAAS,UACT,MAAM,QAAQ,IAAI,KAAK,IAAI,GAAG,MAAM,KAAK,GACzC,MAAM,QAAQ,IAAI,KAAK,IAAI,GAAG,MAAM,MAAM,GAC1C,MAAM,gBAAgB,IAAI,QAAQ,kBAAkB,MAAM,QAAQ,SACpE;GACA,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC;EAClC;EACA,UAAU;GACR,GAAG,cAAc,OAAO;EAC1B;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-bg",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Lightweight, interactive animated backgrounds for websites: pick a style, drop it behind your content. WebGL with a Canvas 2D fallback, zero dependencies, import only the renderer you need.",
   "keywords": [
     "background",
@@ -10,6 +10,8 @@
     "webgl",
     "topographic",
     "contour",
+    "fluid",
+    "shimmer",
     "hero",
     "generative"
   ],
@@ -50,6 +52,18 @@
       ],
       "plus/*": [
         "./dist/plus/*.d.ts"
+      ],
+      "fluid": [
+        "./dist/fluid/index.d.ts"
+      ],
+      "fluid/*": [
+        "./dist/fluid/*.d.ts"
+      ],
+      "shimmer": [
+        "./dist/shimmer/index.d.ts"
+      ],
+      "shimmer/*": [
+        "./dist/shimmer/*.d.ts"
       ]
     }
   },
@@ -156,6 +170,66 @@
         "default": "./dist/plus/canvas2d.cjs"
       }
     },
+    "./fluid": {
+      "import": {
+        "types": "./dist/fluid/index.d.ts",
+        "default": "./dist/fluid/index.js"
+      },
+      "require": {
+        "types": "./dist/fluid/index.d.cts",
+        "default": "./dist/fluid/index.cjs"
+      }
+    },
+    "./fluid/webgl": {
+      "import": {
+        "types": "./dist/fluid/webgl.d.ts",
+        "default": "./dist/fluid/webgl.js"
+      },
+      "require": {
+        "types": "./dist/fluid/webgl.d.cts",
+        "default": "./dist/fluid/webgl.cjs"
+      }
+    },
+    "./fluid/canvas2d": {
+      "import": {
+        "types": "./dist/fluid/canvas2d.d.ts",
+        "default": "./dist/fluid/canvas2d.js"
+      },
+      "require": {
+        "types": "./dist/fluid/canvas2d.d.cts",
+        "default": "./dist/fluid/canvas2d.cjs"
+      }
+    },
+    "./shimmer": {
+      "import": {
+        "types": "./dist/shimmer/index.d.ts",
+        "default": "./dist/shimmer/index.js"
+      },
+      "require": {
+        "types": "./dist/shimmer/index.d.cts",
+        "default": "./dist/shimmer/index.cjs"
+      }
+    },
+    "./shimmer/webgl": {
+      "import": {
+        "types": "./dist/shimmer/webgl.d.ts",
+        "default": "./dist/shimmer/webgl.js"
+      },
+      "require": {
+        "types": "./dist/shimmer/webgl.d.cts",
+        "default": "./dist/shimmer/webgl.cjs"
+      }
+    },
+    "./shimmer/canvas2d": {
+      "import": {
+        "types": "./dist/shimmer/canvas2d.d.ts",
+        "default": "./dist/shimmer/canvas2d.js"
+      },
+      "require": {
+        "types": "./dist/shimmer/canvas2d.d.cts",
+        "default": "./dist/shimmer/canvas2d.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {