		@@ -1,78 +0,5 @@
		// Generated by dts-bundle-generator v9.5.1

		export declare class ShaderMount {
		private canvas;
		private gl;
		private program;
		private uniformLocations;
		/** The fragment shader that we are using */
		private fragmentShader;
		/** Stores the RAF for the render loop */
		private rafId;
		/** Time of the last rendered frame */
		private lastFrameTime;
		/** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
		private totalAnimationTime;
		/** Whether we RAF the render or not */
		private isAnimated;
		/** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
		private providedUniforms;
		/** Just a sanity check to make sure frames don't run after we're disposed */
		private hasBeenDisposed;
		/** If the resolution of the canvas has changed since the last render */
		private resolutionChanged;
		constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: Record<string, number \| number[]>, webGlContextAttributes?: WebGLContextAttributes, animated?: boolean);
		private initWebGL;
		private setupPositionAttribute;
		private setupUniforms;
		private resizeObserver;
		private setupResizeObserver;
		private handleResize;
		private render;
		private requestRender;
		private updateProvidedUniforms;
		/** Start the animation loop, can be called during instantiation or later by an outside source */
		startAnimating: () => void;
		/** Stop the animation loop */
		stopAnimating: () => void;
		/** Update the uniforms that are provided by the outside shader */
		setUniforms: (newUniforms: Record<string, number \| number[]>) => void;
		/** Dispose of the shader mount, cleaning up all of the WebGL resources */
		dispose: () => void;
		}
		/** Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */
		export declare function getShaderColorFromString(colorString: string): [
		number,
		number,
		number
		];
		export type GrainCloudsUniforms = {
		u_color1: [
		number,
		number,
		number
		];
		u_color2: [
		number,
		number,
		number
		];
		u_noiseScale: number;
		u_noiseSpeed: number;
		u_grainAmount: number;
		};
		/**
		* Renders a grainy texture over top of blobby animated clouds
		* This is an example shader that we're using to bootstrap the project
		* Generated by Claude 3.5 Sonnet
		*
		* Uniforms include:
		* u_color1: The first color of the clouds
		* u_color2: The second color of the clouds
		* u_noiseScale: The scale of the noise
		* u_noiseSpeed: The speed of the noise
		* u_grainAmount: The amount of grain on the texture
		*/
		export declare const grainCloudsFragmentShader = "\n precision highp float;\n uniform vec2 u_resolution;\n uniform float u_time;\n uniform vec3 u_color1;\n uniform vec3 u_color2;\n uniform float u_noiseScale;\n uniform float u_noiseSpeed;\n uniform float u_grainAmount;\n\n // Simplex 2D noise\n vec3 permute(vec3 x) { return mod(((x34.0)+1.0)x, 289.0); }\n\n float snoise(vec2 v) {\n const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439);\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod(i, 289.0);\n vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0));\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),\n dot(x12.zw,x12.zw)), 0.0);\n m = mm ;\n m = mm ;\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m = 1.79284291400159 - 0.85373472095314 (a0a0 + hh);\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n }\n\n void main() {\n vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n // Calculate the aspect ratio of the shader\n float shaderAspect = u_resolution.x / u_resolution.y;\n\n // Define the aspect ratio of your content (e.g., 1.0 for square)\n float contentAspect = 1.0;\n\n // Adjust st to maintain content aspect ratio\n if (shaderAspect > contentAspect) {\n float scale = shaderAspect / contentAspect;\n st.x = (st.x - 0.5) * scale + 0.5;\n } else {\n float scale = contentAspect / shaderAspect;\n st.y = (st.y - 0.5) * scale + 0.5;\n }\n\n // Create blobby texture\n float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);\n n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);\n n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);\n n = n * 0.5 + 0.5;\n\n // Color interpolation\n vec3 color = mix(u_color1, u_color2, n);\n\n // Add grain\n float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n color += (grain - 0.5) * u_grainAmount;\n\n gl_FragColor = vec4(color, 1.0);\n }\n";

		export {};
		/** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
		export { ShaderMount } from './shader-mount';
		/** An example fragment shader that renders a grainy texture over top of blobby animated clouds */
		export { grainCloudsFragmentShader, type GrainCloudsUniforms, } from './shaders/grain-clouds';
		export { getShaderColorFromString } from './shader-mount';

package.json

		{
		"name": "@paper-design/shaders",
		"version": "0.0.9",
		"version": "0.0.10",
		"license": "MIT",
		@@ -9,2 +9,5 @@ "type": "module",
		},
		"main": "./dist/index.js",
		"module": "./dist/index.js",
		"types": "./dist/index.d.ts",
		"exports": {
		@@ -11,0 +14,0 @@ ".": {

@paper-design/shaders - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics