@paper-design/shaders 0.0.1 → 0.0.2

package/{src/index.ts → dist/index.d.ts}

@@ -1,5 +1,4 @@
 /** 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 } from './shaders/grain-clouds';

package/dist/index.js

@@ -0,0 +1,80 @@
+var o=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(r,e,i={},n,s=!0){this.canvas=r,this.fragmentShader=e,this.providedUniforms=i,this.isAnimated=s;let a=r.getContext("webgl",n);if(!a)throw new Error("WebGL not supported");this.gl=a,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let r=m(this.gl,u,this.fragmentShader);r&&(this.program=r,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let r=this.gl.getAttribLocation(this.program,"a_position"),e=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,e);let i=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(i),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(r),this.gl.vertexAttribPointer(r,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(r=>[r,this.gl.getUniformLocation(this.program,r)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let r=this.canvas.clientWidth,e=this.canvas.clientHeight;(this.canvas.width!==r||this.canvas.height!==e)&&(this.canvas.width=r,this.canvas.height=e,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=r=>{if(this.hasBeenDisposed)return;let e=r-this.lastFrameTime;this.lastFrameTime=r,this.isAnimated&&(this.totalAnimationTime+=e),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([r,e])=>{let i=this.uniformLocations[r];if(i)if(Array.isArray(e))switch(e.length){case 2:this.gl.uniform2fv(i,e);break;case 3:this.gl.uniform3fv(i,e);break;case 4:this.gl.uniform4fv(i,e);break;default:e.length===9?this.gl.uniformMatrix3fv(i,!1,e):e.length===16?this.gl.uniformMatrix4fv(i,!1,e):console.warn(`Unsupported uniform array length: ${e.length}`)}else typeof e=="number"?this.gl.uniform1f(i,e):typeof e=="boolean"?this.gl.uniform1i(i,e?1:0):console.warn(`Unsupported uniform type for ${r}: ${typeof e}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=r=>{this.providedUniforms={...this.providedUniforms,...r},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},u=`
+  attribute vec4 a_position;
+  void main() {
+    gl_Position = a_position;
+  }
+`;function h(t,r,e){let i=t.createShader(r);return i?(t.shaderSource(i,e),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+t.getShaderInfoLog(i)),t.deleteShader(i),null)):null}function m(t,r,e){let i=h(t,t.VERTEX_SHADER,r),n=h(t,t.FRAGMENT_SHADER,e);if(!i||!n)return null;let s=t.createProgram();return s?(t.attachShader(s,i),t.attachShader(s,n),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)?(t.detachShader(s,i),t.detachShader(s,n),t.deleteShader(i),t.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+t.getProgramInfoLog(s)),t.deleteProgram(s),t.deleteShader(i),t.deleteShader(n),null)):null}var l=`
+  precision highp float;
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform vec3 u_color1;
+  uniform vec3 u_color2;
+  uniform float u_noiseScale;
+  uniform float u_noiseSpeed;
+  uniform float u_grainAmount;
+
+  // Simplex 2D noise
+  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+
+  float snoise(vec2 v) {
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+                        -0.577350269189626, 0.024390243902439);
+    vec2 i  = floor(v + dot(v, C.yy));
+    vec2 x0 = v -   i + dot(i, C.xx);
+    vec2 i1;
+    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+    i = mod(i, 289.0);
+    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0));
+    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
+      dot(x12.zw,x12.zw)), 0.0);
+    m = m*m ;
+    m = m*m ;
+    vec3 x = 2.0 * fract(p * C.www) - 1.0;
+    vec3 h = abs(x) - 0.5;
+    vec3 ox = floor(x + 0.5);
+    vec3 a0 = x - ox;
+    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+    vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130.0 * dot(m, g);
+  }
+
+  void main() {
+    vec2 st = gl_FragCoord.xy / u_resolution.xy;
+
+    // Calculate the aspect ratio of the shader
+    float shaderAspect = u_resolution.x / u_resolution.y;
+
+    // Define the aspect ratio of your content (e.g., 1.0 for square)
+    float contentAspect = 1.0;
+
+    // Adjust st to maintain content aspect ratio
+    if (shaderAspect > contentAspect) {
+      float scale = shaderAspect / contentAspect;
+      st.x = (st.x - 0.5) * scale + 0.5;
+    } else {
+      float scale = contentAspect / shaderAspect;
+      st.y = (st.y - 0.5) * scale + 0.5;
+    }
+
+    // Create blobby texture
+    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);
+    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);
+    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);
+    n = n * 0.5 + 0.5;
+
+    // Color interpolation
+    vec3 color = mix(u_color1, u_color2, n);
+
+    // Add grain
+    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);
+    color += (grain - 0.5) * u_grainAmount;
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;export{o as ShaderMount,l as grainCloudsFragmentShader};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shader-mount.ts", "../src/shaders/grain-clouds.ts"],
+  "sourcesContent": ["export class ShaderMount {\n  private canvas: HTMLCanvasElement;\n  private gl: WebGLRenderingContext;\n  private program: WebGLProgram | null = null;\n  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};\n  /** The fragment shader that we are using */\n  private fragmentShader: string;\n  /** Stores the RAF for the render loop */\n  private rafId: number | null = null;\n  /** Time of the last rendered frame */\n  private lastFrameTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private totalAnimationTime = 0;\n  /** Whether we RAF the render or not */\n  private isAnimated: boolean;\n  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */\n  private providedUniforms: Record<string, number | number[]>;\n  /** Just a sanity check to make sure frames don't run after we're disposed */\n  private hasBeenDisposed = false;\n  /** If the resolution of the canvas has changed since the last render */\n  private resolutionChanged = true;\n\n  constructor(\n    canvas: HTMLCanvasElement,\n    fragmentShader: string,\n    uniforms: Record<string, number | number[]> = {},\n    webGlContextAttributes?: WebGLContextAttributes,\n    animated = true\n  ) {\n    this.canvas = canvas;\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    this.isAnimated = animated;\n\n    const gl = canvas.getContext('webgl', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('WebGL not supported');\n    }\n    this.gl = gl;\n\n    this.initWebGL();\n    this.setupResizeObserver();\n    if (this.isAnimated) {\n      this.startAnimating();\n    } else {\n      this.render(performance.now());\n    }\n  }\n\n  private initWebGL = () => {\n    const program = createProgram(\n      this.gl,\n      vertexShaderSource,\n      this.fragmentShader\n    );\n    if (!program) return;\n    this.program = program;\n\n    this.setupPositionAttribute();\n    this.setupUniforms();\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(\n      this.program!,\n      'a_position'\n    );\n    const positionBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);\n    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];\n    this.gl.bufferData(\n      this.gl.ARRAY_BUFFER,\n      new Float32Array(positions),\n      this.gl.STATIC_DRAW\n    );\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(\n      positionAttributeLocation,\n      2,\n      this.gl.FLOAT,\n      false,\n      0,\n      0\n    );\n  };\n\n  private setupUniforms = () => {\n    this.uniformLocations = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n      ...Object.fromEntries(\n        Object.keys(this.providedUniforms).map((key) => [\n          key,\n          this.gl.getUniformLocation(this.program!, key),\n        ])\n      ),\n    };\n  };\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => this.handleResize());\n    this.resizeObserver.observe(this.canvas);\n    this.handleResize();\n  };\n\n  private handleResize = () => {\n    const newWidth = this.canvas.clientWidth;\n    const newHeight = this.canvas.clientHeight;\n    if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {\n      this.canvas.width = newWidth;\n      this.canvas.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n      this.render(performance.now());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    const dt = currentTime - this.lastFrameTime;\n    this.lastFrameTime = currentTime;\n\n    if (this.isAnimated) {\n      this.totalAnimationTime += dt;\n    }\n\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(\n      this.uniformLocations.u_time!,\n      this.totalAnimationTime * 0.001\n    );\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(\n        this.uniformLocations.u_resolution!,\n        this.gl.canvas.width,\n        this.gl.canvas.height\n      );\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n\n    if (this.isAnimated) {\n      this.requestRender();\n    } else {\n      this.rafId = null;\n    }\n  };\n\n  private requestRender = () => {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  private updateProvidedUniforms = () => {\n    this.gl.useProgram(this.program);\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      const location = this.uniformLocations[key];\n      if (location) {\n        if (Array.isArray(value)) {\n          switch (value.length) {\n            case 2:\n              this.gl.uniform2fv(location, value);\n              break;\n            case 3:\n              this.gl.uniform3fv(location, value);\n              break;\n            case 4:\n              this.gl.uniform4fv(location, value);\n              break;\n            default:\n              if (value.length === 9) {\n                this.gl.uniformMatrix3fv(location, false, value);\n              } else if (value.length === 16) {\n                this.gl.uniformMatrix4fv(location, false, value);\n              } else {\n                console.warn(\n                  `Unsupported uniform array length: ${value.length}`\n                );\n              }\n          }\n        } else if (typeof value === 'number') {\n          this.gl.uniform1f(location, value);\n        } else if (typeof value === 'boolean') {\n          this.gl.uniform1i(location, value ? 1 : 0);\n        } else {\n          console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);\n        }\n      }\n    });\n  };\n\n  /** Start the animation loop, can be called during instantiation or later by an outside source */\n  public startAnimating = () => {\n    this.isAnimated = true;\n    this.lastFrameTime = performance.now();\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  /** Stop the animation loop */\n  public stopAnimating = () => {\n    this.isAnimated = false;\n    if (this.rafId) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Update the uniforms that are provided by the outside shader */\n  public setUniforms = (newUniforms: Record<string, number | number[]>) => {\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\n    // If we need to allow users to add uniforms after the shader has been created, we can do that here\n    // But right now we're expecting the uniform list to be predictable and static\n    // this.setupUniforms();\n\n    this.updateProvidedUniforms();\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = () => {\n    this.hasBeenDisposed = true;\n    this.stopAnimating();\n    if (this.gl && this.program) {\n      this.gl.deleteProgram(this.program);\n      this.program = null;\n\n      // Reset the WebGL context\n      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);\n      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n\n      // Clear any errors\n      this.gl.getError();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    this.uniformLocations = {};\n  };\n}\n\n/** Vertex shader for the shader mount */\nconst vertexShaderSource = `\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n`;\n\nfunction createShader(\n  gl: WebGLRenderingContext,\n  type: number,\n  source: string\n): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error(\n      'An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)\n    );\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n  const fragmentShader = createShader(\n    gl,\n    gl.FRAGMENT_SHADER,\n    fragmentShaderSource\n  );\n\n  if (!vertexShader || !fragmentShader) return null;\n\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    console.error(\n      'Unable to initialize the shader program: ' +\n        gl.getProgramInfoLog(program)\n    );\n    gl.deleteProgram(program);\n    gl.deleteShader(vertexShader);\n    gl.deleteShader(fragmentShader);\n    return null;\n  }\n\n  // Clean up shaders after successful linking\n  gl.detachShader(program, vertexShader);\n  gl.detachShader(program, fragmentShader);\n  gl.deleteShader(vertexShader);\n  gl.deleteShader(fragmentShader);\n\n  return program;\n}\n\n/**  Convert color string to RGB (0 to 1 range) */\nexport function getShaderColorFromString(colorString: string) {\n  let r: number, g: number, b: number;\n  if (colorString.startsWith('#')) {\n    [r, g, b] = hexToRgb(colorString);\n  } else if (colorString.startsWith('rgb')) {\n    [r, g, b] = parseRgb(colorString);\n  } else if (colorString.startsWith('hsl')) {\n    [r, g, b] = hslToRgb(parseHsl(colorString));\n  } else {\n    console.error('Unsupported color format');\n    return [0, 0, 0];\n  }\n  return [r, g, b];\n}\n\n/** Convert hex to RGB (0 to 1 range) */\nfunction hexToRgb(hex: string): [number, number, number] {\n  const bigint = parseInt(hex.slice(1), 16);\n  const r = ((bigint >> 16) & 255) / 255;\n  const g = ((bigint >> 8) & 255) / 255;\n  const b = (bigint & 255) / 255;\n  return [r, g, b];\n}\n\n/** Parse RGB string to RGB (0 to 1 range) */\nfunction parseRgb(rgb: string): [number, number, number] {\n  const match = rgb.match(/^rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)$/i);\n  if (!match) return [0, 0, 0];\n  return [\n    parseInt(match[1] ?? '0') / 255,\n    parseInt(match[2] ?? '0') / 255,\n    parseInt(match[3] ?? '0') / 255,\n  ];\n}\n\n/** Parse HSL string */\nfunction parseHsl(hsl: string): [number, number, number] {\n  const match = hsl.match(/^hsl\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*\\)$/i);\n  if (!match) return [0, 0, 0];\n  return [\n    parseInt(match[1] ?? '0'),\n    parseInt(match[2] ?? '0'),\n    parseInt(match[3] ?? '0'),\n  ];\n}\n\n/** Convert HSL to RGB (0 to 1 range) */\nfunction hslToRgb(hsl: [number, number, number]): [number, number, number] {\n  const [h, s, l] = hsl;\n  const hDecimal = h / 360;\n  const sDecimal = s / 100;\n  const lDecimal = l / 100;\n  let r, g, b;\n\n  if (s === 0) {\n    r = g = b = lDecimal; // achromatic\n  } else {\n    const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n    };\n\n    const q =\n      lDecimal < 0.5\n        ? lDecimal * (1 + sDecimal)\n        : lDecimal + sDecimal - lDecimal * sDecimal;\n    const p = 2 * lDecimal - q;\n    r = hue2rgb(p, q, hDecimal + 1 / 3);\n    g = hue2rgb(p, q, hDecimal);\n    b = hue2rgb(p, q, hDecimal - 1 / 3);\n  }\n\n  return [r, g, b];\n}\n", "/**\n * Renders a grainy texture over top of blobby animated clouds\n * This is an example shader that we're using to bootstrap the project\n * Generated by Claude 3.5 Sonnet\n *\n * Parameters include:\n * color1: The first color of the clouds\n * color2: The second color of the clouds\n * noiseScale: The scale of the noise\n * noiseSpeed: The speed of the noise\n * grainAmount: The amount of grain on the texture\n */\n\nexport 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(((x*34.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 = m*m ;\n    m = m*m ;\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 * (a0*a0 + h*h);\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`;\n"],
+  "mappings": "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",
+  "names": ["ShaderMount", "canvas", "fragmentShader", "uniforms", "webGlContextAttributes", "animated", "gl", "program", "createProgram", "vertexShaderSource", "positionAttributeLocation", "positionBuffer", "positions", "key", "newWidth", "newHeight", "currentTime", "dt", "value", "location", "newUniforms", "createShader", "type", "source", "shader", "fragmentShaderSource", "vertexShader", "grainCloudsFragmentShader"]
+}

package/dist/shader-mount.d.ts

@@ -0,0 +1,42 @@
+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 to RGB (0 to 1 range) */
+export declare function getShaderColorFromString(colorString: string): number[];

package/dist/shaders/grain-clouds.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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
+ *
+ * Parameters include:
+ * color1: The first color of the clouds
+ * color2: The second color of the clouds
+ * noiseScale: The scale of the noise
+ * noiseSpeed: The speed of the noise
+ * 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(((x*34.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 = m*m ;\n    m = m*m ;\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 * (a0*a0 + h*h);\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";

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "type": "module",
   "exports": {
-    ".": "./dist/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "bun run type-check && esbuild src/index.ts --bundle --outfile=dist/index.ts --format=esm --platform=browser",
-    "type-check": "tsc --project tsconfig.json",
-    "publish-test": "bun run build && bun publish --dry-run",
-    "publish": "bun run build && bun publish --access public"
+    "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {},
   "devDependencies": {

package/dist/index.ts

@@ -1,341 +0,0 @@
-// src/shader-mount.ts
-var ShaderMount = class {
-  canvas;
-  gl;
-  program = null;
-  uniformLocations = {};
-  /** The fragment shader that we are using */
-  fragmentShader;
-  /** Stores the RAF for the render loop */
-  rafId = null;
-  /** Time of the last rendered frame */
-  lastFrameTime = 0;
-  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
-  totalAnimationTime = 0;
-  /** Whether we RAF the render or not */
-  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) */
-  providedUniforms;
-  /** Just a sanity check to make sure frames don't run after we're disposed */
-  hasBeenDisposed = false;
-  /** If the resolution of the canvas has changed since the last render */
-  resolutionChanged = true;
-  constructor(canvas, fragmentShader, uniforms = {}, webGlContextAttributes, animated = true) {
-    this.canvas = canvas;
-    this.fragmentShader = fragmentShader;
-    this.providedUniforms = uniforms;
-    this.isAnimated = animated;
-    const gl = canvas.getContext("webgl", webGlContextAttributes);
-    if (!gl) {
-      throw new Error("WebGL not supported");
-    }
-    this.gl = gl;
-    this.initWebGL();
-    this.setupResizeObserver();
-    if (this.isAnimated) {
-      this.startAnimating();
-    } else {
-      this.render(performance.now());
-    }
-  }
-  initWebGL = () => {
-    const program = createProgram(
-      this.gl,
-      vertexShaderSource,
-      this.fragmentShader
-    );
-    if (!program) return;
-    this.program = program;
-    this.setupPositionAttribute();
-    this.setupUniforms();
-  };
-  setupPositionAttribute = () => {
-    const positionAttributeLocation = this.gl.getAttribLocation(
-      this.program,
-      "a_position"
-    );
-    const positionBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
-    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      new Float32Array(positions),
-      this.gl.STATIC_DRAW
-    );
-    this.gl.enableVertexAttribArray(positionAttributeLocation);
-    this.gl.vertexAttribPointer(
-      positionAttributeLocation,
-      2,
-      this.gl.FLOAT,
-      false,
-      0,
-      0
-    );
-  };
-  setupUniforms = () => {
-    this.uniformLocations = {
-      u_time: this.gl.getUniformLocation(this.program, "u_time"),
-      u_resolution: this.gl.getUniformLocation(this.program, "u_resolution"),
-      ...Object.fromEntries(
-        Object.keys(this.providedUniforms).map((key) => [
-          key,
-          this.gl.getUniformLocation(this.program, key)
-        ])
-      )
-    };
-  };
-  resizeObserver = null;
-  setupResizeObserver = () => {
-    this.resizeObserver = new ResizeObserver(() => this.handleResize());
-    this.resizeObserver.observe(this.canvas);
-    this.handleResize();
-  };
-  handleResize = () => {
-    const newWidth = this.canvas.clientWidth;
-    const newHeight = this.canvas.clientHeight;
-    if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {
-      this.canvas.width = newWidth;
-      this.canvas.height = newHeight;
-      this.resolutionChanged = true;
-      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-      this.render(performance.now());
-    }
-  };
-  render = (currentTime) => {
-    if (this.hasBeenDisposed) return;
-    const dt = currentTime - this.lastFrameTime;
-    this.lastFrameTime = currentTime;
-    if (this.isAnimated) {
-      this.totalAnimationTime += dt;
-    }
-    this.gl.useProgram(this.program);
-    this.gl.uniform1f(
-      this.uniformLocations.u_time,
-      this.totalAnimationTime * 1e-3
-    );
-    if (this.resolutionChanged) {
-      this.gl.uniform2f(
-        this.uniformLocations.u_resolution,
-        this.gl.canvas.width,
-        this.gl.canvas.height
-      );
-      this.resolutionChanged = false;
-    }
-    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
-    if (this.isAnimated) {
-      this.requestRender();
-    } else {
-      this.rafId = null;
-    }
-  };
-  requestRender = () => {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-    }
-    this.rafId = requestAnimationFrame(this.render);
-  };
-  updateProvidedUniforms = () => {
-    this.gl.useProgram(this.program);
-    Object.entries(this.providedUniforms).forEach(([key, value]) => {
-      const location = this.uniformLocations[key];
-      if (location) {
-        if (Array.isArray(value)) {
-          switch (value.length) {
-            case 2:
-              this.gl.uniform2fv(location, value);
-              break;
-            case 3:
-              this.gl.uniform3fv(location, value);
-              break;
-            case 4:
-              this.gl.uniform4fv(location, value);
-              break;
-            default:
-              if (value.length === 9) {
-                this.gl.uniformMatrix3fv(location, false, value);
-              } else if (value.length === 16) {
-                this.gl.uniformMatrix4fv(location, false, value);
-              } else {
-                console.warn(
-                  `Unsupported uniform array length: ${value.length}`
-                );
-              }
-          }
-        } else if (typeof value === "number") {
-          this.gl.uniform1f(location, value);
-        } else if (typeof value === "boolean") {
-          this.gl.uniform1i(location, value ? 1 : 0);
-        } else {
-          console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);
-        }
-      }
-    });
-  };
-  /** Start the animation loop, can be called during instantiation or later by an outside source */
-  startAnimating = () => {
-    this.isAnimated = true;
-    this.lastFrameTime = performance.now();
-    this.rafId = requestAnimationFrame(this.render);
-  };
-  /** Stop the animation loop */
-  stopAnimating = () => {
-    this.isAnimated = false;
-    if (this.rafId) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  };
-  /** Update the uniforms that are provided by the outside shader */
-  setUniforms = (newUniforms) => {
-    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };
-    this.updateProvidedUniforms();
-    this.render(performance.now());
-  };
-  /** Dispose of the shader mount, cleaning up all of the WebGL resources */
-  dispose = () => {
-    this.hasBeenDisposed = true;
-    this.stopAnimating();
-    if (this.gl && this.program) {
-      this.gl.deleteProgram(this.program);
-      this.program = null;
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
-      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
-      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
-      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
-      this.gl.getError();
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    this.uniformLocations = {};
-  };
-};
-var vertexShaderSource = `
-  attribute vec4 a_position;
-  void main() {
-    gl_Position = a_position;
-  }
-`;
-function createShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  if (!shader) return null;
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error(
-      "An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader)
-    );
-    gl.deleteShader(shader);
-    return null;
-  }
-  return shader;
-}
-function createProgram(gl, vertexShaderSource2, fragmentShaderSource) {
-  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource2);
-  const fragmentShader = createShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  );
-  if (!vertexShader || !fragmentShader) return null;
-  const program = gl.createProgram();
-  if (!program) return null;
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error(
-      "Unable to initialize the shader program: " + gl.getProgramInfoLog(program)
-    );
-    gl.deleteProgram(program);
-    gl.deleteShader(vertexShader);
-    gl.deleteShader(fragmentShader);
-    return null;
-  }
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  return program;
-}
-
-// src/shaders/grain-clouds.ts
-var grainCloudsFragmentShader = `
-  precision highp float;
-  uniform vec2 u_resolution;
-  uniform float u_time;
-  uniform vec3 u_color1;
-  uniform vec3 u_color2;
-  uniform float u_noiseScale;
-  uniform float u_noiseSpeed;
-  uniform float u_grainAmount;
-
-  // Simplex 2D noise
-  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
-
-  float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-                        -0.577350269189626, 0.024390243902439);
-    vec2 i  = floor(v + dot(v, C.yy));
-    vec2 x0 = v -   i + dot(i, C.xx);
-    vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-    vec4 x12 = x0.xyxy + C.xxzz;
-    x12.xy -= i1;
-    i = mod(i, 289.0);
-    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
-    + i.x + vec3(0.0, i1.x, 1.0));
-    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
-      dot(x12.zw,x12.zw)), 0.0);
-    m = m*m ;
-    m = m*m ;
-    vec3 x = 2.0 * fract(p * C.www) - 1.0;
-    vec3 h = abs(x) - 0.5;
-    vec3 ox = floor(x + 0.5);
-    vec3 a0 = x - ox;
-    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-    vec3 g;
-    g.x = a0.x * x0.x + h.x * x0.y;
-    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-    return 130.0 * dot(m, g);
-  }
-
-  void main() {
-    vec2 st = gl_FragCoord.xy / u_resolution.xy;
-
-    // Calculate the aspect ratio of the shader
-    float shaderAspect = u_resolution.x / u_resolution.y;
-
-    // Define the aspect ratio of your content (e.g., 1.0 for square)
-    float contentAspect = 1.0;
-
-    // Adjust st to maintain content aspect ratio
-    if (shaderAspect > contentAspect) {
-      float scale = shaderAspect / contentAspect;
-      st.x = (st.x - 0.5) * scale + 0.5;
-    } else {
-      float scale = contentAspect / shaderAspect;
-      st.y = (st.y - 0.5) * scale + 0.5;
-    }
-
-    // Create blobby texture
-    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);
-    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);
-    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);
-    n = n * 0.5 + 0.5;
-
-    // Color interpolation
-    vec3 color = mix(u_color1, u_color2, n);
-
-    // Add grain
-    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);
-    color += (grain - 0.5) * u_grainAmount;
-
-    gl_FragColor = vec4(color, 1.0);
-  }
-`;
-export {
-  ShaderMount,
-  grainCloudsFragmentShader
-};

package/src/shader-mount.ts

@@ -1,406 +0,0 @@
-export class ShaderMount {
-  private canvas: HTMLCanvasElement;
-  private gl: WebGLRenderingContext;
-  private program: WebGLProgram | null = null;
-  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};
-  /** The fragment shader that we are using */
-  private fragmentShader: string;
-  /** Stores the RAF for the render loop */
-  private rafId: number | null = null;
-  /** Time of the last rendered frame */
-  private lastFrameTime = 0;
-  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
-  private totalAnimationTime = 0;
-  /** Whether we RAF the render or not */
-  private isAnimated: boolean;
-  /** 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: Record<string, number | number[]>;
-  /** Just a sanity check to make sure frames don't run after we're disposed */
-  private hasBeenDisposed = false;
-  /** If the resolution of the canvas has changed since the last render */
-  private resolutionChanged = true;
-
-  constructor(
-    canvas: HTMLCanvasElement,
-    fragmentShader: string,
-    uniforms: Record<string, number | number[]> = {},
-    webGlContextAttributes?: WebGLContextAttributes,
-    animated = true
-  ) {
-    this.canvas = canvas;
-    this.fragmentShader = fragmentShader;
-    this.providedUniforms = uniforms;
-    this.isAnimated = animated;
-
-    const gl = canvas.getContext('webgl', webGlContextAttributes);
-    if (!gl) {
-      throw new Error('WebGL not supported');
-    }
-    this.gl = gl;
-
-    this.initWebGL();
-    this.setupResizeObserver();
-    if (this.isAnimated) {
-      this.startAnimating();
-    } else {
-      this.render(performance.now());
-    }
-  }
-
-  private initWebGL = () => {
-    const program = createProgram(
-      this.gl,
-      vertexShaderSource,
-      this.fragmentShader
-    );
-    if (!program) return;
-    this.program = program;
-
-    this.setupPositionAttribute();
-    this.setupUniforms();
-  };
-
-  private setupPositionAttribute = () => {
-    const positionAttributeLocation = this.gl.getAttribLocation(
-      this.program!,
-      'a_position'
-    );
-    const positionBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
-    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
-    this.gl.bufferData(
-      this.gl.ARRAY_BUFFER,
-      new Float32Array(positions),
-      this.gl.STATIC_DRAW
-    );
-    this.gl.enableVertexAttribArray(positionAttributeLocation);
-    this.gl.vertexAttribPointer(
-      positionAttributeLocation,
-      2,
-      this.gl.FLOAT,
-      false,
-      0,
-      0
-    );
-  };
-
-  private setupUniforms = () => {
-    this.uniformLocations = {
-      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),
-      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),
-      ...Object.fromEntries(
-        Object.keys(this.providedUniforms).map((key) => [
-          key,
-          this.gl.getUniformLocation(this.program!, key),
-        ])
-      ),
-    };
-  };
-
-  private resizeObserver: ResizeObserver | null = null;
-  private setupResizeObserver = () => {
-    this.resizeObserver = new ResizeObserver(() => this.handleResize());
-    this.resizeObserver.observe(this.canvas);
-    this.handleResize();
-  };
-
-  private handleResize = () => {
-    const newWidth = this.canvas.clientWidth;
-    const newHeight = this.canvas.clientHeight;
-    if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {
-      this.canvas.width = newWidth;
-      this.canvas.height = newHeight;
-      this.resolutionChanged = true;
-      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-      this.render(performance.now());
-    }
-  };
-
-  private render = (currentTime: number) => {
-    if (this.hasBeenDisposed) return;
-
-    const dt = currentTime - this.lastFrameTime;
-    this.lastFrameTime = currentTime;
-
-    if (this.isAnimated) {
-      this.totalAnimationTime += dt;
-    }
-
-    this.gl.useProgram(this.program);
-
-    // Update the time uniform
-    this.gl.uniform1f(
-      this.uniformLocations.u_time!,
-      this.totalAnimationTime * 0.001
-    );
-    // If the resolution has changed, we need to update the uniform
-    if (this.resolutionChanged) {
-      this.gl.uniform2f(
-        this.uniformLocations.u_resolution!,
-        this.gl.canvas.width,
-        this.gl.canvas.height
-      );
-      this.resolutionChanged = false;
-    }
-
-    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
-
-    // Loop if we're animating
-
-    if (this.isAnimated) {
-      this.requestRender();
-    } else {
-      this.rafId = null;
-    }
-  };
-
-  private requestRender = () => {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-    }
-    this.rafId = requestAnimationFrame(this.render);
-  };
-
-  private updateProvidedUniforms = () => {
-    this.gl.useProgram(this.program);
-    Object.entries(this.providedUniforms).forEach(([key, value]) => {
-      const location = this.uniformLocations[key];
-      if (location) {
-        if (Array.isArray(value)) {
-          switch (value.length) {
-            case 2:
-              this.gl.uniform2fv(location, value);
-              break;
-            case 3:
-              this.gl.uniform3fv(location, value);
-              break;
-            case 4:
-              this.gl.uniform4fv(location, value);
-              break;
-            default:
-              if (value.length === 9) {
-                this.gl.uniformMatrix3fv(location, false, value);
-              } else if (value.length === 16) {
-                this.gl.uniformMatrix4fv(location, false, value);
-              } else {
-                console.warn(
-                  `Unsupported uniform array length: ${value.length}`
-                );
-              }
-          }
-        } else if (typeof value === 'number') {
-          this.gl.uniform1f(location, value);
-        } else if (typeof value === 'boolean') {
-          this.gl.uniform1i(location, value ? 1 : 0);
-        } else {
-          console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);
-        }
-      }
-    });
-  };
-
-  /** Start the animation loop, can be called during instantiation or later by an outside source */
-  public startAnimating = () => {
-    this.isAnimated = true;
-    this.lastFrameTime = performance.now();
-    this.rafId = requestAnimationFrame(this.render);
-  };
-
-  /** Stop the animation loop */
-  public stopAnimating = () => {
-    this.isAnimated = false;
-    if (this.rafId) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  };
-
-  /** Update the uniforms that are provided by the outside shader */
-  public setUniforms = (newUniforms: Record<string, number | number[]>) => {
-    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };
-
-    // If we need to allow users to add uniforms after the shader has been created, we can do that here
-    // But right now we're expecting the uniform list to be predictable and static
-    // this.setupUniforms();
-
-    this.updateProvidedUniforms();
-    this.render(performance.now());
-  };
-
-  /** Dispose of the shader mount, cleaning up all of the WebGL resources */
-  public dispose = () => {
-    this.hasBeenDisposed = true;
-    this.stopAnimating();
-    if (this.gl && this.program) {
-      this.gl.deleteProgram(this.program);
-      this.program = null;
-
-      // Reset the WebGL context
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
-      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
-      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
-      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
-
-      // Clear any errors
-      this.gl.getError();
-    }
-
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-
-    this.uniformLocations = {};
-  };
-}
-
-/** Vertex shader for the shader mount */
-const vertexShaderSource = `
-  attribute vec4 a_position;
-  void main() {
-    gl_Position = a_position;
-  }
-`;
-
-function createShader(
-  gl: WebGLRenderingContext,
-  type: number,
-  source: string
-): WebGLShader | null {
-  const shader = gl.createShader(type);
-  if (!shader) return null;
-
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error(
-      'An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)
-    );
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}
-
-function createProgram(
-  gl: WebGLRenderingContext,
-  vertexShaderSource: string,
-  fragmentShaderSource: string
-): WebGLProgram | null {
-  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
-  const fragmentShader = createShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  );
-
-  if (!vertexShader || !fragmentShader) return null;
-
-  const program = gl.createProgram();
-  if (!program) return null;
-
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error(
-      'Unable to initialize the shader program: ' +
-        gl.getProgramInfoLog(program)
-    );
-    gl.deleteProgram(program);
-    gl.deleteShader(vertexShader);
-    gl.deleteShader(fragmentShader);
-    return null;
-  }
-
-  // Clean up shaders after successful linking
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-
-  return program;
-}
-
-/**  Convert color string to RGB (0 to 1 range) */
-export function getShaderColorFromString(colorString: string) {
-  let r: number, g: number, b: number;
-  if (colorString.startsWith('#')) {
-    [r, g, b] = hexToRgb(colorString);
-  } else if (colorString.startsWith('rgb')) {
-    [r, g, b] = parseRgb(colorString);
-  } else if (colorString.startsWith('hsl')) {
-    [r, g, b] = hslToRgb(parseHsl(colorString));
-  } else {
-    console.error('Unsupported color format');
-    return [0, 0, 0];
-  }
-  return [r, g, b];
-}
-
-/** Convert hex to RGB (0 to 1 range) */
-function hexToRgb(hex: string): [number, number, number] {
-  const bigint = parseInt(hex.slice(1), 16);
-  const r = ((bigint >> 16) & 255) / 255;
-  const g = ((bigint >> 8) & 255) / 255;
-  const b = (bigint & 255) / 255;
-  return [r, g, b];
-}
-
-/** Parse RGB string to RGB (0 to 1 range) */
-function parseRgb(rgb: string): [number, number, number] {
-  const match = rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-  if (!match) return [0, 0, 0];
-  return [
-    parseInt(match[1] ?? '0') / 255,
-    parseInt(match[2] ?? '0') / 255,
-    parseInt(match[3] ?? '0') / 255,
-  ];
-}
-
-/** Parse HSL string */
-function parseHsl(hsl: string): [number, number, number] {
-  const match = hsl.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);
-  if (!match) return [0, 0, 0];
-  return [
-    parseInt(match[1] ?? '0'),
-    parseInt(match[2] ?? '0'),
-    parseInt(match[3] ?? '0'),
-  ];
-}
-
-/** Convert HSL to RGB (0 to 1 range) */
-function hslToRgb(hsl: [number, number, number]): [number, number, number] {
-  const [h, s, l] = hsl;
-  const hDecimal = h / 360;
-  const sDecimal = s / 100;
-  const lDecimal = l / 100;
-  let r, g, b;
-
-  if (s === 0) {
-    r = g = b = lDecimal; // achromatic
-  } else {
-    const hue2rgb = (p: number, q: number, t: number) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    };
-
-    const q =
-      lDecimal < 0.5
-        ? lDecimal * (1 + sDecimal)
-        : lDecimal + sDecimal - lDecimal * sDecimal;
-    const p = 2 * lDecimal - q;
-    r = hue2rgb(p, q, hDecimal + 1 / 3);
-    g = hue2rgb(p, q, hDecimal);
-    b = hue2rgb(p, q, hDecimal - 1 / 3);
-  }
-
-  return [r, g, b];
-}

package/src/shaders/grain-clouds.ts

@@ -1,87 +0,0 @@
-/**
- * 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
- *
- * Parameters include:
- * color1: The first color of the clouds
- * color2: The second color of the clouds
- * noiseScale: The scale of the noise
- * noiseSpeed: The speed of the noise
- * grainAmount: The amount of grain on the texture
- */
-
-export const grainCloudsFragmentShader = `
-  precision highp float;
-  uniform vec2 u_resolution;
-  uniform float u_time;
-  uniform vec3 u_color1;
-  uniform vec3 u_color2;
-  uniform float u_noiseScale;
-  uniform float u_noiseSpeed;
-  uniform float u_grainAmount;
-
-  // Simplex 2D noise
-  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
-
-  float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-                        -0.577350269189626, 0.024390243902439);
-    vec2 i  = floor(v + dot(v, C.yy));
-    vec2 x0 = v -   i + dot(i, C.xx);
-    vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-    vec4 x12 = x0.xyxy + C.xxzz;
-    x12.xy -= i1;
-    i = mod(i, 289.0);
-    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
-    + i.x + vec3(0.0, i1.x, 1.0));
-    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
-      dot(x12.zw,x12.zw)), 0.0);
-    m = m*m ;
-    m = m*m ;
-    vec3 x = 2.0 * fract(p * C.www) - 1.0;
-    vec3 h = abs(x) - 0.5;
-    vec3 ox = floor(x + 0.5);
-    vec3 a0 = x - ox;
-    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-    vec3 g;
-    g.x = a0.x * x0.x + h.x * x0.y;
-    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-    return 130.0 * dot(m, g);
-  }
-
-  void main() {
-    vec2 st = gl_FragCoord.xy / u_resolution.xy;
-
-    // Calculate the aspect ratio of the shader
-    float shaderAspect = u_resolution.x / u_resolution.y;
-
-    // Define the aspect ratio of your content (e.g., 1.0 for square)
-    float contentAspect = 1.0;
-
-    // Adjust st to maintain content aspect ratio
-    if (shaderAspect > contentAspect) {
-      float scale = shaderAspect / contentAspect;
-      st.x = (st.x - 0.5) * scale + 0.5;
-    } else {
-      float scale = contentAspect / shaderAspect;
-      st.y = (st.y - 0.5) * scale + 0.5;
-    }
-
-    // Create blobby texture
-    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);
-    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);
-    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);
-    n = n * 0.5 + 0.5;
-
-    // Color interpolation
-    vec3 color = mix(u_color1, u_color2, n);
-
-    // Add grain
-    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);
-    color += (grain - 0.5) * u_grainAmount;
-
-    gl_FragColor = vec4(color, 1.0);
-  }
-`;

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable latest features
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "allowJs": true,
-
-    // Bundler mode
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    // Best practices
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Some stricter flags
-    "noUnusedParameters": false,
-    "noUncheckedIndexedAccess": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}