shader-bg 0.0.1 → 0.0.2

package/dist/ShaderBg.d.ts

@@ -1,8 +1,8 @@
-import { Target } from './utils/Target.ts';
-import { OptionsInput } from './utils/Options.ts';
-import { GlProgram } from './GlProgram.ts';
-import { UniformManager } from './UniformManager.ts';
-import { Renderer } from './Renderer.ts';
+import { Target } from './utils/Target';
+import { OptionsInput } from './utils/Options';
+import { GlProgram } from './GlProgram';
+import { UniformManager } from './UniformManager';
+import { Renderer } from './Renderer';
 export declare class ShaderBg {
     canvas: HTMLCanvasElement;
     private ownsCanvas;

package/dist/index.d.ts

@@ -1 +1,3 @@
-export {};
+export { ShaderBg } from './ShaderBg';
+export type { OptionsInput, BackbufferOptionsInput, UniformValue, UniformValueSetter, } from './utils/Options';
+export type { Target } from './utils/Target';

package/dist/shader-bg.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){if(typeof e==`string`){let t=document.querySelector(e);if(!t)throw Error(`Target element not found: ${e}`);return t}else if(e instanceof HTMLElement)return e;else if(e instanceof Element)return e;else throw Error(`Invalid target type`)}var t={vertexShader:`attribute vec2 position;
+void main() {
+    gl_Position = vec4(position, 0.0, 1.0);
+}`,fragmentShader:`precision mediump float;
+
+void main() {
+    gl_FragColor = vec4(1.0,.0,.0, 1.0);
+}`,canvas:{class:``,style:document.createElement(`canvas`).style},uniforms:{},backbuffer:{enabled:!1,uniformName:`u_backbuffer`}};function n(e={}){let n=e.backbuffer,r=typeof n==`boolean`?n:n?.enabled??t.backbuffer.enabled;return{vertexShader:e.vertexShader??t.vertexShader,fragmentShader:e.fragmentShader??t.fragmentShader,canvas:{class:e.canvas?.class??t.canvas.class,id:e.canvas?.id??t.canvas.id,style:{...t.canvas.style,...e.canvas?.style}},uniforms:{...t.uniforms,...e.uniforms},backbuffer:{enabled:r,uniformName:typeof n==`object`?n.uniformName??t.backbuffer.uniformName:t.backbuffer.uniformName}}}var r=class{gl;program;vertexShader;fragmentShader;constructor(e,t,n){this.gl=e,this.vertexShader=this.compile(e.VERTEX_SHADER,t),this.fragmentShader=this.compile(e.FRAGMENT_SHADER,n);let r=e.createProgram();if(!r)throw Error(`Failed to create WebGL program`);if(e.attachShader(r,this.vertexShader),e.attachShader(r,this.fragmentShader),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){let t=e.getProgramInfoLog(r);throw Error(`Program linking failed:
+`+t)}this.program=r}compile(e,t){let n=this.gl.createShader(e);if(!n)throw Error(`Failed to create shader`);if(this.gl.shaderSource(n,t),this.gl.compileShader(n),!this.gl.getShaderParameter(n,this.gl.COMPILE_STATUS)){let t=this.gl.getShaderInfoLog(n),r=e===this.gl.VERTEX_SHADER?`Vertex`:`Fragment`;throw Error(`${r} shader compilation failed:\n${t}`)}return n}use(){this.gl.useProgram(this.program)}dispose(){this.gl.deleteShader(this.vertexShader),this.gl.deleteShader(this.fragmentShader),this.gl.deleteProgram(this.program)}},i=class{gl;program;locations={};textureUnits={};nextTextureUnit=0;maxTextureUnits;constructor(e,t){this.gl=e,this.program=t,this.maxTextureUnits=e.getParameter(e.MAX_COMBINED_TEXTURE_IMAGE_UNITS)}getTextureUnit(e){let t=this.textureUnits[e];if(t!==void 0)return t;if(this.nextTextureUnit>=this.maxTextureUnits)throw Error(`Too many texture uniforms. Max supported is ${this.maxTextureUnits}.`);let n=this.nextTextureUnit;return this.textureUnits[e]=n,this.nextTextureUnit+=1,n}getLocation(e){let t=this.locations[e];if(!t){let n=this.gl.getUniformLocation(this.program,e);if(!n)return null;this.locations[e]=n,t=n}return t}set(e,t){let n=this.getLocation(e);if(typeof t==`number`){this.gl.uniform1f(n,t);return}if(Array.isArray(t)){switch(t.length){case 1:this.gl.uniform1f(n,t[0]);break;case 2:this.gl.uniform2fv(n,t);break;case 3:this.gl.uniform3fv(n,t);break;case 4:this.gl.uniform4fv(n,t);break;case 9:this.gl.uniformMatrix3fv(n,!1,t);break;case 16:this.gl.uniformMatrix4fv(n,!1,t);break;default:throw Error(`Unsupported uniform array length: ${t.length}`)}return}if(t instanceof WebGLTexture){let r=this.getTextureUnit(e);this.gl.activeTexture(this.gl.TEXTURE0+r),this.gl.bindTexture(this.gl.TEXTURE_2D,t),this.gl.uniform1i(n,r);return}throw Error(`Unsupported uniform value type`)}clear(){this.locations={},this.textureUnits={},this.nextTextureUnit=0}},a=class{gl;program;rafId=null;uniformsUpdate;afterRender;constructor(e,t,n,r){this.gl=e,this.program=t,this.uniformsUpdate=n,this.afterRender=r,this.setupBuffer()}setupBuffer(){let e=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,e),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),this.gl.STATIC_DRAW);let t=this.gl.getAttribLocation(this.program,`position`);this.gl.enableVertexAttribArray(t),this.gl.vertexAttribPointer(t,2,this.gl.FLOAT,!1,0,0)}render=()=>{this.uniformsUpdate&&this.uniformsUpdate(),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.afterRender&&this.afterRender(),this.rafId=requestAnimationFrame(this.render)};start(){this.rafId||=requestAnimationFrame(this.render)}stop(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}},o=class e{canvas;static observer;static observerMap=new WeakMap;constructor(t,n){e.observer||e.init(),e.observerMap.set(t,n),e.observer.observe(t),this.canvas=t}static init(){this.observer=new ResizeObserver(e=>{for(let t of e){if(!this.observerMap.has(t.target))continue;let e=this.observerMap.get(t.target);e&&e()}})}dispose(){e.observer.unobserve(this.canvas)}},s=class{gl;canvas;texture;enabled=!1;constructor(e,t,n){this.gl=e,this.canvas=t,this.enabled=n}init(){if(!this.enabled)return;let e=this.gl.createTexture();if(!e)throw Error(`Failed to create backbuffer texture`);this.texture=e,this.gl.bindTexture(this.gl.TEXTURE_2D,e),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE)}resize(){this.enabled&&this.texture&&(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,Math.max(1,this.canvas.width),Math.max(1,this.canvas.height),0,this.gl.RGBA,this.gl.UNSIGNED_BYTE,null))}capture(){this.enabled&&(!this.texture||this.canvas.width===0||this.canvas.height===0||(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.copyTexSubImage2D(this.gl.TEXTURE_2D,0,0,0,0,0,this.canvas.width,this.canvas.height)))}dispose(){this.enabled&&this.texture&&this.gl.deleteTexture(this.texture)}},c=class{canvas;ownsCanvas=!1;options;gl;program;uniforms;renderer;resizeManager;backBufferManager;mousePos=[0,0];startTime=performance.now();setup_canvas(e){e instanceof HTMLCanvasElement?(this.canvas=e,this.ownsCanvas=!1):(this.canvas=document.createElement(`canvas`),e.appendChild(this.canvas),this.ownsCanvas=!0);let t=this.canvas.getAttribute(`class`)||``;this.canvas.setAttribute(`class`,`${t} ${this.options.canvas.class}`.trim()),this.options.canvas.id&&this.canvas.setAttribute(`id`,this.options.canvas.id),this.canvas.style={...this.canvas.style,...this.options.canvas.style}}constructor(t,c){this.options=n(c);let l=e(t);if(!l)throw Error(`Target element not found: ${t}`);this.setup_canvas(l);let u=this.canvas.getContext(`webgl`);if(!u)throw Error(`WebGL not supported`);this.gl=u,this.program=new r(this.gl,this.options.vertexShader,this.options.fragmentShader),this.program.use(),this.uniforms=new i(this.gl,this.program.program),this.renderer=new a(this.gl,this.program.program,()=>this.updateCommonUniforms(),()=>this.backBufferManager.capture()),this.resizeManager=new o(this.canvas,()=>this.resize()),this.backBufferManager=new s(this.gl,this.canvas,this.options.backbuffer.enabled),this.backBufferManager.init(),this.canvas.addEventListener(`pointermove`,this.mouse_move.bind(this))}mouse_move(e){let t=this.canvas.getBoundingClientRect();this.mousePos=[(e.clientX-t.left)/t.width,1-(e.clientY-t.top)/t.height]}updateCommonUniforms(){let e=(performance.now()-this.startTime)/1e3,t=this.canvas.width,n=this.canvas.height;this.uniforms.set(`u_time`,e),this.uniforms.set(`u_resolution`,[t,n]),this.uniforms.set(`u_mouse`,this.mousePos),this.uniforms.set(`u_scroll`,[window.scrollX/(document.documentElement.scrollWidth-window.innerWidth),window.scrollY/(document.documentElement.scrollTop-window.innerHeight)]),this.backBufferManager.enabled&&this.uniforms.set(this.options.backbuffer.uniformName,this.backBufferManager.texture);for(let[e,t]of Object.entries(this.options.uniforms)){let n=t;typeof t==`function`&&(n=t()),this.uniforms.set(e,n)}}start(){this.resize(),this.renderer.start()}stop(){this.renderer.stop()}resize(){this.canvas.width=this.canvas.clientWidth,this.canvas.height=this.canvas.clientHeight,this.gl.viewport(0,0,this.canvas.width,this.canvas.height),this.backBufferManager.resize()}dispose(){this.stop(),this.program.dispose(),this.uniforms.clear(),this.resizeManager.dispose(),this.backBufferManager.dispose(),this.canvas.removeEventListener(`pointermove`,this.mouse_move.bind(this)),this.ownsCanvas&&this.canvas.remove()}};exports.ShaderBg=c;

package/dist/shader-bg.js

@@ -0,0 +1,281 @@
+//#region src/utils/Target.ts
+function e(e) {
+	if (typeof e == "string") {
+		let t = document.querySelector(e);
+		if (!t) throw Error(`Target element not found: ${e}`);
+		return t;
+	} else if (e instanceof HTMLElement) return e;
+	else if (e instanceof Element) return e;
+	else throw Error("Invalid target type");
+}
+//#endregion
+//#region src/utils/Options.ts
+var t = {
+	vertexShader: "attribute vec2 position;\nvoid main() {\n    gl_Position = vec4(position, 0.0, 1.0);\n}",
+	fragmentShader: "precision mediump float;\n\nvoid main() {\n    gl_FragColor = vec4(1.0,.0,.0, 1.0);\n}",
+	canvas: {
+		class: "",
+		style: document.createElement("canvas").style
+	},
+	uniforms: {},
+	backbuffer: {
+		enabled: !1,
+		uniformName: "u_backbuffer"
+	}
+};
+function n(e = {}) {
+	let n = e.backbuffer, r = typeof n == "boolean" ? n : n?.enabled ?? t.backbuffer.enabled;
+	return {
+		vertexShader: e.vertexShader ?? t.vertexShader,
+		fragmentShader: e.fragmentShader ?? t.fragmentShader,
+		canvas: {
+			class: e.canvas?.class ?? t.canvas.class,
+			id: e.canvas?.id ?? t.canvas.id,
+			style: {
+				...t.canvas.style,
+				...e.canvas?.style
+			}
+		},
+		uniforms: {
+			...t.uniforms,
+			...e.uniforms
+		},
+		backbuffer: {
+			enabled: r,
+			uniformName: typeof n == "object" ? n.uniformName ?? t.backbuffer.uniformName : t.backbuffer.uniformName
+		}
+	};
+}
+//#endregion
+//#region src/GlProgram.ts
+var r = class {
+	gl;
+	program;
+	vertexShader;
+	fragmentShader;
+	constructor(e, t, n) {
+		this.gl = e, this.vertexShader = this.compile(e.VERTEX_SHADER, t), this.fragmentShader = this.compile(e.FRAGMENT_SHADER, n);
+		let r = e.createProgram();
+		if (!r) throw Error("Failed to create WebGL program");
+		if (e.attachShader(r, this.vertexShader), e.attachShader(r, this.fragmentShader), e.linkProgram(r), !e.getProgramParameter(r, e.LINK_STATUS)) {
+			let t = e.getProgramInfoLog(r);
+			throw Error("Program linking failed:\n" + t);
+		}
+		this.program = r;
+	}
+	compile(e, t) {
+		let n = this.gl.createShader(e);
+		if (!n) throw Error("Failed to create shader");
+		if (this.gl.shaderSource(n, t), this.gl.compileShader(n), !this.gl.getShaderParameter(n, this.gl.COMPILE_STATUS)) {
+			let t = this.gl.getShaderInfoLog(n), r = e === this.gl.VERTEX_SHADER ? "Vertex" : "Fragment";
+			throw Error(`${r} shader compilation failed:\n${t}`);
+		}
+		return n;
+	}
+	use() {
+		this.gl.useProgram(this.program);
+	}
+	dispose() {
+		this.gl.deleteShader(this.vertexShader), this.gl.deleteShader(this.fragmentShader), this.gl.deleteProgram(this.program);
+	}
+}, i = class {
+	gl;
+	program;
+	locations = {};
+	textureUnits = {};
+	nextTextureUnit = 0;
+	maxTextureUnits;
+	constructor(e, t) {
+		this.gl = e, this.program = t, this.maxTextureUnits = e.getParameter(e.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+	}
+	getTextureUnit(e) {
+		let t = this.textureUnits[e];
+		if (t !== void 0) return t;
+		if (this.nextTextureUnit >= this.maxTextureUnits) throw Error(`Too many texture uniforms. Max supported is ${this.maxTextureUnits}.`);
+		let n = this.nextTextureUnit;
+		return this.textureUnits[e] = n, this.nextTextureUnit += 1, n;
+	}
+	getLocation(e) {
+		let t = this.locations[e];
+		if (!t) {
+			let n = this.gl.getUniformLocation(this.program, e);
+			if (!n) return null;
+			this.locations[e] = n, t = n;
+		}
+		return t;
+	}
+	set(e, t) {
+		let n = this.getLocation(e);
+		if (typeof t == "number") {
+			this.gl.uniform1f(n, t);
+			return;
+		}
+		if (Array.isArray(t)) {
+			switch (t.length) {
+				case 1:
+					this.gl.uniform1f(n, t[0]);
+					break;
+				case 2:
+					this.gl.uniform2fv(n, t);
+					break;
+				case 3:
+					this.gl.uniform3fv(n, t);
+					break;
+				case 4:
+					this.gl.uniform4fv(n, t);
+					break;
+				case 9:
+					this.gl.uniformMatrix3fv(n, !1, t);
+					break;
+				case 16:
+					this.gl.uniformMatrix4fv(n, !1, t);
+					break;
+				default: throw Error(`Unsupported uniform array length: ${t.length}`);
+			}
+			return;
+		}
+		if (t instanceof WebGLTexture) {
+			let r = this.getTextureUnit(e);
+			this.gl.activeTexture(this.gl.TEXTURE0 + r), this.gl.bindTexture(this.gl.TEXTURE_2D, t), this.gl.uniform1i(n, r);
+			return;
+		}
+		throw Error("Unsupported uniform value type");
+	}
+	clear() {
+		this.locations = {}, this.textureUnits = {}, this.nextTextureUnit = 0;
+	}
+}, a = class {
+	gl;
+	program;
+	rafId = null;
+	uniformsUpdate;
+	afterRender;
+	constructor(e, t, n, r) {
+		this.gl = e, this.program = t, this.uniformsUpdate = n, this.afterRender = r, this.setupBuffer();
+	}
+	setupBuffer() {
+		let e = this.gl.createBuffer();
+		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, e), this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			-1,
+			1,
+			1,
+			-1,
+			1,
+			1
+		]), this.gl.STATIC_DRAW);
+		let t = this.gl.getAttribLocation(this.program, "position");
+		this.gl.enableVertexAttribArray(t), this.gl.vertexAttribPointer(t, 2, this.gl.FLOAT, !1, 0, 0);
+	}
+	render = () => {
+		this.uniformsUpdate && this.uniformsUpdate(), this.gl.clear(this.gl.COLOR_BUFFER_BIT), this.gl.drawArrays(this.gl.TRIANGLES, 0, 6), this.afterRender && this.afterRender(), this.rafId = requestAnimationFrame(this.render);
+	};
+	start() {
+		this.rafId ||= requestAnimationFrame(this.render);
+	}
+	stop() {
+		this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
+	}
+}, o = class e {
+	canvas;
+	static observer;
+	static observerMap = /* @__PURE__ */ new WeakMap();
+	constructor(t, n) {
+		e.observer || e.init(), e.observerMap.set(t, n), e.observer.observe(t), this.canvas = t;
+	}
+	static init() {
+		this.observer = new ResizeObserver((e) => {
+			for (let t of e) {
+				if (!this.observerMap.has(t.target)) continue;
+				let e = this.observerMap.get(t.target);
+				e && e();
+			}
+		});
+	}
+	dispose() {
+		e.observer.unobserve(this.canvas);
+	}
+}, s = class {
+	gl;
+	canvas;
+	texture;
+	enabled = !1;
+	constructor(e, t, n) {
+		this.gl = e, this.canvas = t, this.enabled = n;
+	}
+	init() {
+		if (!this.enabled) return;
+		let e = this.gl.createTexture();
+		if (!e) throw Error("Failed to create backbuffer texture");
+		this.texture = e, this.gl.bindTexture(this.gl.TEXTURE_2D, e), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+	}
+	resize() {
+		this.enabled && this.texture && (this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, Math.max(1, this.canvas.width), Math.max(1, this.canvas.height), 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null));
+	}
+	capture() {
+		this.enabled && (!this.texture || this.canvas.width === 0 || this.canvas.height === 0 || (this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture), this.gl.copyTexSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, 0, 0, this.canvas.width, this.canvas.height)));
+	}
+	dispose() {
+		this.enabled && this.texture && this.gl.deleteTexture(this.texture);
+	}
+}, c = class {
+	canvas;
+	ownsCanvas = !1;
+	options;
+	gl;
+	program;
+	uniforms;
+	renderer;
+	resizeManager;
+	backBufferManager;
+	mousePos = [0, 0];
+	startTime = performance.now();
+	setup_canvas(e) {
+		e instanceof HTMLCanvasElement ? (this.canvas = e, this.ownsCanvas = !1) : (this.canvas = document.createElement("canvas"), e.appendChild(this.canvas), this.ownsCanvas = !0);
+		let t = this.canvas.getAttribute("class") || "";
+		this.canvas.setAttribute("class", `${t} ${this.options.canvas.class}`.trim()), this.options.canvas.id && this.canvas.setAttribute("id", this.options.canvas.id), this.canvas.style = {
+			...this.canvas.style,
+			...this.options.canvas.style
+		};
+	}
+	constructor(t, c) {
+		this.options = n(c);
+		let l = e(t);
+		if (!l) throw Error(`Target element not found: ${t}`);
+		this.setup_canvas(l);
+		let u = this.canvas.getContext("webgl");
+		if (!u) throw Error("WebGL not supported");
+		this.gl = u, this.program = new r(this.gl, this.options.vertexShader, this.options.fragmentShader), this.program.use(), this.uniforms = new i(this.gl, this.program.program), this.renderer = new a(this.gl, this.program.program, () => this.updateCommonUniforms(), () => this.backBufferManager.capture()), this.resizeManager = new o(this.canvas, () => this.resize()), this.backBufferManager = new s(this.gl, this.canvas, this.options.backbuffer.enabled), this.backBufferManager.init(), this.canvas.addEventListener("pointermove", this.mouse_move.bind(this));
+	}
+	mouse_move(e) {
+		let t = this.canvas.getBoundingClientRect();
+		this.mousePos = [(e.clientX - t.left) / t.width, 1 - (e.clientY - t.top) / t.height];
+	}
+	updateCommonUniforms() {
+		let e = (performance.now() - this.startTime) / 1e3, t = this.canvas.width, n = this.canvas.height;
+		this.uniforms.set("u_time", e), this.uniforms.set("u_resolution", [t, n]), this.uniforms.set("u_mouse", this.mousePos), this.uniforms.set("u_scroll", [window.scrollX / (document.documentElement.scrollWidth - window.innerWidth), window.scrollY / (document.documentElement.scrollTop - window.innerHeight)]), this.backBufferManager.enabled && this.uniforms.set(this.options.backbuffer.uniformName, this.backBufferManager.texture);
+		for (let [e, t] of Object.entries(this.options.uniforms)) {
+			let n = t;
+			typeof t == "function" && (n = t()), this.uniforms.set(e, n);
+		}
+	}
+	start() {
+		this.resize(), this.renderer.start();
+	}
+	stop() {
+		this.renderer.stop();
+	}
+	resize() {
+		this.canvas.width = this.canvas.clientWidth, this.canvas.height = this.canvas.clientHeight, this.gl.viewport(0, 0, this.canvas.width, this.canvas.height), this.backBufferManager.resize();
+	}
+	dispose() {
+		this.stop(), this.program.dispose(), this.uniforms.clear(), this.resizeManager.dispose(), this.backBufferManager.dispose(), this.canvas.removeEventListener("pointermove", this.mouse_move.bind(this)), this.ownsCanvas && this.canvas.remove();
+	}
+};
+//#endregion
+export { c as ShaderBg };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "shader-bg",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "./dist/shader-bg.cjs",
   "module": "./dist/shader-bg.js",
-  "types": "./dist/shader-bg.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/shader-bg.js",
       "require": "./dist/shader-bg.cjs",
-      "types": "./dist/shader-bg.d.ts"
+      "types": "./dist/index.d.ts"
     }
   },
   "files": [