@paper-design/shaders 0.0.29 → 0.0.30

package/dist/index.d.ts

@@ -32,9 +32,9 @@ export { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './
 /** Multi-color radial swirl  */
 export { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl';
 /** Dithering effect applied over abstract shapes */
-export { ditheringFragmentShader, type DitheringParams, type DitheringUniforms } from './shaders/dithering';
+export { ditheringFragmentShader, DitheringShapes, DitheringTypes, type DitheringParams, type DitheringUniforms, type DitheringShape, type DitheringType, } from './shaders/dithering';
 /** N-color gradient applied to the abstract shapes w/ grainy overlay & distortion  */
-export { grainGradientFragmentShader, grainGradientMeta, type GrainGradientParams, type GrainGradientUniforms, } from './shaders/grain-gradient';
+export { grainGradientFragmentShader, grainGradientMeta, GrainGradientShapes, type GrainGradientParams, type GrainGradientUniforms, type GrainGradientShape, } from './shaders/grain-gradient';
 /** Liquid metal effect applied to the abstract shapes */
 export { liquidMetalFragmentShader, type LiquidMetalParams, type LiquidMetalUniforms } from './shaders/liquid-metal';
 /** Border with configurable size & radius ade of rotating pulsing light spots  */

package/dist/index.js

@@ -42,10 +42,15 @@ import {
 import { godRaysMeta, godRaysFragmentShader } from "./shaders/god-rays";
 import { spiralFragmentShader } from "./shaders/spiral";
 import { swirlMeta, swirlFragmentShader } from "./shaders/swirl";
-import { ditheringFragmentShader } from "./shaders/dithering";
+import {
+  ditheringFragmentShader,
+  DitheringShapes,
+  DitheringTypes
+} from "./shaders/dithering";
 import {
   grainGradientFragmentShader,
-  grainGradientMeta
+  grainGradientMeta,
+  GrainGradientShapes
 } from "./shaders/grain-gradient";
 import { liquidMetalFragmentShader } from "./shaders/liquid-metal";
 import {
@@ -55,7 +60,10 @@ import {
 import { getShaderColorFromString } from "./get-shader-color-from-string";
 import { getShaderNoiseTexture } from "./get-shader-noise-texture";
 export {
+  DitheringShapes,
+  DitheringTypes,
   DotGridShapes,
+  GrainGradientShapes,
   ShaderFitOptions,
   ShaderMount,
   WarpPatterns,

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\nexport { ShaderMount, isPaperShaderElement } from './shader-mount';\nexport type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount';\n\n/** Shader sizing options and uniforms */\nexport {\n  defaultObjectSizing,\n  defaultPatternSizing,\n  ShaderFitOptions,\n  type ShaderFit,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from './shader-sizing';\n\n// ----- Mesh gradient ----- //\n/** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient';\n\n// ----- Smoke ring ----- //\n/** Fractional Brownian motion (fBm) noise over the polar coordinates, masked with ring shape */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring';\n\n// ----- Neuro noise ----- //\n/** A shader rendering a fractal-like structure made of several layers of since-arches */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise';\n\n// ----- Animated dot pattern: orbit type of animation ----- //\n/** A shader rendering an animated dot pattern based on Voronoi diagram */\nexport { dotOrbitMeta, dotOrbitFragmentShader, type DotOrbitParams, type DotOrbitUniforms } from './shaders/dot-orbit';\n\n// ----- Dot Grid ----- //\n/** A shader rendering a static dot pattern */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid';\n\n// ----- Simplex noise ----- //\n/** A shader that calculates a combination of 2 simplex noises with result rendered as a gradient */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise';\n\n// ----- Metaballs ----- //\n/** A number of circlular shapes blened in a gooey way */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs';\n\n// ----- Perlin noise ----- //\n/** 2d noise with max number of parameters to be exposed to users */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise';\n\n// ----- Voronoi Diagram ----- //\n/** Voronoi diagram: classic + rounded edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi';\n\n// ----- Waves ----- //\n/** Waves pattern */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves';\n\n// ----- Warping Distortion ----- //\n/** Warp: distortion + swirl + underlying shapes */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp';\n\n// ----- God Rays Effect ----- //\n/** Radial shape made of randomized stripes */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays';\n\n// ----- Spiral Shape ----- //\n/** Single-color spiral shape */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral';\n\n// ----- Swirl gradient ----- //\n/** Multi-color radial swirl  */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl';\n\n// ----- Dithering ----- //\n/** Dithering effect applied over abstract shapes */\nexport { ditheringFragmentShader, type DitheringParams, type DitheringUniforms } from './shaders/dithering';\n\n// ----- Grainy Gradient ----- //\n/** N-color gradient applied to the abstract shapes w/ grainy overlay & distortion  */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n} from './shaders/grain-gradient';\n\n// ----- Liquid Metal ----- //\n/** Liquid metal effect applied to the abstract shapes */\nexport { liquidMetalFragmentShader, type LiquidMetalParams, type LiquidMetalUniforms } from './shaders/liquid-metal';\n\n// ----- Pulsing Border ----- //\n/** Border with configurable size & radius ade of rotating pulsing light spots  */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n} from './shaders/pulsing-border';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture';\n"],
-  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAIlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP,SAAS,gCAAgF;AAIzF,SAAS,cAAc,8BAA0E;AAIjG;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP,SAAS,iCAAmF;AAI5F,SAAS,aAAa,6BAAuE;AAI7F,SAAS,2BAAiE;AAI1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIP,SAAS,aAAa,6BAAuE;AAI7F,SAAS,4BAAoE;AAI7E,SAAS,WAAW,2BAAiE;AAIrF,SAAS,+BAA6E;AAItF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP,SAAS,iCAAmF;AAI5F;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;",
+  "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\nexport { ShaderMount, isPaperShaderElement } from './shader-mount';\nexport type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount';\n\n/** Shader sizing options and uniforms */\nexport {\n  defaultObjectSizing,\n  defaultPatternSizing,\n  ShaderFitOptions,\n  type ShaderFit,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from './shader-sizing';\n\n// ----- Mesh gradient ----- //\n/** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient';\n\n// ----- Smoke ring ----- //\n/** Fractional Brownian motion (fBm) noise over the polar coordinates, masked with ring shape */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring';\n\n// ----- Neuro noise ----- //\n/** A shader rendering a fractal-like structure made of several layers of since-arches */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise';\n\n// ----- Animated dot pattern: orbit type of animation ----- //\n/** A shader rendering an animated dot pattern based on Voronoi diagram */\nexport { dotOrbitMeta, dotOrbitFragmentShader, type DotOrbitParams, type DotOrbitUniforms } from './shaders/dot-orbit';\n\n// ----- Dot Grid ----- //\n/** A shader rendering a static dot pattern */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid';\n\n// ----- Simplex noise ----- //\n/** A shader that calculates a combination of 2 simplex noises with result rendered as a gradient */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise';\n\n// ----- Metaballs ----- //\n/** A number of circlular shapes blened in a gooey way */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs';\n\n// ----- Perlin noise ----- //\n/** 2d noise with max number of parameters to be exposed to users */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise';\n\n// ----- Voronoi Diagram ----- //\n/** Voronoi diagram: classic + rounded edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi';\n\n// ----- Waves ----- //\n/** Waves pattern */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves';\n\n// ----- Warping Distortion ----- //\n/** Warp: distortion + swirl + underlying shapes */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp';\n\n// ----- God Rays Effect ----- //\n/** Radial shape made of randomized stripes */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays';\n\n// ----- Spiral Shape ----- //\n/** Single-color spiral shape */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral';\n\n// ----- Swirl gradient ----- //\n/** Multi-color radial swirl  */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl';\n\n// ----- Dithering ----- //\n/** Dithering effect applied over abstract shapes */\nexport {\n  ditheringFragmentShader,\n  DitheringShapes,\n  DitheringTypes,\n  type DitheringParams,\n  type DitheringUniforms,\n  type DitheringShape,\n  type DitheringType,\n} from './shaders/dithering';\n\n// ----- Grainy Gradient ----- //\n/** N-color gradient applied to the abstract shapes w/ grainy overlay & distortion  */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient';\n\n// ----- Liquid Metal ----- //\n/** Liquid metal effect applied to the abstract shapes */\nexport { liquidMetalFragmentShader, type LiquidMetalParams, type LiquidMetalUniforms } from './shaders/liquid-metal';\n\n// ----- Pulsing Border ----- //\n/** Border with configurable size & radius ade of rotating pulsing light spots  */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n} from './shaders/pulsing-border';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture';\n"],
+  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAIlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP,SAAS,gCAAgF;AAIzF,SAAS,cAAc,8BAA0E;AAIjG;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP,SAAS,iCAAmF;AAI5F,SAAS,aAAa,6BAAuE;AAI7F,SAAS,2BAAiE;AAI1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIP,SAAS,aAAa,6BAAuE;AAI7F,SAAS,4BAAoE;AAI7E,SAAS,WAAW,2BAAiE;AAIrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIP,SAAS,iCAAmF;AAI5F;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;",
   "names": []
 }

package/dist/shader-mount.d.ts

@@ -61,7 +61,7 @@ export declare class ShaderMount {
     private setupResizeObserver;
     private resizeRafId;
     private handleVisualViewportChange;
-    /** Resize handler for when the container div changes size and we want to resize our canvas to match */
+    /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
     private handleResize;
     private render;
     private requestRender;
@@ -75,6 +75,10 @@ export declare class ShaderMount {
     setFrame: (newFrame: number) => void;
     /** Set an animation speed (or 0 to stop animation) */
     setSpeed: (newSpeed?: number) => void;
+    /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
+    setMaxPixelCount: (newMaxPixelCount?: number) => void;
+    /** Set the minimum pixel ratio for the shader */
+    setMinPixelRatio: (newMinPixelRatio?: number) => void;
     /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
     setUniforms: (newUniforms: ShaderMountUniforms) => void;
     /** Dispose of the shader mount, cleaning up all of the WebGL resources */

package/dist/shader-mount.js

@@ -3,6 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
+const DEFAULT_MAX_PIXEL_COUNT = 1920 * 1080 * 4;
 class ShaderMount {
   parentElement;
   canvasElement;
@@ -30,7 +31,7 @@ class ShaderMount {
   minPixelRatio;
   maxPixelCount;
   isSafari = isSafari();
-  constructor(parentElement, fragmentShader, uniforms, webGlContextAttributes, speed = 0, frame = 0, minPixelRatio = 2, maxPixelCount = 1920 * 1080 * 4) {
+  constructor(parentElement, fragmentShader, uniforms, webGlContextAttributes, speed = 0, frame = 0, minPixelRatio = 2, maxPixelCount = DEFAULT_MAX_PIXEL_COUNT) {
     if (parentElement instanceof HTMLElement) {
       this.parentElement = parentElement;
     } else {
@@ -136,7 +137,7 @@ class ShaderMount {
       });
     });
   };
-  /** Resize handler for when the container div changes size and we want to resize our canvas to match */
+  /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
   handleResize = () => {
     if (this.resizeRafId !== null) {
       cancelAnimationFrame(this.resizeRafId);
@@ -308,6 +309,16 @@ class ShaderMount {
       this.rafId = null;
     }
   };
+  /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
+  setMaxPixelCount = (newMaxPixelCount = DEFAULT_MAX_PIXEL_COUNT) => {
+    this.maxPixelCount = newMaxPixelCount;
+    this.handleResize();
+  };
+  /** Set the minimum pixel ratio for the shader */
+  setMinPixelRatio = (newMinPixelRatio = 2) => {
+    this.minPixelRatio = newMinPixelRatio;
+    this.handleResize();
+  };
   /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
   setUniforms = (newUniforms) => {
     this.providedUniforms = { ...this.providedUniforms, ...newUniforms };
@@ -344,6 +355,8 @@ class ShaderMount {
   };
 }
 const vertexShaderSource = `#version 300 es
+precision mediump float;
+
 layout(location = 0) in vec4 a_position;
 
 uniform vec2 u_resolution;

package/dist/shader-mount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.ts"],
-  "sourcesContent": ["export class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: 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 lastRenderTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private totalFrameTime = 0;\n  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */\n  private speed = 0;\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: ShaderMountUniforms;\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  /** Store textures that are provided by the user */\n  private textures: Map<string, WebGLTexture> = new Map();\n  private minPixelRatio;\n  private maxPixelCount;\n  private isSafari = isSafari();\n\n  constructor(\n    /** The div you'd like to mount the shader to. The shader will match its size. */\n    parentElement: HTMLElement,\n    fragmentShader: string,\n    uniforms: ShaderMountUniforms,\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 0,\n    /** Pass a frame to offset the starting u_time value and give deterministic results*/\n    frame = 0,\n    /**\n     * The minimum pixel ratio to render at, defaults to 2.\n     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.\n     */\n    minPixelRatio = 2,\n    /**\n     * The maximum amount of physical device pixels to render for the shader,\n     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.\n     * Actual DOM size of the canvas can be larger, it will just lose quality after this.\n     *\n     * May be reduced to improve performance or increased to improve quality on high-resolution screens.\n     */\n    maxPixelCount: number = 1920 * 1080 * 4\n  ) {\n    if (parentElement instanceof HTMLElement) {\n      this.parentElement = parentElement as PaperShaderElement;\n    } else {\n      throw new Error('Paper Shaders: parent element must be an HTMLElement');\n    }\n\n    if (!document.querySelector('style[data-paper-shaders]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shaders', '');\n      document.head.prepend(styleElement);\n    }\n\n    // Create the canvas element and mount it into the provided element\n    const canvasElement = document.createElement('canvas');\n    this.canvasElement = canvasElement;\n    this.parentElement.prepend(canvasElement);\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided frame value\n    this.totalFrameTime = frame;\n    this.minPixelRatio = minPixelRatio;\n    this.maxPixelCount = maxPixelCount;\n\n    const gl = canvasElement.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('Paper Shaders: WebGL is not supported in this browser');\n    }\n    this.gl = gl;\n\n    this.initProgram();\n    this.setupPositionAttribute();\n    // Grab the locations of the uniforms in the fragment shader\n    this.setupUniforms();\n    // Put the user provided values into the uniforms\n    this.setUniformValues(this.providedUniforms);\n    // Set up the resize observer to handle window resizing and set u_resolution\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark parent element as paper shader mount\n    this.parentElement.setAttribute('data-paper-shaders', '');\n\n    // Add the shaderMount instance to the div mount element to make it easily accessible\n    this.parentElement.paperShaderMount = this;\n  }\n\n  private initProgram = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\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(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    // Create a map to store all uniform locations\n    const uniformLocations: Record<string, WebGLUniformLocation | null> = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n    };\n\n    // Add locations for all provided uniforms\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);\n\n      // For texture uniforms, also look for the aspect ratio uniform\n      if (value instanceof HTMLImageElement) {\n        const aspectRatioUniformName = `${key}_aspect_ratio`;\n        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);\n      }\n    });\n\n    this.uniformLocations = uniformLocations;\n  };\n\n  /**\n   * The scale that we should render at.\n   * - Used to target 2x rendering even on 1x screens for better antialiasing\n   * - Prevents the virtual resolution from going beyond the maximum resolution\n   * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels\n   */\n  private renderScale = 1;\n  private parentWidth = 0;\n  private parentHeight = 0;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(([entry]) => {\n      if (entry?.borderBoxSize[0]) {\n        this.parentWidth = entry.borderBoxSize[0].inlineSize;\n        this.parentHeight = entry.borderBoxSize[0].blockSize;\n      }\n\n      this.handleResize();\n    });\n\n    this.resizeObserver.observe(this.parentElement);\n    visualViewport?.addEventListener('resize', this.handleVisualViewportChange);\n\n    const rect = this.parentElement.getBoundingClientRect();\n    this.parentWidth = rect.width;\n    this.parentHeight = rect.height;\n    this.handleResize();\n  };\n\n  // Visual viewport resize handler, mainly used to react to browser zoom changes.\n  // Wait 2 frames to align with when the resize observer callback is done (in case it might follow):\n  // - Frame 1: a paint after the visual viewport resize\n  // - Frame 2: a paint after the resize observer has been handled, if it was ever triggered\n  //\n  // Both resize observer and visual viewport will react to classic browser zoom changes,\n  // so we dedupe the callbacks, but pinch zoom only triggers the visual viewport handler.\n  private resizeRafId: number | null = null;\n  private handleVisualViewportChange = () => {\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    this.resizeRafId = requestAnimationFrame(() => {\n      this.resizeRafId = requestAnimationFrame(() => {\n        this.handleResize();\n      });\n    });\n  };\n\n  /** Resize handler for when the container div changes size and we want to resize our canvas to match */\n  private handleResize = () => {\n    // Cancel any scheduled resize handlers\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    const pinchZoom = visualViewport?.scale ?? 1;\n\n    // Zoom level can be calculated comparing the browser's outerWidth and the viewport width.\n    // Note: avoid innerWidth, use visualViewport.width instead.\n    // - innerWidth is affected by pinch zoom in Safari, but not other browsers.\n    //   visualViewport.width works consistently in all browsers.\n    // - innerWidth is rounded to integer, but not visualViewport.width.\n    const innerWidth = visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth;\n\n    // Slight rounding here helps the <canvas> maintain a consistent computed size as the zoom level changes\n    const classicZoom = Math.round((10000 * window.outerWidth) / innerWidth) / 10000;\n\n    // As of 2025, Safari reports physical devicePixelRatio, but other browsers add the current zoom level\n    // https://bugs.webkit.org/show_bug.cgi?id=124862\n    const realPixelRatio = this.isSafari ? devicePixelRatio : devicePixelRatio / classicZoom;\n    const targetPixelRatio = Math.max(realPixelRatio, this.minPixelRatio);\n    const targetRenderScale = targetPixelRatio * classicZoom * pinchZoom;\n    const targetPixelWidth = this.parentWidth * targetRenderScale;\n    const targetPixelHeight = this.parentHeight * targetRenderScale;\n\n    // Prevent the total rendered pixel count from exceeding maxPixelCount\n    const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);\n\n    const newRenderScale = targetRenderScale * Math.min(1, maxPixelCountHeadroom);\n    const newWidth = Math.round(this.parentWidth * newRenderScale);\n    const newHeight = Math.round(this.parentHeight * newRenderScale);\n\n    if (\n      this.canvasElement.width !== newWidth ||\n      this.canvasElement.height !== newHeight ||\n      this.renderScale !== newRenderScale // Usually, only render scale change when the user zooms in/out\n    ) {\n      this.renderScale = newRenderScale;\n      this.canvasElement.width = newWidth;\n      this.canvasElement.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n\n      // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n      this.render(performance.now());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    if (this.program === null) {\n      console.warn('Tried to render before program or gl was initialized');\n      return;\n    }\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastRenderTime;\n    this.lastRenderTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.totalFrameTime += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.totalFrameTime * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, this.renderScale);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\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  /** Creates a texture from an image and sets it into a uniform value */\n  private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {\n    if (!image.complete || image.naturalWidth === 0) {\n      throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);\n    }\n\n    // Clean up existing texture if present\n    const existingTexture = this.textures.get(uniformName);\n    if (existingTexture) {\n      this.gl.deleteTexture(existingTexture);\n    }\n\n    // Create and set up the new texture\n    const texture = this.gl.createTexture();\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n\n    // Set texture parameters\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    // Upload image to texture\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);\n    const error = this.gl.getError();\n    if (error !== this.gl.NO_ERROR || texture === null) {\n      console.error('Paper Shaders: WebGL error when uploading texture:', error);\n      return;\n    }\n\n    // Store the texture\n    this.textures.set(uniformName, texture);\n\n    // Set up texture unit and uniform\n    const location = this.uniformLocations[uniformName];\n    if (location) {\n      // Use texture unit based on the order textures were added\n      const textureUnit = this.textures.size - 1;\n      this.gl.useProgram(this.program);\n      this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\n      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}_aspect_ratio`;\n      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];\n      if (aspectRatioLocation) {\n        const aspectRatio = image.naturalWidth / image.naturalHeight;\n        this.gl.uniform1f(aspectRatioLocation, aspectRatio);\n      }\n    }\n  };\n\n  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */\n  private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {\n    this.gl.useProgram(this.program);\n    Object.entries(updatedUniforms).forEach(([key, value]) => {\n      const location = this.uniformLocations[key];\n      if (!location) {\n        console.warn(`Uniform location for ${key} not found`);\n        return;\n      }\n\n      if (value instanceof HTMLImageElement) {\n        // Texture case, requires a good amount of code so it gets its own function:\n        this.setTextureUniform(key, value);\n      } else if (Array.isArray(value)) {\n        // Array case\n        let flatArray: number[] | null = null;\n        let valueLength: number | null = null;\n\n        // If it's an array of same-sized arrays, flatten it down so we can set the uniform\n        if (value[0] !== undefined && Array.isArray(value[0])) {\n          const firstChildLength = value[0].length;\n          if (value.every((arr) => (arr as number[]).length === firstChildLength)) {\n            // Array of same-sized arrays case, flattens the array sets it\n            flatArray = value.flat();\n            valueLength = firstChildLength;\n          } else {\n            console.warn(`All child arrays must be the same length for ${key}`);\n            return;\n          }\n        } else {\n          // Array of primitive values case, supports 2, 3, 4, 9, 16 length arrays\n          flatArray = value as number[];\n          valueLength = flatArray.length;\n        }\n\n        // Set the uniform based on array length... supports 2, 3, 4, 9, 16 length arrays of primitive values\n        // or arbitrary length arrays of arrays\n        switch (valueLength) {\n          case 2:\n            this.gl.uniform2fv(location, flatArray);\n            break;\n          case 3:\n            this.gl.uniform3fv(location, flatArray);\n            break;\n          case 4:\n            this.gl.uniform4fv(location, flatArray);\n            break;\n          case 9:\n            this.gl.uniformMatrix3fv(location, false, flatArray);\n            break;\n          case 16:\n            this.gl.uniformMatrix4fv(location, false, flatArray);\n            break;\n          default:\n            console.warn(`Unsupported uniform array length: ${valueLength}`);\n        }\n      } else if (typeof value === 'number') {\n        // Number case, supports floats and ints\n        this.gl.uniform1f(location, value);\n      } else if (typeof value === 'boolean') {\n        // Boolean case, supports true and false\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  /** Gets the current total animation time from 0ms */\n  public getCurrentFrameTime = (): number => {\n    return this.totalFrameTime;\n  };\n\n  /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */\n  public setFrame = (newFrame: number): void => {\n    this.totalFrameTime = newFrame;\n    this.lastRenderTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastRenderTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */\n  public setUniforms = (newUniforms: ShaderMountUniforms): void => {\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.setUniformValues(newUniforms);\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      // Clean up all textures\n      this.textures.forEach((texture) => {\n        this.gl.deleteTexture(texture);\n      });\n      this.textures.clear();\n\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    visualViewport?.removeEventListener('resize', this.handleVisualViewportChange);\n\n    this.uniformLocations = {};\n\n    // Remove the shader mount from the div wrapper element to avoid any GC issues\n    this.parentElement.paperShaderMount = undefined;\n  };\n}\n\n/** Vertex shader for the shader mount */\nconst vertexShaderSource = `#version 300 es\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_objectHelperBox;\n\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxSize;\nout vec2 v_responsiveHelperBox;\nout vec2 v_responsiveBoxGivenSize;\n\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_patternHelperBox;\n\n// #define ADD_HELPERS\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize, vec2 maxBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n  // Sizing api for graphic objects with fixed ratio\n  // (currently supports only ratio = 1)\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize, maxBoxSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_objectHelperBox = uv;\n    v_objectHelperBox *= objectWorldScale;\n    v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);\n  #endif\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.\n  // Full-screen mode available with u_worldWidth = u_worldHeight = 0\n\n  v_responsiveBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize, maxBoxSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_responsiveHelperBox = uv;\n    v_responsiveHelperBox *= responsiveBoxScale;\n    v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for patterns\n  // (treating graphics as a image u_worldWidth x u_worldHeight size)\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize, maxBoxSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_patternHelperBox = uv;\n    v_patternHelperBox *= patternBoxScale;\n    v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);\n  #endif\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  v_patternUV += .5;\n\n  // ===================================================\n\n}`;\n\nfunction createShader(gl: WebGLRenderingContext, type: number, source: string): 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('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\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(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\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('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\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\nconst defaultStyle = `@layer paper-shaders {\n  :where([data-paper-shaders]) {\n    isolation: isolate;\n    position: relative;\n\n    & canvas {\n      contain: strict;\n      display: block;\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n    }\n  }\n}`;\n\n/** A canvas element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if a canvas element is a ShaderCanvas */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/** Uniform types that we support to be auto-mapped into the fragment shader */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMotionParams {\n  speed?: number;\n  frame?: number;\n}\n\nexport type ShaderPreset<T> = {\n  name: string;\n  params: Required<T>;\n};\n\nfunction isSafari() {\n  const ua = navigator.userAgent.toLowerCase();\n  return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android');\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["const DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;\n\nexport class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: 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 lastRenderTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private totalFrameTime = 0;\n  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */\n  private speed = 0;\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: ShaderMountUniforms;\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  /** Store textures that are provided by the user */\n  private textures: Map<string, WebGLTexture> = new Map();\n  private minPixelRatio;\n  private maxPixelCount;\n  private isSafari = isSafari();\n\n  constructor(\n    /** The div you'd like to mount the shader to. The shader will match its size. */\n    parentElement: HTMLElement,\n    fragmentShader: string,\n    uniforms: ShaderMountUniforms,\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 0,\n    /** Pass a frame to offset the starting u_time value and give deterministic results*/\n    frame = 0,\n    /**\n     * The minimum pixel ratio to render at, defaults to 2.\n     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.\n     */\n    minPixelRatio = 2,\n    /**\n     * The maximum amount of physical device pixels to render for the shader,\n     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.\n     * Actual DOM size of the canvas can be larger, it will just lose quality after this.\n     *\n     * May be reduced to improve performance or increased to improve quality on high-resolution screens.\n     */\n    maxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT\n  ) {\n    if (parentElement instanceof HTMLElement) {\n      this.parentElement = parentElement as PaperShaderElement;\n    } else {\n      throw new Error('Paper Shaders: parent element must be an HTMLElement');\n    }\n\n    if (!document.querySelector('style[data-paper-shaders]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shaders', '');\n      document.head.prepend(styleElement);\n    }\n\n    // Create the canvas element and mount it into the provided element\n    const canvasElement = document.createElement('canvas');\n    this.canvasElement = canvasElement;\n    this.parentElement.prepend(canvasElement);\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided frame value\n    this.totalFrameTime = frame;\n    this.minPixelRatio = minPixelRatio;\n    this.maxPixelCount = maxPixelCount;\n\n    const gl = canvasElement.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('Paper Shaders: WebGL is not supported in this browser');\n    }\n    this.gl = gl;\n\n    this.initProgram();\n    this.setupPositionAttribute();\n    // Grab the locations of the uniforms in the fragment shader\n    this.setupUniforms();\n    // Put the user provided values into the uniforms\n    this.setUniformValues(this.providedUniforms);\n    // Set up the resize observer to handle window resizing and set u_resolution\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark parent element as paper shader mount\n    this.parentElement.setAttribute('data-paper-shaders', '');\n\n    // Add the shaderMount instance to the div mount element to make it easily accessible\n    this.parentElement.paperShaderMount = this;\n  }\n\n  private initProgram = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\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(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    // Create a map to store all uniform locations\n    const uniformLocations: Record<string, WebGLUniformLocation | null> = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n    };\n\n    // Add locations for all provided uniforms\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);\n\n      // For texture uniforms, also look for the aspect ratio uniform\n      if (value instanceof HTMLImageElement) {\n        const aspectRatioUniformName = `${key}_aspect_ratio`;\n        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);\n      }\n    });\n\n    this.uniformLocations = uniformLocations;\n  };\n\n  /**\n   * The scale that we should render at.\n   * - Used to target 2x rendering even on 1x screens for better antialiasing\n   * - Prevents the virtual resolution from going beyond the maximum resolution\n   * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels\n   */\n  private renderScale = 1;\n  private parentWidth = 0;\n  private parentHeight = 0;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(([entry]) => {\n      if (entry?.borderBoxSize[0]) {\n        this.parentWidth = entry.borderBoxSize[0].inlineSize;\n        this.parentHeight = entry.borderBoxSize[0].blockSize;\n      }\n\n      this.handleResize();\n    });\n\n    this.resizeObserver.observe(this.parentElement);\n    visualViewport?.addEventListener('resize', this.handleVisualViewportChange);\n\n    const rect = this.parentElement.getBoundingClientRect();\n    this.parentWidth = rect.width;\n    this.parentHeight = rect.height;\n    this.handleResize();\n  };\n\n  // Visual viewport resize handler, mainly used to react to browser zoom changes.\n  // Wait 2 frames to align with when the resize observer callback is done (in case it might follow):\n  // - Frame 1: a paint after the visual viewport resize\n  // - Frame 2: a paint after the resize observer has been handled, if it was ever triggered\n  //\n  // Both resize observer and visual viewport will react to classic browser zoom changes,\n  // so we dedupe the callbacks, but pinch zoom only triggers the visual viewport handler.\n  private resizeRafId: number | null = null;\n  private handleVisualViewportChange = () => {\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    this.resizeRafId = requestAnimationFrame(() => {\n      this.resizeRafId = requestAnimationFrame(() => {\n        this.handleResize();\n      });\n    });\n  };\n\n  /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */\n  private handleResize = () => {\n    // Cancel any scheduled resize handlers\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    const pinchZoom = visualViewport?.scale ?? 1;\n\n    // Zoom level can be calculated comparing the browser's outerWidth and the viewport width.\n    // Note: avoid innerWidth, use visualViewport.width instead.\n    // - innerWidth is affected by pinch zoom in Safari, but not other browsers.\n    //   visualViewport.width works consistently in all browsers.\n    // - innerWidth is rounded to integer, but not visualViewport.width.\n    const innerWidth = visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth;\n\n    // Slight rounding here helps the <canvas> maintain a consistent computed size as the zoom level changes\n    const classicZoom = Math.round((10000 * window.outerWidth) / innerWidth) / 10000;\n\n    // As of 2025, Safari reports physical devicePixelRatio, but other browsers add the current zoom level\n    // https://bugs.webkit.org/show_bug.cgi?id=124862\n    const realPixelRatio = this.isSafari ? devicePixelRatio : devicePixelRatio / classicZoom;\n    const targetPixelRatio = Math.max(realPixelRatio, this.minPixelRatio);\n    const targetRenderScale = targetPixelRatio * classicZoom * pinchZoom;\n    const targetPixelWidth = this.parentWidth * targetRenderScale;\n    const targetPixelHeight = this.parentHeight * targetRenderScale;\n\n    // Prevent the total rendered pixel count from exceeding maxPixelCount\n    const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);\n\n    const newRenderScale = targetRenderScale * Math.min(1, maxPixelCountHeadroom);\n    const newWidth = Math.round(this.parentWidth * newRenderScale);\n    const newHeight = Math.round(this.parentHeight * newRenderScale);\n\n    if (\n      this.canvasElement.width !== newWidth ||\n      this.canvasElement.height !== newHeight ||\n      this.renderScale !== newRenderScale // Usually, only render scale change when the user zooms in/out\n    ) {\n      this.renderScale = newRenderScale;\n      this.canvasElement.width = newWidth;\n      this.canvasElement.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n\n      // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n      this.render(performance.now());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    if (this.program === null) {\n      console.warn('Tried to render before program or gl was initialized');\n      return;\n    }\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastRenderTime;\n    this.lastRenderTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.totalFrameTime += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.totalFrameTime * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, this.renderScale);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\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  /** Creates a texture from an image and sets it into a uniform value */\n  private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {\n    if (!image.complete || image.naturalWidth === 0) {\n      throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);\n    }\n\n    // Clean up existing texture if present\n    const existingTexture = this.textures.get(uniformName);\n    if (existingTexture) {\n      this.gl.deleteTexture(existingTexture);\n    }\n\n    // Create and set up the new texture\n    const texture = this.gl.createTexture();\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n\n    // Set texture parameters\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    // Upload image to texture\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);\n    const error = this.gl.getError();\n    if (error !== this.gl.NO_ERROR || texture === null) {\n      console.error('Paper Shaders: WebGL error when uploading texture:', error);\n      return;\n    }\n\n    // Store the texture\n    this.textures.set(uniformName, texture);\n\n    // Set up texture unit and uniform\n    const location = this.uniformLocations[uniformName];\n    if (location) {\n      // Use texture unit based on the order textures were added\n      const textureUnit = this.textures.size - 1;\n      this.gl.useProgram(this.program);\n      this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\n      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}_aspect_ratio`;\n      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];\n      if (aspectRatioLocation) {\n        const aspectRatio = image.naturalWidth / image.naturalHeight;\n        this.gl.uniform1f(aspectRatioLocation, aspectRatio);\n      }\n    }\n  };\n\n  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */\n  private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {\n    this.gl.useProgram(this.program);\n    Object.entries(updatedUniforms).forEach(([key, value]) => {\n      const location = this.uniformLocations[key];\n      if (!location) {\n        console.warn(`Uniform location for ${key} not found`);\n        return;\n      }\n\n      if (value instanceof HTMLImageElement) {\n        // Texture case, requires a good amount of code so it gets its own function:\n        this.setTextureUniform(key, value);\n      } else if (Array.isArray(value)) {\n        // Array case\n        let flatArray: number[] | null = null;\n        let valueLength: number | null = null;\n\n        // If it's an array of same-sized arrays, flatten it down so we can set the uniform\n        if (value[0] !== undefined && Array.isArray(value[0])) {\n          const firstChildLength = value[0].length;\n          if (value.every((arr) => (arr as number[]).length === firstChildLength)) {\n            // Array of same-sized arrays case, flattens the array sets it\n            flatArray = value.flat();\n            valueLength = firstChildLength;\n          } else {\n            console.warn(`All child arrays must be the same length for ${key}`);\n            return;\n          }\n        } else {\n          // Array of primitive values case, supports 2, 3, 4, 9, 16 length arrays\n          flatArray = value as number[];\n          valueLength = flatArray.length;\n        }\n\n        // Set the uniform based on array length... supports 2, 3, 4, 9, 16 length arrays of primitive values\n        // or arbitrary length arrays of arrays\n        switch (valueLength) {\n          case 2:\n            this.gl.uniform2fv(location, flatArray);\n            break;\n          case 3:\n            this.gl.uniform3fv(location, flatArray);\n            break;\n          case 4:\n            this.gl.uniform4fv(location, flatArray);\n            break;\n          case 9:\n            this.gl.uniformMatrix3fv(location, false, flatArray);\n            break;\n          case 16:\n            this.gl.uniformMatrix4fv(location, false, flatArray);\n            break;\n          default:\n            console.warn(`Unsupported uniform array length: ${valueLength}`);\n        }\n      } else if (typeof value === 'number') {\n        // Number case, supports floats and ints\n        this.gl.uniform1f(location, value);\n      } else if (typeof value === 'boolean') {\n        // Boolean case, supports true and false\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  /** Gets the current total animation time from 0ms */\n  public getCurrentFrameTime = (): number => {\n    return this.totalFrameTime;\n  };\n\n  /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */\n  public setFrame = (newFrame: number): void => {\n    this.totalFrameTime = newFrame;\n    this.lastRenderTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastRenderTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */\n  public setMaxPixelCount = (newMaxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT): void => {\n    this.maxPixelCount = newMaxPixelCount;\n\n    this.handleResize();\n  };\n\n  /** Set the minimum pixel ratio for the shader */\n  public setMinPixelRatio = (newMinPixelRatio: number = 2): void => {\n    this.minPixelRatio = newMinPixelRatio;\n\n    this.handleResize();\n  };\n\n  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */\n  public setUniforms = (newUniforms: ShaderMountUniforms): void => {\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.setUniformValues(newUniforms);\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      // Clean up all textures\n      this.textures.forEach((texture) => {\n        this.gl.deleteTexture(texture);\n      });\n      this.textures.clear();\n\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    visualViewport?.removeEventListener('resize', this.handleVisualViewportChange);\n\n    this.uniformLocations = {};\n\n    // Remove the shader mount from the div wrapper element to avoid any GC issues\n    this.parentElement.paperShaderMount = undefined;\n  };\n}\n\n/** Vertex shader for the shader mount */\nconst vertexShaderSource = `#version 300 es\nprecision mediump float;\n\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_objectHelperBox;\n\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxSize;\nout vec2 v_responsiveHelperBox;\nout vec2 v_responsiveBoxGivenSize;\n\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_patternHelperBox;\n\n// #define ADD_HELPERS\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize, vec2 maxBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n  // Sizing api for graphic objects with fixed ratio\n  // (currently supports only ratio = 1)\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize, maxBoxSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_objectHelperBox = uv;\n    v_objectHelperBox *= objectWorldScale;\n    v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);\n  #endif\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.\n  // Full-screen mode available with u_worldWidth = u_worldHeight = 0\n\n  v_responsiveBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize, maxBoxSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_responsiveHelperBox = uv;\n    v_responsiveHelperBox *= responsiveBoxScale;\n    v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for patterns\n  // (treating graphics as a image u_worldWidth x u_worldHeight size)\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize, maxBoxSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_patternHelperBox = uv;\n    v_patternHelperBox *= patternBoxScale;\n    v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);\n  #endif\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  v_patternUV += .5;\n\n  // ===================================================\n\n}`;\n\nfunction createShader(gl: WebGLRenderingContext, type: number, source: string): 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('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\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(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\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('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\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\nconst defaultStyle = `@layer paper-shaders {\n  :where([data-paper-shaders]) {\n    isolation: isolate;\n    position: relative;\n\n    & canvas {\n      contain: strict;\n      display: block;\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n    }\n  }\n}`;\n\n/** A canvas element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if a canvas element is a ShaderCanvas */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/** Uniform types that we support to be auto-mapped into the fragment shader */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMotionParams {\n  speed?: number;\n  frame?: number;\n}\n\nexport type ShaderPreset<T> = {\n  name: string;\n  params: Required<T>;\n};\n\nfunction isSafari() {\n  const ua = navigator.userAgent.toLowerCase();\n  return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android');\n}\n"],
+  "mappings": "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",
   "names": ["vertexShaderSource"]
 }

package/dist/shader-sizing.d.ts

@@ -1,7 +1,7 @@
 export declare const sizingVariablesDeclaration = "\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;";
 export declare const sizingDebugVariablesDeclaration = "\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;";
 export declare const sizingUniformsDeclaration = "\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;";
-export declare const sizingUV = "\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    roundedUv += .5;\n    if (u_pxRounded == true) {\n      uv = roundedUv;\n    }  \n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n";
+export declare const sizingUV = "\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    uv += .5;\n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n";
 export declare const drawSizingHelpers = "\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n";
 export interface ShaderSizingUniforms {
     u_fit: (typeof ShaderFitOptions)[ShaderFit];

package/dist/shader-sizing.js

@@ -34,11 +34,8 @@ const sizingUV = `
     vec2 pxSizeUv = gl_FragCoord.xy;
     pxSizeUv -= .5 * u_resolution;
     pxSizeUv /= pxSize;
-    vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;    
-    roundedUv += .5;
-    if (u_pxRounded == true) {
-      uv = roundedUv;
-    }  
+    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    
+    uv += .5;
   #endif
   uv -= .5;
 

package/dist/shader-sizing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-sizing.ts"],
-  "sourcesContent": ["/*\n ===================================================================\n The space coordinates passed from the vertex shader.\n\n `sizingVariablesDeclaration` must be included in every fragment\n shader\u2014unless we want to apply sizing to the coordinates directly\n in the fragment shader.\n\n So far, the only exception is when we need to apply pixelization\n before sizing (e.g., to make dithering pixels independent of sizing).\n*/\nexport const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;`;\n\n/*\n ===================================================================\n Additional variables used only for drawing a sizing overlay.\n*/\nexport const sizingDebugVariablesDeclaration = `\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;`;\n\n/*\n ===================================================================\n In most cases, sizing UNIFORMS are used only in the vertex shader.\n But there are cases where we need to pass them to the fragment shader\n as well:\n  - dithering pixelization where all the sizing happens in fragment\n  - drawing the sizing helpers\n*/\nexport const sizingUniformsDeclaration = `\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;`;\n\n/*\n ===================================================================\n In most cases, sizing TRANSFORMS are applied in the vertex shader.\n For exceptions (e.g., dithering pixelization), the operations below\n need to be included in the fragment shader instead.\n\n Currently, only `objectUV` and `patternUV` are supported.\n The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part.\n*/\nexport const sizingUV = `\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    roundedUv += .5;\n    if (u_pxRounded == true) {\n      uv = roundedUv;\n    }  \n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n`;\n\n/*\n ===================================================================\n Helpers used to draw the sizing (box, box origin and graphic origin)\n over the shader. Can be used with both vertex sizing and vector sizing\n\n helperBox and boxSize should be defined before inserting the code\n*/\nexport const drawSizingHelpers = `\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n`;\n\nexport interface ShaderSizingUniforms {\n  u_fit: (typeof ShaderFitOptions)[ShaderFit];\n  u_scale: number;\n  u_rotation: number;\n  u_originX: number;\n  u_originY: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_worldWidth: number;\n  u_worldHeight: number;\n}\n\nexport interface ShaderSizingParams {\n  fit?: 'none' | 'contain' | 'cover';\n  scale?: number;\n  rotation?: number;\n  originX?: number;\n  originY?: number;\n  offsetX?: number;\n  offsetY?: number;\n  worldWidth?: number;\n  worldHeight?: number;\n}\n\nexport const defaultObjectSizing: Required<ShaderSizingParams> = {\n  fit: 'contain',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const defaultPatternSizing: Required<ShaderSizingParams> = {\n  fit: 'none',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const ShaderFitOptions = {\n  none: 0,\n  contain: 1,\n  cover: 2,\n} as const;\n\nexport type ShaderFit = keyof typeof ShaderFitOptions;\n"],
-  "mappings": ";;;;;AAWO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBlC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsHjB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C1B,MAAM,sBAAoD;AAAA,EAC/D,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,uBAAqD;AAAA,EAChE,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;",
+  "sourcesContent": ["/*\n ===================================================================\n The space coordinates passed from the vertex shader.\n\n `sizingVariablesDeclaration` must be included in every fragment\n shader\u2014unless we want to apply sizing to the coordinates directly\n in the fragment shader.\n\n So far, the only exception is when we need to apply pixelization\n before sizing (e.g., to make dithering pixels independent of sizing).\n*/\nexport const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;`;\n\n/*\n ===================================================================\n Additional variables used only for drawing a sizing overlay.\n*/\nexport const sizingDebugVariablesDeclaration = `\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;`;\n\n/*\n ===================================================================\n In most cases, sizing UNIFORMS are used only in the vertex shader.\n But there are cases where we need to pass them to the fragment shader\n as well:\n  - dithering pixelization where all the sizing happens in fragment\n  - drawing the sizing helpers\n*/\nexport const sizingUniformsDeclaration = `\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;`;\n\n/*\n ===================================================================\n In most cases, sizing TRANSFORMS are applied in the vertex shader.\n For exceptions (e.g., dithering pixelization), the operations below\n need to be included in the fragment shader instead.\n\n Currently, only `objectUV` and `patternUV` are supported.\n The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part.\n*/\nexport const sizingUV = `\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    uv += .5;\n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n`;\n\n/*\n ===================================================================\n Helpers used to draw the sizing (box, box origin and graphic origin)\n over the shader. Can be used with both vertex sizing and vector sizing\n\n helperBox and boxSize should be defined before inserting the code\n*/\nexport const drawSizingHelpers = `\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n`;\n\nexport interface ShaderSizingUniforms {\n  u_fit: (typeof ShaderFitOptions)[ShaderFit];\n  u_scale: number;\n  u_rotation: number;\n  u_originX: number;\n  u_originY: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_worldWidth: number;\n  u_worldHeight: number;\n}\n\nexport interface ShaderSizingParams {\n  fit?: 'none' | 'contain' | 'cover';\n  scale?: number;\n  rotation?: number;\n  originX?: number;\n  originY?: number;\n  offsetX?: number;\n  offsetY?: number;\n  worldWidth?: number;\n  worldHeight?: number;\n}\n\nexport const defaultObjectSizing: Required<ShaderSizingParams> = {\n  fit: 'contain',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const defaultPatternSizing: Required<ShaderSizingParams> = {\n  fit: 'none',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const ShaderFitOptions = {\n  none: 0,\n  contain: 1,\n  cover: 2,\n} as const;\n\nexport type ShaderFit = keyof typeof ShaderFitOptions;\n"],
+  "mappings": ";;;;;AAWO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBlC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmHjB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C1B,MAAM,sBAAoD;AAAA,EAC/D,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,uBAAqD;AAAA,EAChE,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/dithering.d.ts

@@ -25,23 +25,37 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  *  --- type = 4: 8x8 Bayer matrix
  *
  * - pxSize (float), relative to canvas resolution
- * - u_pxRounded (bool)
  *
  */
 export declare const ditheringFragmentShader: string;
 export interface DitheringUniforms extends ShaderSizingUniforms {
     u_color1: [number, number, number, number];
     u_color2: [number, number, number, number];
-    u_shape: number;
-    u_type: number;
+    u_shape: (typeof DitheringShapes)[DitheringShape];
+    u_type: (typeof DitheringTypes)[DitheringType];
     u_pxSize: number;
-    u_pxRounded: boolean;
 }
 export interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {
     color1?: string;
     color2?: string;
-    shape?: number;
-    type?: number;
+    shape?: DitheringShape;
+    type?: DitheringType;
     pxSize?: number;
-    pxRounded?: boolean;
 }
+export declare const DitheringShapes: {
+    readonly simplex: 1;
+    readonly warp: 2;
+    readonly dots: 3;
+    readonly wave: 4;
+    readonly ripple: 5;
+    readonly swirl: 6;
+    readonly sphere: 7;
+};
+export type DitheringShape = keyof typeof DitheringShapes;
+export declare const DitheringTypes: {
+    readonly random: 1;
+    readonly '2x2': 2;
+    readonly '4x4': 3;
+    readonly '8x8': 4;
+};
+export type DitheringType = keyof typeof DitheringTypes;