@paper-design/shaders 0.0.46 → 0.0.49

package/dist/index.d.ts

@@ -47,5 +47,6 @@ export { paperTextureFragmentShader, type PaperTextureParams, type PaperTextureU
 export { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';
 export { flutedGlassFragmentShader, GlassDistortionShapes, GlassGridShapes, type GlassDistortionShape, type GlassGridShape, type FlutedGlassParams, type FlutedGlassUniforms, } from './shaders/fluted-glass.js';
 export { imageDitheringFragmentShader, type ImageDitheringParams, type ImageDitheringUniforms, } from './shaders/image-dithering.js';
+export { heatmapMeta, heatmapFragmentShader, toProcessedHeatmap, type HeatmapParams, type HeatmapUniforms, } from './shaders/heatmap.js';
 export { getShaderColorFromString } from './get-shader-color-from-string.js';
 export { getShaderNoiseTexture } from './get-shader-noise-texture.js';

package/dist/index.js

@@ -87,6 +87,11 @@ import {
 import {
   imageDitheringFragmentShader
 } from "./shaders/image-dithering.js";
+import {
+  heatmapMeta,
+  heatmapFragmentShader,
+  toProcessedHeatmap
+} from "./shaders/heatmap.js";
 import { getShaderColorFromString } from "./get-shader-color-from-string.js";
 import { getShaderNoiseTexture } from "./get-shader-noise-texture.js";
 export {
@@ -115,6 +120,8 @@ export {
   godRaysMeta,
   grainGradientFragmentShader,
   grainGradientMeta,
+  heatmapFragmentShader,
+  heatmapMeta,
   imageDitheringFragmentShader,
   isPaperShaderElement,
   liquidMetalFragmentShader,
@@ -138,6 +145,7 @@ export {
   staticRadialGradientMeta,
   swirlFragmentShader,
   swirlMeta,
+  toProcessedHeatmap,
   voronoiFragmentShader,
   voronoiMeta,
   warpFragmentShader,

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.js';\nexport type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount.js';\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.js';\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.js';\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.js';\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.js';\n\n// ----- Animated dot pattern: orbit type of animation ----- //\n/** A shader rendering an animated dot pattern based on Voronoi diagram */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\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.js';\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.js';\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.js';\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.js';\n\n// ----- Voronoi Diagram ----- //\n/** Voronoi diagram: classic + rounded edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n// ----- Waves ----- //\n/** Waves pattern */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\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.js';\n\n// ----- God Rays Effect ----- //\n/** Radial shape made of randomized stripes */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n// ----- Spiral Shape ----- //\n/** Single-color spiral shape */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n// ----- Swirl gradient ----- //\n/** Multi-color radial swirl  */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\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.js';\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.js';\n\n// ----- Liquid Metal ----- //\n/** Liquid metal effect applied to the abstract shapes */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n  type LiquidMetalShape,\n} from './shaders/liquid-metal.js';\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.js';\n\n// ----- Color Gradient Panels ----- //\n/**  */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\nexport {\n  paperTextureFragmentShader,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\nexport {\n  flutedGlassFragmentShader,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type GlassDistortionShape,\n  type GlassGridShape,\n  type FlutedGlassParams,\n  type FlutedGlassUniforms,\n} from './shaders/fluted-glass.js';\n\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\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;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;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;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,OAGK;AAEP,SAAS,2BAAiE;AAE1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;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.js';\nexport type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount.js';\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.js';\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.js';\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.js';\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.js';\n\n// ----- Animated dot pattern: orbit type of animation ----- //\n/** A shader rendering an animated dot pattern based on Voronoi diagram */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\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.js';\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.js';\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.js';\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.js';\n\n// ----- Voronoi Diagram ----- //\n/** Voronoi diagram: classic + rounded edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n// ----- Waves ----- //\n/** Waves pattern */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\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.js';\n\n// ----- God Rays Effect ----- //\n/** Radial shape made of randomized stripes */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n// ----- Spiral Shape ----- //\n/** Single-color spiral shape */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n// ----- Swirl gradient ----- //\n/** Multi-color radial swirl  */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\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.js';\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.js';\n\n// ----- Liquid Metal ----- //\n/** Liquid metal effect applied to the abstract shapes */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n  type LiquidMetalShape,\n} from './shaders/liquid-metal.js';\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.js';\n\n// ----- Color Gradient Panels ----- //\n/**  */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\nexport {\n  paperTextureFragmentShader,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\nexport {\n  flutedGlassFragmentShader,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type GlassDistortionShape,\n  type GlassGridShape,\n  type FlutedGlassParams,\n  type FlutedGlassUniforms,\n} from './shaders/fluted-glass.js';\n\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\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;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;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;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,OAGK;AAEP,SAAS,2BAAiE;AAE1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;AAAA,OAGK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;",
   "names": []
 }

package/dist/shader-mount.js

@@ -427,6 +427,7 @@ const defaultStyle = `@layer paper-shaders {
       width: 100%;
       height: 100%;
       border-radius: inherit;
+      corner-shape: inherit;
     }
   }
 }`;

package/dist/shader-mount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.ts"],
-  "sourcesContent": ["import { vertexShaderSource } from './vertex-shader.js';\n\nconst DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;\n\nexport class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: HTMLCanvasElement;\n  private gl: WebGL2RenderingContext;\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 currentFrame = 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  private uniformCache: Record<string, unknown> = {};\n  private textureUnitMap: Map<string, number> = new Map();\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-shader]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shader', '');\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.currentFrame = 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-shader', '');\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}AspectRatio`;\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    // - visualViewport.width is affected by hard scrollbars, so they need to be added manually\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    const innerWidth = visualViewport\n      ? visualViewport.scale * visualViewport.width + scrollbarWidth\n      : 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.currentFrame += 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.currentFrame * 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\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    // Get texture unit\n    if (!this.textureUnitMap.has(uniformName)) {\n      this.textureUnitMap.set(uniformName, this.textureUnitMap.size);\n    }\n    const textureUnit = this.textureUnitMap.get(uniformName)!;\n    // Activate correct texture unit before creating the texture\n    this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\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.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);\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      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}AspectRatio`;\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  /** Utility: recursive equality test for all the uniforms */\n  private areUniformValuesEqual = (a: any, b: any): boolean => {\n    if (a === b) return true;\n    if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {\n      return a.every((val, i) => this.areUniformValuesEqual(val, (b as any)[i]));\n    }\n    return false;\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      // Grab the value to use in the uniform cache\n      let cacheValue: ShaderMountUniforms[keyof ShaderMountUniforms] | string = value;\n      if (value instanceof HTMLImageElement) {\n        // Images use their src for the cache value to save memory\n        cacheValue = `${value.src.slice(0, 200)}|${value.naturalWidth}x${value.naturalHeight}`;\n      }\n\n      // Check if the uniform value has changed and, if not, bail early to avoid extra work\n      if (this.areUniformValuesEqual(this.uniformCache[key], cacheValue)) return;\n      // Update the uniform cache if we are still here\n      this.uniformCache[key] = cacheValue;\n\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        // May happen on the server for SSR when undefined images are passed in\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 getCurrentFrame = (): number => {\n    return this.currentFrame;\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.currentFrame = 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.setUniformValues(newUniforms);\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\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\nfunction createShader(gl: WebGL2RenderingContext, 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: WebGL2RenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const format = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);\n  const precision = format ? format.precision : null;\n  // MEDIUM_FLOAT precision can be 10, 16 or 23 bits depending on device;\n  // Shaders fail on 10 bit (and 16 bit is hard to test) => we force 23-bit by switching to highp\n  if (precision && precision < 23) {\n    vertexShaderSource = vertexShaderSource.replace(/precision\\s+(lowp|mediump)\\s+float;/g, 'precision highp float;');\n    fragmentShaderSource = fragmentShaderSource\n      .replace(/precision\\s+(lowp|mediump)\\s+float/g, 'precision highp float')\n      .replace(/\\b(uniform|varying|attribute)\\s+(lowp|mediump)\\s+(\\w+)/g, '$1 highp $3');\n  }\n\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-shader]) {\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/** The parent `<div>` element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if an element is a Paper shader element */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/**\n * Uniform types that we support to be auto-mapped into the fragment shader\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;\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": ["import { vertexShaderSource } from './vertex-shader.js';\n\nconst DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;\n\nexport class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: HTMLCanvasElement;\n  private gl: WebGL2RenderingContext;\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 currentFrame = 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  private uniformCache: Record<string, unknown> = {};\n  private textureUnitMap: Map<string, number> = new Map();\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-shader]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shader', '');\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.currentFrame = 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-shader', '');\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}AspectRatio`;\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    // - visualViewport.width is affected by hard scrollbars, so they need to be added manually\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    const innerWidth = visualViewport\n      ? visualViewport.scale * visualViewport.width + scrollbarWidth\n      : 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.currentFrame += 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.currentFrame * 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    // Get texture unit\n    if (!this.textureUnitMap.has(uniformName)) {\n      this.textureUnitMap.set(uniformName, this.textureUnitMap.size);\n    }\n    const textureUnit = this.textureUnitMap.get(uniformName)!;\n    // Activate correct texture unit before creating the texture\n    this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\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.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);\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      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}AspectRatio`;\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  /** Utility: recursive equality test for all the uniforms */\n  private areUniformValuesEqual = (a: any, b: any): boolean => {\n    if (a === b) return true;\n    if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {\n      return a.every((val, i) => this.areUniformValuesEqual(val, (b as any)[i]));\n    }\n    return false;\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      // Grab the value to use in the uniform cache\n      let cacheValue: ShaderMountUniforms[keyof ShaderMountUniforms] | string = value;\n      if (value instanceof HTMLImageElement) {\n        // Images use their src for the cache value to save memory\n        cacheValue = `${value.src.slice(0, 200)}|${value.naturalWidth}x${value.naturalHeight}`;\n      }\n\n      // Check if the uniform value has changed and, if not, bail early to avoid extra work\n      if (this.areUniformValuesEqual(this.uniformCache[key], cacheValue)) return;\n      // Update the uniform cache if we are still here\n      this.uniformCache[key] = cacheValue;\n\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        // May happen on the server for SSR when undefined images are passed in\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 getCurrentFrame = (): number => {\n    return this.currentFrame;\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.currentFrame = 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.setUniformValues(newUniforms);\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\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\nfunction createShader(gl: WebGL2RenderingContext, 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: WebGL2RenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const format = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);\n  const precision = format ? format.precision : null;\n  // MEDIUM_FLOAT precision can be 10, 16 or 23 bits depending on device;\n  // Shaders fail on 10 bit (and 16 bit is hard to test) => we force 23-bit by switching to highp\n  if (precision && precision < 23) {\n    vertexShaderSource = vertexShaderSource.replace(/precision\\s+(lowp|mediump)\\s+float;/g, 'precision highp float;');\n    fragmentShaderSource = fragmentShaderSource\n      .replace(/precision\\s+(lowp|mediump)\\s+float/g, 'precision highp float')\n      .replace(/\\b(uniform|varying|attribute)\\s+(lowp|mediump)\\s+(\\w+)/g, '$1 highp $3');\n  }\n\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-shader]) {\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      corner-shape: inherit;\n    }\n  }\n}`;\n\n/** The parent `<div>` element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if an element is a Paper shader element */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/**\n * Uniform types that we support to be auto-mapped into the fragment shader\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;\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;\nin vec2 v_imageUV;";
 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    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  // Sizing api for image filters\n  \n  #ifdef USE_IMAGE_SIZING\n\n    vec2 imageBoxSize;\n    if (u_fit == 1.) { // contain\n      imageBoxSize.x = min(maxBoxSize.x / u_imageAspectRatio, maxBoxSize.y) * u_imageAspectRatio;\n    } else if (u_fit == 2.) { // cover\n      imageBoxSize.x = max(maxBoxSize.x / u_imageAspectRatio, maxBoxSize.y) * u_imageAspectRatio;\n    } else {\n      imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n    }\n    imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n    vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n    #ifdef ADD_HELPERS\n      vec2 imageHelperBox = uv;\n      imageHelperBox *= imageBoxScale;\n      imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n    #endif\n\n    vec2 imageUV = uv;\n    imageUV *= imageBoxScale;\n    imageUV += boxOrigin * (imageBoxScale - 1.);\n    imageUV += graphicOffset;\n    imageUV /= u_scale;\n    imageUV.x *= u_imageAspectRatio;\n    imageUV = graphicRotation * imageUV;\n    imageUV.x /= u_imageAspectRatio;\n    \n    imageUV += .5;\n    imageUV.y = 1. - imageUV.y;\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  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(u_resolution.x / fixedRatio, u_resolution.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(u_resolution.x / fixedRatio, u_resolution.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(u_resolution.x / patternBoxRatio, u_resolution.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.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  // Sizing api for image filters\n  \n  #ifdef USE_IMAGE_SIZING\n\n    vec2 imageBoxSize;\n    if (u_fit == 1.) { // contain\n      imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n    } else if (u_fit == 2.) { // cover\n      imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n    } else {\n      imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n    }\n    imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n    vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n    #ifdef ADD_HELPERS\n      vec2 imageHelperBox = uv;\n      imageHelperBox *= imageBoxScale;\n      imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n    #endif\n\n    vec2 imageUV = uv;\n    imageUV *= imageBoxScale;\n    imageUV += boxOrigin * (imageBoxScale - 1.);\n    imageUV += graphicOffset;\n    imageUV /= u_scale;\n    imageUV.x *= u_imageAspectRatio;\n    imageUV = graphicRotation * imageUV;\n    imageUV.x /= u_imageAspectRatio;\n    \n    imageUV += .5;\n    imageUV.y = 1. - imageUV.y;\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

@@ -47,7 +47,6 @@ const sizingUV = `
   vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
   vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
   givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
-  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));
   float r = u_rotation * 3.14159265358979323846 / 180.;
   mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
   vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
@@ -66,9 +65,9 @@ const sizingUV = `
     // fit = none
     objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);
     if (u_fit == 1.) { // fit = contain
-      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);
+      objectBoxSize.x = fixedRatio * min(u_resolution.x / fixedRatio, u_resolution.y);
     } else if (u_fit == 2.) {  // fit = cover
-      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);
+      objectBoxSize.x = fixedRatio * max(u_resolution.x / fixedRatio, u_resolution.y);
     }
     objectBoxSize.y = objectBoxSize.x / fixedRatio;
     vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
@@ -104,9 +103,9 @@ const sizingUV = `
     patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
     float patternWorldNoFitBoxWidth = patternBoxSize.x;
     if (u_fit == 1.) {  // fit = contain
-      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
+      patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);
     } else if (u_fit == 2.) {  // fit = cover
-      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
+      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);
     }
     patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
     vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
@@ -143,9 +142,9 @@ const sizingUV = `
 
     vec2 imageBoxSize;
     if (u_fit == 1.) { // contain
-      imageBoxSize.x = min(maxBoxSize.x / u_imageAspectRatio, maxBoxSize.y) * u_imageAspectRatio;
+      imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
     } else if (u_fit == 2.) { // cover
-      imageBoxSize.x = max(maxBoxSize.x / u_imageAspectRatio, maxBoxSize.y) * u_imageAspectRatio;
+      imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
     } else {
       imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
     }

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;\nin vec2 v_imageUV;`;\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 The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part we insert at start.\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  // Sizing api for image filters\n  \n  #ifdef USE_IMAGE_SIZING\n\n    vec2 imageBoxSize;\n    if (u_fit == 1.) { // contain\n      imageBoxSize.x = min(maxBoxSize.x / u_imageAspectRatio, maxBoxSize.y) * u_imageAspectRatio;\n    } else if (u_fit == 2.) { // cover\n      imageBoxSize.x = max(maxBoxSize.x / u_imageAspectRatio, maxBoxSize.y) * u_imageAspectRatio;\n    } else {\n      imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n    }\n    imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n    vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n    #ifdef ADD_HELPERS\n      vec2 imageHelperBox = uv;\n      imageHelperBox *= imageBoxScale;\n      imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n    #endif\n\n    vec2 imageUV = uv;\n    imageUV *= imageBoxScale;\n    imageUV += boxOrigin * (imageBoxScale - 1.);\n    imageUV += graphicOffset;\n    imageUV /= u_scale;\n    imageUV.x *= u_imageAspectRatio;\n    imageUV = graphicRotation * imageUV;\n    imageUV.x /= u_imageAspectRatio;\n    \n    imageUV += .5;\n    imageUV.y = 1. - imageUV.y;\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;AAAA;AAWnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBlC,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;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;AAwJjB,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;\nin vec2 v_imageUV;`;\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 The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part we insert at start.\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  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(u_resolution.x / fixedRatio, u_resolution.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(u_resolution.x / fixedRatio, u_resolution.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(u_resolution.x / patternBoxRatio, u_resolution.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.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  // Sizing api for image filters\n  \n  #ifdef USE_IMAGE_SIZING\n\n    vec2 imageBoxSize;\n    if (u_fit == 1.) { // contain\n      imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n    } else if (u_fit == 2.) { // cover\n      imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n    } else {\n      imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n    }\n    imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n    vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n    #ifdef ADD_HELPERS\n      vec2 imageHelperBox = uv;\n      imageHelperBox *= imageBoxScale;\n      imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n    #endif\n\n    vec2 imageUV = uv;\n    imageUV *= imageBoxScale;\n    imageUV += boxOrigin * (imageBoxScale - 1.);\n    imageUV += graphicOffset;\n    imageUV /= u_scale;\n    imageUV.x *= u_imageAspectRatio;\n    imageUV = graphicRotation * imageUV;\n    imageUV.x /= u_imageAspectRatio;\n    \n    imageUV += .5;\n    imageUV.y = 1. - imageUV.y;\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;AAAA;AAWnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBlC,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;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;AAuJjB,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/color-panels.js

@@ -53,12 +53,12 @@ vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
   float zOffset = zRatio - .5;
   float left = -.5 + zOffset * u_angle1;
   float right = .5 - zOffset * u_angle2;
-  float blurX = aa + panelMap * u_blur;
+  float blurX = aa + 2. * panelMap * u_blur;
 
-  float leftEdge1 = left - .5 * blurX;
-  float leftEdge2 = left + blurX;
-  float rightEdge1 = right - blurX;
-  float rightEdge2 = right + .5 * blurX;
+  float leftEdge1 = left - blurX;
+  float leftEdge2 = left + .25 * blurX;
+  float rightEdge1 = right - .25 * blurX;
+  float rightEdge2 = right + blurX;
 
   float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
   panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));

package/dist/shaders/color-panels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/color-panels.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\n\nexport const colorPanelsMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Pseudo-3D panels rotating around a central axis\n *\n * Uniforms include:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_density: angle between every 2 panels\n * - u_angle1, u_angle2: skew angle applied to all panes\n * - u_length: panel length (relative to total height)\n * - u_edges: faking edges effect\n * - u_blur: side blur (0 for sharp edges)\n * - u_fadeIn: transparency near central axis\n * - u_fadeOut: transparency near viewer\n * - u_gradient: color mixing within panes (0 = single color, 1 = two colors)\n *\n */\n\n// language=GLSL\nexport const colorPanelsFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\nuniform mediump float u_scale;\n\nuniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_density;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform bool u_edges;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_gradient;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nconst float zLimit = .5;\n\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < .01) return vec2(0.);\n  \n  float z = uv.y / denom;\n\n  if (z <= 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1. - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n  float blurX = aa + panelMap * u_blur;\n\n  float leftEdge1 = left - .5 * blurX;\n  float leftEdge2 = left + blurX;\n  float rightEdge1 = right - blurX;\n  float rightEdge2 = right + .5 * blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n  panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));\n\n  float midScreen = abs(sinA);\n  if (u_edges == true) {\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\n  } else if (midScreen < .07) {\n    panel *= (midScreen * 15.);\n  }\n  \n  return vec2(panel, panelMap);\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = smoothstep(1., .97 - .97 * u_fadeIn, panelMap);\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = v_objectUV;\n  uv *= 1.25;\n\n  float t = .02 * u_time;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  float aa = .005 / u_scale;\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];\n  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / (u_length + 0.001);\n\n  float totalColorWeight = 0.;\n  int panelsNumber = 12;\n\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n\n  float totalPanelsShape = 0.;\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      if (angleNorm > .5) {\n        angleNorm = 0.5;\n      }\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      if (panel[0] <= .001) continue;\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ColorPanelsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_colorBack: [number, number, number, number];\n  u_angle1: number;\n  u_angle2: number;\n  u_length: number;\n  u_edges: boolean;\n  u_blur: number;\n  u_fadeIn: number;\n  u_fadeOut: number;\n  u_density: number;\n  u_gradient: number;\n}\n\nexport interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  angle1?: number;\n  angle2?: number;\n  length?: number;\n  edges?: boolean;\n  blur?: number;\n  fadeIn?: number;\n  fadeOut?: number;\n  density?: number;\n  gradient?: number;\n}\n"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\n\nexport const colorPanelsMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Pseudo-3D panels rotating around a central axis\n *\n * Uniforms include:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_density: angle between every 2 panels\n * - u_angle1, u_angle2: skew angle applied to all panes\n * - u_length: panel length (relative to total height)\n * - u_edges: faking edges effect\n * - u_blur: side blur (0 for sharp edges)\n * - u_fadeIn: transparency near central axis\n * - u_fadeOut: transparency near viewer\n * - u_gradient: color mixing within panes (0 = single color, 1 = two colors)\n *\n */\n\n// language=GLSL\nexport const colorPanelsFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\nuniform mediump float u_scale;\n\nuniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_density;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform bool u_edges;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_gradient;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nconst float zLimit = .5;\n\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < .01) return vec2(0.);\n  \n  float z = uv.y / denom;\n\n  if (z <= 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1. - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n  float blurX = aa + 2. * panelMap * u_blur;\n\n  float leftEdge1 = left - blurX;\n  float leftEdge2 = left + .25 * blurX;\n  float rightEdge1 = right - .25 * blurX;\n  float rightEdge2 = right + blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n  panel *= mix(0., panel, smoothstep(0., .01 / u_scale, panelMap));\n\n  float midScreen = abs(sinA);\n  if (u_edges == true) {\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\n  } else if (midScreen < .07) {\n    panel *= (midScreen * 15.);\n  }\n  \n  return vec2(panel, panelMap);\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = smoothstep(1., .97 - .97 * u_fadeIn, panelMap);\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = v_objectUV;\n  uv *= 1.25;\n\n  float t = .02 * u_time;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  float aa = .005 / u_scale;\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];\n  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / (u_length + 0.001);\n\n  float totalColorWeight = 0.;\n  int panelsNumber = 12;\n\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n\n  float totalPanelsShape = 0.;\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      if (angleNorm > .5) {\n        angleNorm = 0.5;\n      }\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      if (panel[0] <= .001) continue;\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ColorPanelsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_colorBack: [number, number, number, number];\n  u_angle1: number;\n  u_angle2: number;\n  u_length: number;\n  u_edges: boolean;\n  u_blur: number;\n  u_fadeIn: number;\n  u_fadeOut: number;\n  u_density: number;\n  u_gradient: number;\n}\n\nexport interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  angle1?: number;\n  angle2?: number;\n  length?: number;\n  edges?: boolean;\n  blur?: number;\n  fadeIn?: number;\n  fadeOut?: number;\n  density?: number;\n  gradient?: number;\n}\n"],
   "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AACjB;AAoBO,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMzB,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAanD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;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,6BAkEkB,gBAAgB,aAAa;AAAA,wBAClC,gBAAgB,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;AAAA;AAAA;AAAA;AAAA;AAAA,IAiHjD,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/dithering.d.ts

@@ -9,7 +9,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_shape (float used as integer):
  * ---- 1: simplex noise pattern
  * ---- 2: warp noise pattern
- * ---- 3: columns if dots moving vertically
+ * ---- 3: columns of dots moving vertically
  * ---- 4: sine wave
  * ---- 5: ripple effect
  * ---- 6: swirl animation

package/dist/shaders/dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * 2-color dithering effect over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - pxSize: px size relative to canvas resolution\n * - u_shape (float used as integer):\n * ---- 1: simplex noise pattern\n * ---- 2: warp noise pattern\n * ---- 3: columns if dots moving vertically\n * ---- 4: sine wave\n * ---- 5: ripple effect\n * ---- 6: swirl animation\n * ---- 7: rotating sphere\n *  - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${simplexNoise}\n${declarePI}\n${proceduralHash11}\n${proceduralHash21}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv * u_resolution;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * 2-color dithering effect over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - pxSize: px size relative to canvas resolution\n * - u_shape (float used as integer):\n * ---- 1: simplex noise pattern\n * ---- 2: warp noise pattern\n * ---- 3: columns of dots moving vertically\n * ---- 4: sine wave\n * ---- 5: ripple effect\n * ---- 6: swirl animation\n * ---- 7: rotating sphere\n *  - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${simplexNoise}\n${declarePI}\n${proceduralHash11}\n${proceduralHash21}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv * u_resolution;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFront: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorFront?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  'random': 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
   "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc,WAAW,kBAAkB,wBAAwB;AA0BrE,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;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,IAmDd,QAAQ;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;AAAA;AAAA;AAAA;AAAA;AAAA,MAkHN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/grain-gradient.js

@@ -155,8 +155,8 @@ void main() {
     // Grid (dots)
 
     float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
-    float rand = hash11(stripeIdx + 2.);
-    rand = sign(rand - .5) * pow(.2 + abs(rand), .3);
+    float rand = hash11(stripeIdx * 100.);
+    rand = sign(rand - .5) * pow(4. * abs(rand), .3);
     shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);
     shape = pow(shape, 4.);
 
@@ -236,7 +236,7 @@ void main() {
 
   float simplex = snoise(grain_uv * .5);
   float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);
-  float rawNoise = .6 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);
+  float rawNoise = .75 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);
   float noise = clamp(rawNoise, 0., 1.);
 
   shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);