@paper-design/shaders 0.0.68 → 0.0.69

package/dist/index.d.ts

@@ -57,6 +57,8 @@ export { heatmapMeta, heatmapFragmentShader, toProcessedHeatmap, type HeatmapPar
 export { liquidMetalFragmentShader, LiquidMetalShapes, toProcessedLiquidMetal, type LiquidMetalShape, type LiquidMetalParams, type LiquidMetalUniforms, } from './shaders/liquid-metal.js';
 /** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */
 export { HalftoneDotsTypes, HalftoneDotsGrids, halftoneDotsFragmentShader, type HalftoneDotsParams, type HalftoneDotsUniforms, type HalftoneDotsType, type HalftoneDotsGrid, } from './shaders/halftone-dots.js';
+/** A halftone CMYK classic algo */
+export { HalftoneCmykTypes, halftoneCmykFragmentShader, type HalftoneCmykParams, type HalftoneCmykUniforms, type HalftoneCmykType, } from './shaders/halftone-cmyk.js';
 export { getShaderColorFromString } from './get-shader-color-from-string.js';
 export { getShaderNoiseTexture } from './get-shader-noise-texture.js';
 export { getEmptyPixel } from './get-empty-pixel.js';

package/dist/index.js

@@ -99,6 +99,10 @@ import {
   HalftoneDotsGrids,
   halftoneDotsFragmentShader
 } from "./shaders/halftone-dots.js";
+import {
+  HalftoneCmykTypes,
+  halftoneCmykFragmentShader
+} from "./shaders/halftone-cmyk.js";
 import { getShaderColorFromString } from "./get-shader-color-from-string.js";
 import { getShaderNoiseTexture } from "./get-shader-noise-texture.js";
 import { getEmptyPixel } from "./get-empty-pixel.js";
@@ -109,6 +113,7 @@ export {
   GlassDistortionShapes,
   GlassGridShapes,
   GrainGradientShapes,
+  HalftoneCmykTypes,
   HalftoneDotsGrids,
   HalftoneDotsTypes,
   LiquidMetalShapes,
@@ -132,6 +137,7 @@ export {
   godRaysMeta,
   grainGradientFragmentShader,
   grainGradientMeta,
+  halftoneCmykFragmentShader,
   halftoneDotsFragmentShader,
   heatmapFragmentShader,
   heatmapMeta,

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 {\n  PaperShaderElement,\n  ShaderMotionParams,\n  ShaderMountUniforms,\n  ShaderPreset,\n  ImageShaderPreset,\n} 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/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient.js';\n\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring.js';\n\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\n\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\n\n/** Static grid pattern made of circles, diamonds, squares or triangles */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid.js';\n\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise.js';\n\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs.js';\n\n/** Animated 3D Perlin noise with exposed controls */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\n\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\n\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp.js';\n\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\n\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\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/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient.js';\n\n/** Luminous trails of color merging into a glowing gradient frame */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  PulsingBorderAspectRatios,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n  type PulsingBorderAspectRatio,\n} from './shaders/pulsing-border.js';\n\n/** Glowing translucent 3D panels rotating around a central axis */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\nexport {\n  paperTextureFragmentShader,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\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\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  toProcessedLiquidMetal,\n  type LiquidMetalShape,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n} from './shaders/liquid-metal.js';\n\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\nexport {\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n  halftoneDotsFragmentShader,\n  type HalftoneDotsParams,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsType,\n  type HalftoneDotsGrid,\n} from './shaders/halftone-dots.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\nexport { getEmptyPixel } from './get-empty-pixel.js';\n"],
-  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAUlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;",
+  "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 {\n  PaperShaderElement,\n  ShaderMotionParams,\n  ShaderMountUniforms,\n  ShaderPreset,\n  ImageShaderPreset,\n} 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/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient.js';\n\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring.js';\n\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\n\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\n\n/** Static grid pattern made of circles, diamonds, squares or triangles */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid.js';\n\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise.js';\n\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs.js';\n\n/** Animated 3D Perlin noise with exposed controls */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\n\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\n\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp.js';\n\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\n\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\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/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient.js';\n\n/** Luminous trails of color merging into a glowing gradient frame */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  PulsingBorderAspectRatios,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n  type PulsingBorderAspectRatio,\n} from './shaders/pulsing-border.js';\n\n/** Glowing translucent 3D panels rotating around a central axis */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\nexport {\n  paperTextureFragmentShader,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\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\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  toProcessedLiquidMetal,\n  type LiquidMetalShape,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n} from './shaders/liquid-metal.js';\n\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\nexport {\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n  halftoneDotsFragmentShader,\n  type HalftoneDotsParams,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsType,\n  type HalftoneDotsGrid,\n} from './shaders/halftone-dots.js';\n\n/** A halftone CMYK classic algo */\nexport {\n  HalftoneCmykTypes,\n  halftoneCmykFragmentShader,\n  type HalftoneCmykParams,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykType,\n} from './shaders/halftone-cmyk.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\nexport { getEmptyPixel } from './get-empty-pixel.js';\n"],
+  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAUlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;",
   "names": []
 }

package/dist/shader-sizing.d.ts

@@ -1,6 +1,3 @@
-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 interface ShaderSizingUniforms {
     u_fit: (typeof ShaderFitOptions)[ShaderFit];
     u_scale: number;

package/dist/shader-sizing.js

@@ -3,30 +3,6 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-const sizingVariablesDeclaration = `
-in vec2 v_objectUV;
-in vec2 v_responsiveUV;
-in vec2 v_responsiveBoxGivenSize;
-in vec2 v_patternUV;
-in vec2 v_imageUV;`;
-const sizingDebugVariablesDeclaration = `
-in vec2 v_objectBoxSize;
-in vec2 v_objectHelperBox;
-in vec2 v_responsiveBoxSize;
-in vec2 v_responsiveHelperBox;
-in vec2 v_patternBoxSize;
-in vec2 v_patternHelperBox;`;
-const sizingUniformsDeclaration = `
-uniform float u_originX;
-uniform float u_originY;
-uniform float u_worldWidth;
-uniform float u_worldHeight;
-uniform float u_fit;
-
-uniform float u_scale;
-uniform float u_rotation;
-uniform float u_offsetX;
-uniform float u_offsetY;`;
 const defaultObjectSizing = {
   fit: "contain",
   scale: 1,
@@ -57,9 +33,6 @@ const ShaderFitOptions = {
 export {
   ShaderFitOptions,
   defaultObjectSizing,
-  defaultPatternSizing,
-  sizingDebugVariablesDeclaration,
-  sizingUniformsDeclaration,
-  sizingVariablesDeclaration
+  defaultPatternSizing
 };
 //# sourceMappingURL=shader-sizing.js.map

package/dist/shader-sizing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-sizing.ts"],
-  "sourcesContent": ["export const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;\nin vec2 v_imageUV;`;\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\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\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": ";;;;;AAAO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoClC,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": ["export 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": ";;;;;AAwBO,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

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { declarePI, colorBandingFix } from "../shader-utils.js";
 const colorPanelsMeta = {
   maxColorCount: 7
@@ -27,7 +27,7 @@ uniform float u_fadeIn;
 uniform float u_fadeOut;
 uniform float u_gradient;
 
-${sizingVariablesDeclaration}
+in vec2 v_objectUV;
 
 out vec4 fragColor;
 

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 semi-transparent panels rotating around a central axis\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 7 RGBA colors used to color the panels\n * - u_colorsCount (float): Number of active colors\n * - u_colorBack (vec4): Background color in RGBA\n * - u_density (float): Angle between every 2 panels (0.25 to 7)\n * - u_angle1 (float): Skew angle applied to all panes (-1 to 1)\n * - u_angle2 (float): Skew angle applied to all panes (-1 to 1)\n * - u_length (float): Panel length relative to total height (0 to 3)\n * - u_edges (bool): Color highlight on the panels edges\n * - u_blur (float): Side blur, 0 for sharp edges (0 to 0.5)\n * - u_fadeIn (float): Transparency near central axis (0 to 1)\n * - u_fadeOut (float): Transparency near viewer (0 to 1)\n * - u_gradient (float): Color mixing within a panel, 0 = solid, 1 = gradient (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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 / max(u_scale, 1e-6), 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 = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);\n\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 / max(u_length, .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;AAwCO,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,gBAAgB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAapD,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAmEiB,gBAAgB,aAAc;AAAA,wBACnC,gBAAgB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiHlD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { 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 semi-transparent panels rotating around a central axis\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\n * - u_colors (vec4[]): Up to 7 RGBA colors used to color the panels\n * - u_colorsCount (float): Number of active colors\n * - u_colorBack (vec4): Background color in RGBA\n * - u_density (float): Angle between every 2 panels (0.25 to 7)\n * - u_angle1 (float): Skew angle applied to all panes (-1 to 1)\n * - u_angle2 (float): Skew angle applied to all panes (-1 to 1)\n * - u_length (float): Panel length relative to total height (0 to 3)\n * - u_edges (bool): Color highlight on the panels edges\n * - u_blur (float): Side blur, 0 for sharp edges (0 to 0.5)\n * - u_fadeIn (float): Transparency near central axis (0 to 1)\n * - u_fadeOut (float): Transparency near viewer (0 to 1)\n * - u_gradient (float): Color mixing within a panel, 0 = solid, 1 = gradient (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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\nin vec2 v_objectUV;\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 / max(u_scale, 1e-6), 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 = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);\n\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 / max(u_length, .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,eAAmE;AACnE,SAAS,WAAW,uBAAuB;AAEpC,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AACjB;AAwCO,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,gBAAgB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBpD,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAmEiB,gBAAgB,aAAc;AAAA,wBACnC,gBAAgB,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiHlD,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/dithering.d.ts

@@ -2,19 +2,30 @@ import type { ShaderMotionParams } from '../shader-mount.js';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
  * Animated 2-color dithering over multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).
- * Great for retro, print-like, or stylized UI textures.
  *
- * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit
+ * SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep
+ * u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any
+ * transforms, so scaling/rotating only affects the underlying pattern shape.
+ * No vertex shader outputs (v_objectUV, v_patternUV, etc.) are used.
  *
  * Fragment shader uniforms:
  * - u_time (float): Animation time
  * - u_resolution (vec2): Canvas resolution in pixels
  * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
  * - u_colorBack (vec4): Background color in RGBA
  * - u_colorFront (vec4): Foreground (ink) color in RGBA
  * - u_shape (float): Shape pattern type (1 = simplex, 2 = warp, 3 = dots, 4 = wave, 5 = ripple, 6 = swirl, 7 = sphere)
  * - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)
- * - u_pxSize (float; duplicate, not currently used)
+ * - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)
  *
  * */
 export declare const ditheringFragmentShader: string;

package/dist/shaders/dithering.js

@@ -4,17 +4,24 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import {
-  sizingUniformsDeclaration
 } from "../shader-sizing.js";
 import { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from "../shader-utils.js";
 const ditheringFragmentShader = `#version 300 es
 precision mediump float;
 
 uniform float u_time;
+
 uniform vec2 u_resolution;
 uniform float u_pixelRatio;
-
-${sizingUniformsDeclaration}
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
 
 uniform float u_pxSize;
 uniform vec4 u_colorBack;

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} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Animated 2-color dithering over multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).\n * Great for retro, print-like, or stylized UI textures.\n *\n * Note: pixelization is applied to the shapes BEFORE dithering, meaning pixels don't react to scaling and fit\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\n * - u_shape (float): Shape pattern type (1 = simplex, 2 = warp, 3 = dots, 4 = wave, 5 = ripple, 6 = swirl, 7 = sphere)\n * - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)\n * - u_pxSize (float; duplicate, not currently used)\n *\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 float u_pxSize;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\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](\n0, 8, 2, 10,\n12, 4, 14, 6,\n3, 11, 1, 9,\n15, 7, 13, 5\n);\n\nconst int bayer8x8[64] = int[64](\n0, 32, 8, 40, 2, 34, 10, 42,\n48, 16, 56, 24, 50, 18, 58, 26,\n12, 44, 4, 36, 14, 46, 6, 38,\n60, 28, 52, 20, 62, 30, 54, 22,\n3, 35, 11, 43, 1, 33, 9, 41,\n51, 19, 59, 27, 49, 17, 57, 25,\n15, 47, 7, 39, 13, 45, 5, 37,\n63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(fract(uv / float(size)) * 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  float pxSize = u_pxSize * u_pixelRatio;\n  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;\n  pxSizeUV /= pxSize;\n  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;\n  vec2 normalizedUV = canvasPixelizedUV / u_resolution;\n\n  vec2 ditheringNoiseUV = canvasPixelizedUV;\n  vec2 shapeUV = normalizedUV;\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 * PI / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 boxSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  \n  if (u_shape > 3.5) {\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = min(boxSize.x, boxSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = min(u_resolution.x, u_resolution.y);\n    } else if (u_fit == 2.) { // fit = cover\n      objectBoxSize.x = max(u_resolution.x, u_resolution.y);\n    }\n    objectBoxSize.y = objectBoxSize.x;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n\n    shapeUV *= objectWorldScale;\n    shapeUV += boxOrigin * (objectWorldScale - 1.);\n    shapeUV += vec2(-u_offsetX, u_offsetY);\n    shapeUV /= u_scale;\n    shapeUV = graphicRotation * shapeUV;\n  } else {\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.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    shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    shapeUV += boxOrigin;\n    shapeUV -= boxOrigin / patternWorldScale;\n    shapeUV *= u_resolution.xy;\n    shapeUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    shapeUV /= u_scale;\n    shapeUV = graphicRotation * shapeUV;\n    shapeUV += boxOrigin / patternWorldScale;\n    shapeUV -= boxOrigin;\n    shapeUV += .5;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shapeUV *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shapeUV *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);\n      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);\n    }\n\n    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shapeUV *= .05;\n\n    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shapeUV *= 4.;\n\n    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shapeUV);\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(shapeUV);\n    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;\n    float twist = 1.2;\n    float offset = 1. / pow(max(l, 1e-6), 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    shapeUV *= 2.;\n\n    float d = 1. - pow(length(shapeUV), 2.);\n    vec3 pos = vec3(shapeUV, sqrt(max(0., 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(ditheringNoiseUV), shape);\n    } break;\n    case 2:\n    dithering = getBayerValue(pxSizeUV, 2);\n    break;\n    case 3:\n    dithering = getBayerValue(pxSizeUV, 4);\n    break;\n    default :\n    dithering = getBayerValue(pxSizeUV, 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  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  size?: 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,OAGK;AACP,SAAS,cAAc,WAAW,kBAAkB,wBAAwB;AAqBrE,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5C,yBAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU1B,YAAa;AAAA,EACb,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuOb,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;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from '../shader-sizing.js';\nimport { simplexNoise, declarePI, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Animated 2-color dithering over multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere).\n *\n * SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep\n * u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any\n * transforms, so scaling/rotating only affects the underlying pattern shape.\n * No vertex shader outputs (v_objectUV, v_patternUV, etc.) are used.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFront (vec4): Foreground (ink) color in RGBA\n * - u_shape (float): Shape pattern type (1 = simplex, 2 = warp, 3 = dots, 4 = wave, 5 = ripple, 6 = swirl, 7 = sphere)\n * - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)\n * - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)\n *\n * */\n\n// language=GLSL\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFront;\nuniform float u_shape;\nuniform float u_type;\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](\n0, 8, 2, 10,\n12, 4, 14, 6,\n3, 11, 1, 9,\n15, 7, 13, 5\n);\n\nconst int bayer8x8[64] = int[64](\n0, 32, 8, 40, 2, 34, 10, 42,\n48, 16, 56, 24, 50, 18, 58, 26,\n12, 44, 4, 36, 14, 46, 6, 38,\n60, 28, 52, 20, 62, 30, 54, 22,\n3, 35, 11, 43, 1, 33, 9, 41,\n51, 19, 59, 27, 49, 17, 57, 25,\n15, 47, 7, 39, 13, 45, 5, 37,\n63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(fract(uv / float(size)) * 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  float pxSize = u_pxSize * u_pixelRatio;\n  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;\n  pxSizeUV /= pxSize;\n  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;\n  vec2 normalizedUV = canvasPixelizedUV / u_resolution;\n\n  vec2 ditheringNoiseUV = canvasPixelizedUV;\n  vec2 shapeUV = normalizedUV;\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 * PI / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 boxSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  \n  if (u_shape > 3.5) {\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = min(boxSize.x, boxSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = min(u_resolution.x, u_resolution.y);\n    } else if (u_fit == 2.) { // fit = cover\n      objectBoxSize.x = max(u_resolution.x, u_resolution.y);\n    }\n    objectBoxSize.y = objectBoxSize.x;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n\n    shapeUV *= objectWorldScale;\n    shapeUV += boxOrigin * (objectWorldScale - 1.);\n    shapeUV += vec2(-u_offsetX, u_offsetY);\n    shapeUV /= u_scale;\n    shapeUV = graphicRotation * shapeUV;\n  } else {\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.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    shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    shapeUV += boxOrigin;\n    shapeUV -= boxOrigin / patternWorldScale;\n    shapeUV *= u_resolution.xy;\n    shapeUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    shapeUV /= u_scale;\n    shapeUV = graphicRotation * shapeUV;\n    shapeUV += boxOrigin / patternWorldScale;\n    shapeUV -= boxOrigin;\n    shapeUV += .5;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shapeUV *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shapeUV *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);\n      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);\n    }\n\n    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shapeUV *= .05;\n\n    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);\n    float rand = hash11(stripeIdx * 10.);\n    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);\n    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);\n    shape = pow(abs(shape), 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shapeUV *= 4.;\n\n    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shapeUV);\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(shapeUV);\n    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;\n    float twist = 1.2;\n    float offset = 1. / pow(max(l, 1e-6), 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    shapeUV *= 2.;\n\n    float d = 1. - pow(length(shapeUV), 2.);\n    vec3 pos = vec3(shapeUV, sqrt(max(0., 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(ditheringNoiseUV), shape);\n    } break;\n    case 2:\n    dithering = getBayerValue(pxSizeUV, 2);\n    break;\n    case 3:\n    dithering = getBayerValue(pxSizeUV, 4);\n    break;\n    default :\n    dithering = getBayerValue(pxSizeUV, 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  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  size?: 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,OAGO;AACP,SAAS,cAAc,WAAW,kBAAkB,wBAAwB;AAgCrE,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyB5C,YAAa;AAAA,EACb,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuOb,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/dot-grid.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { declarePI, simplexNoise } from "../shader-utils.js";
 const dotGridFragmentShader = `#version 300 es
 precision mediump float;
@@ -19,7 +19,7 @@ uniform float u_sizeRange;
 uniform float u_opacityRange;
 uniform float u_shape;
 
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 out vec4 fragColor;
 

package/dist/shaders/dot-grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-grid.ts"],
-  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, simplexNoise } from '../shader-utils.js';\n\n/**\n * Static grid pattern made of circles, diamonds, squares or triangles.\n *\n * Fragment shader uniforms:\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFill (vec4): Shape fill color in RGBA\n * - u_colorStroke (vec4): Shape stroke color in RGBA\n * - u_dotSize (float): Base size of each shape in pixels (1 to 100)\n * - u_gapX (float): Pattern horizontal spacing in pixels (2 to 500)\n * - u_gapY (float): Pattern vertical spacing in pixels (2 to 500)\n * - u_strokeWidth (float): Outline stroke width in pixels (0 to 50)\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\n * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)\n * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${ sizingVariablesDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  vec2 shape_uv = 100. * v_patternUV;\n\n  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));\n  vec2 grid = fract(shape_uv / gap) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / gap);\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y = 1. - p.y;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);\n  float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);\n  float stroke = shapeOuter - shapeInner;\n\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n  stroke *= dotOpacity;\n  shapeInner *= dotOpacity;\n\n  stroke *= u_colorStroke.a;\n  shapeInner *= u_colorFill.a;\n\n  vec3 color = vec3(0.);\n  color += stroke * u_colorStroke.rgb;\n  color += shapeInner * u_colorFill.rgb;\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n  float opacity = 0.;\n  opacity += stroke;\n  opacity += shapeInner;\n  opacity += (1. - opacity) * u_colorBack.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gapX: number;\n  u_gapY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  size?: number;\n  gapX?: number;\n  gapY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
-  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,oBAAoB;AAoCjC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc1C,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoGT,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
+  "sourcesContent": ["import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, simplexNoise } from '../shader-utils.js';\n\n/**\n * Static grid pattern made of circles, diamonds, squares or triangles.\n *\n * Fragment shader uniforms:\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorFill (vec4): Shape fill color in RGBA\n * - u_colorStroke (vec4): Shape stroke color in RGBA\n * - u_dotSize (float): Base size of each shape in pixels (1 to 100)\n * - u_gapX (float): Pattern horizontal spacing in pixels (2 to 500)\n * - u_gapY (float): Pattern vertical spacing in pixels (2 to 500)\n * - u_strokeWidth (float): Outline stroke width in pixels (0 to 50)\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\n * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)\n * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ simplexNoise }\n\nfloat polygon(vec2 p, float N, float rot) {\n  float a = atan(p.x, p.y) + rot;\n  float r = TWO_PI / float(N);\n\n  return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  vec2 shape_uv = 100. * v_patternUV;\n\n  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));\n  vec2 grid = fract(shape_uv / gap) + 1e-4;\n  vec2 grid_idx = floor(shape_uv / gap);\n  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n  vec2 center = vec2(0.5) - 1e-3;\n  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n  float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n  float dist;\n  if (u_shape < 0.5) {\n    // Circle\n    dist = length(p);\n  } else if (u_shape < 1.5) {\n    // Diamond\n    strokeWidth *= 1.5;\n    dist = polygon(1.5 * p, 4., .25 * PI);\n  } else if (u_shape < 2.5) {\n    // Square\n    dist = polygon(1.03 * p, 4., 1e-3);\n  } else {\n    // Triangle\n    strokeWidth *= 1.5;\n    p = p * 2. - 1.;\n    p *= .9;\n    p.y = 1. - p.y;\n    p.y -= .75 * baseSize;\n    dist = polygon(p, 3., 1e-3);\n  }\n\n  float edgeWidth = fwidth(dist);\n  float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);\n  float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);\n  float stroke = shapeOuter - shapeInner;\n\n  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n  stroke *= dotOpacity;\n  shapeInner *= dotOpacity;\n\n  stroke *= u_colorStroke.a;\n  shapeInner *= u_colorFill.a;\n\n  vec3 color = vec3(0.);\n  color += stroke * u_colorStroke.rgb;\n  color += shapeInner * u_colorFill.rgb;\n  color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;\n\n  float opacity = 0.;\n  opacity += stroke;\n  opacity += shapeInner;\n  opacity += (1. - opacity) * u_colorBack.a;\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorFill: [number, number, number, number];\n  u_colorStroke: [number, number, number, number];\n  u_dotSize: number;\n  u_gapX: number;\n  u_gapY: number;\n  u_strokeWidth: number;\n  u_sizeRange: number;\n  u_opacityRange: number;\n  u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n  colorBack?: string;\n  colorFill?: string;\n  colorStroke?: string;\n  size?: number;\n  gapX?: number;\n  gapY?: number;\n  strokeWidth?: number;\n  sizeRange?: number;\n  opacityRange?: number;\n  shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n  circle: 0,\n  diamond: 1,\n  square: 2,\n  triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
+  "mappings": ";;;;;AAAA,eAAmE;AACnE,SAAS,WAAW,oBAAoB;AAoCjC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkB1C,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoGT,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
   "names": []
 }

package/dist/shaders/dot-orbit.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from "../shader-utils.js";
 const dotOrbitMeta = {
   maxColorCount: 10
@@ -23,7 +23,7 @@ uniform float u_size;
 uniform float u_sizeRange;
 uniform float u_spreading;
 
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 out vec4 fragColor;
 
@@ -55,7 +55,6 @@ vec3 voronoiShape(vec2 uv, float time) {
         minDist = dist;
         randomizer = rand;
       }
-      minDist = min(minDist, dist);
     }
   }
 

package/dist/shaders/dot-orbit.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-orbit.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, rotation2, textureRandomizerR, textureRandomizerGB } from '../shader-utils.js';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated multi-color dots pattern with each dot orbiting around its cell center.\n * Supports up to 10 colors and various shape and motion controls.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 base colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc. (1 to 4)\n * - u_size (float): Dot radius relative to cell size (0 to 1)\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\n * - u_spreading (float): Maximum orbit distance around cell center (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ dotOrbitMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\n${ sizingVariablesDeclaration }\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ textureRandomizerR }\n${ textureRandomizerGB }\n\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = randomGB(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n      minDist = min(minDist, dist);\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.5;\n\n  const float firstFrameOffset = -10.;\n  float t = u_time + firstFrameOffset;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);\n\n  float shape = voronoi[1];\n\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${ dotOrbitMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n    localT = round(localT * steps) / steps;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  vec3 color = gradient.rgb * dots;\n  float opacity = gradient.a * dots;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB,2BAA2B;AAEvE,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAoCO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQrB,aAAa,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjD,0BAA2B;AAAA;AAAA;AAAA;AAAA,EAI3B,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA,EACnB,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAuDE,aAAa,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, textureRandomizerR, textureRandomizerGB } from '../shader-utils.js';\n\nexport const dotOrbitMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Animated multi-color dots pattern with each dot orbiting around its cell center.\n * Supports up to 10 colors and various shape and motion controls.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 10 base colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc. (1 to 4)\n * - u_size (float): Dot radius relative to cell size (0 to 1)\n * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)\n * - u_spreading (float): Maximum orbit distance around cell center (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with rotation and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const dotOrbitFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ dotOrbitMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_stepsPerColor;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_spreading;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ textureRandomizerR }\n${ textureRandomizerGB }\n\n\nvec3 voronoiShape(vec2 uv, float time) {\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  float spreading = .25 * clamp(u_spreading, 0., 1.);\n\n  float minDist = 1.;\n  vec2 randomizer = vec2(0.);\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tileOffset = vec2(float(x), float(y));\n      vec2 rand = randomGB(i_uv + tileOffset);\n      vec2 cellCenter = vec2(.5 + 1e-4);\n      cellCenter += spreading * cos(time + TWO_PI * rand);\n      cellCenter -= .5;\n      cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time);\n      cellCenter += .5;\n      float dist = length(tileOffset + cellCenter - f_uv);\n      if (dist < minDist) {\n        minDist = dist;\n        randomizer = rand;\n      }\n    }\n  }\n\n  return vec3(minDist, randomizer);\n}\n\nvoid main() {\n\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.5;\n\n  const float firstFrameOffset = -10.;\n  float t = u_time + firstFrameOffset;\n\n  vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;\n\n  float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2];\n  float dist = voronoi[0];\n  float edgeWidth = fwidth(dist);\n  float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist);\n\n  float shape = voronoi[1];\n\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${ dotOrbitMeta.maxColorCount }; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n    localT = round(localT * steps) / steps;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  vec3 color = gradient.rgb * dots;\n  float opacity = gradient.a * dots;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotOrbitUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_size: number;\n  u_sizeRange: number;\n  u_spreading: number;\n  u_stepsPerColor: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  size?: number;\n  sizeRange?: number;\n  spreading?: number;\n  stepsPerColor?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB,2BAA2B;AAEvE,MAAM,eAAe;AAAA,EAC1B,eAAe;AACjB;AAoCO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQrB,aAAa,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWjD,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA,EACnB,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAsDE,aAAa,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/fluted-glass.d.ts

@@ -7,13 +7,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * Fragment shader uniforms:
  * - u_resolution (vec2): Canvas resolution in pixels
  * - u_pixelRatio (float): Device pixel ratio
- * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
- * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
- * - u_fit (float): How to fit the rendered shader into the canvas dimensions (1 = contain, 2 = cover)
- * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
  * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
- * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
- * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
  * - u_image (sampler2D): Source image texture
  * - u_imageAspectRatio (float): Aspect ratio of the source image
  * - u_colorBack (vec4): Background color in RGBA
@@ -37,8 +31,21 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - u_grainMixer (float): Strength of grain distortion applied to shape edges (0 to 1)
  * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
  *
- * Note: This shader calculates image UVs directly in the fragment shader using gl_FragCoord,
- * rather than relying on vertex shader outputs.
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ *
  */
 export declare const flutedGlassFragmentShader: string;
 export interface FlutedGlassUniforms extends ShaderSizingUniforms {