@paper-design/shaders 0.0.52 → 0.0.53

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */
 export { ShaderMount, isPaperShaderElement } from './shader-mount.js';
-export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount.js';
+export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset, ImageShaderPreset, } from './shader-mount.js';
 /** Shader sizing options and uniforms */
 export { defaultObjectSizing, defaultPatternSizing, ShaderFitOptions, type ShaderFit, type ShaderSizingParams, type ShaderSizingUniforms, } from './shader-sizing.js';
 /** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */

package/dist/index.js.map

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

package/dist/shader-mount.d.ts

@@ -111,3 +111,14 @@ export type ShaderPreset<T> = {
     name: string;
     params: Required<T>;
 };
+export type ImageShaderPreset<T> = {
+    name: string;
+    /**
+     * Params for the shader excluding the image.
+     * Image is excluded as it isn't considered a preset,
+     * e.g. when switching between presets it shouldn't switch the image.
+     *
+     * While we exclude images from presets they should still be set with a default prop value so the code-first usage of shaders remains great.
+     */
+    params: Required<Omit<T, 'image'>>;
+};

package/dist/shader-mount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.ts"],
-  "sourcesContent": ["import { vertexShaderSource } from './vertex-shader.js';\n\nconst DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;\n\nexport class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: HTMLCanvasElement;\n  private gl: WebGL2RenderingContext;\n  private program: WebGLProgram | null = null;\n  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};\n  /** The fragment shader that we are using */\n  private fragmentShader: string;\n  /** Stores the RAF for the render loop */\n  private rafId: number | null = null;\n  /** Time of the last rendered frame */\n  private lastRenderTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private currentFrame = 0;\n  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */\n  private speed = 0;\n  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */\n  private providedUniforms: ShaderMountUniforms;\n  /** Just a sanity check to make sure frames don't run after we're disposed */\n  private hasBeenDisposed = false;\n  /** If the resolution of the canvas has changed since the last render */\n  private resolutionChanged = true;\n  /** Store textures that are provided by the user */\n  private textures: Map<string, WebGLTexture> = new Map();\n  private minPixelRatio;\n  private maxPixelCount;\n  private isSafari = isSafari();\n  private uniformCache: Record<string, unknown> = {};\n  private textureUnitMap: Map<string, number> = new Map();\n\n  constructor(\n    /** The div you'd like to mount the shader to. The shader will match its size. */\n    parentElement: HTMLElement,\n    fragmentShader: string,\n    uniforms: ShaderMountUniforms,\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 0,\n    /** Pass a frame to offset the starting u_time value and give deterministic results*/\n    frame = 0,\n    /**\n     * The minimum pixel ratio to render at, defaults to 2.\n     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.\n     */\n    minPixelRatio = 2,\n    /**\n     * The maximum amount of physical device pixels to render for the shader,\n     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.\n     * Actual DOM size of the canvas can be larger, it will just lose quality after this.\n     *\n     * May be reduced to improve performance or increased to improve quality on high-resolution screens.\n     */\n    maxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT\n  ) {\n    if (parentElement instanceof HTMLElement) {\n      this.parentElement = parentElement as PaperShaderElement;\n    } else {\n      throw new Error('Paper Shaders: parent element must be an HTMLElement');\n    }\n\n    if (!document.querySelector('style[data-paper-shader]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shader', '');\n      document.head.prepend(styleElement);\n    }\n\n    // Create the canvas element and mount it into the provided element\n    const canvasElement = document.createElement('canvas');\n    this.canvasElement = canvasElement;\n    this.parentElement.prepend(canvasElement);\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided frame value\n    this.currentFrame = frame;\n    this.minPixelRatio = minPixelRatio;\n    this.maxPixelCount = maxPixelCount;\n\n    const gl = canvasElement.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('Paper Shaders: WebGL is not supported in this browser');\n    }\n    this.gl = gl;\n\n    this.initProgram();\n    this.setupPositionAttribute();\n    // Grab the locations of the uniforms in the fragment shader\n    this.setupUniforms();\n    // Put the user provided values into the uniforms\n    this.setUniformValues(this.providedUniforms);\n    // Set up the resize observer to handle window resizing and set u_resolution\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark parent element as paper shader mount\n    this.parentElement.setAttribute('data-paper-shader', '');\n\n    // Add the shaderMount instance to the div mount element to make it easily accessible\n    this.parentElement.paperShaderMount = this;\n  }\n\n  private initProgram = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\n    const positionBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);\n    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    // Create a map to store all uniform locations\n    const uniformLocations: Record<string, WebGLUniformLocation | null> = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n    };\n\n    // Add locations for all provided uniforms\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);\n\n      // For texture uniforms, also look for the aspect ratio uniform\n      if (value instanceof HTMLImageElement) {\n        const aspectRatioUniformName = `${key}AspectRatio`;\n        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);\n      }\n    });\n\n    this.uniformLocations = uniformLocations;\n  };\n\n  /**\n   * The scale that we should render at.\n   * - Used to target 2x rendering even on 1x screens for better antialiasing\n   * - Prevents the virtual resolution from going beyond the maximum resolution\n   * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels\n   */\n  private renderScale = 1;\n  private parentWidth = 0;\n  private parentHeight = 0;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(([entry]) => {\n      if (entry?.borderBoxSize[0]) {\n        this.parentWidth = entry.borderBoxSize[0].inlineSize;\n        this.parentHeight = entry.borderBoxSize[0].blockSize;\n      }\n\n      this.handleResize();\n    });\n\n    this.resizeObserver.observe(this.parentElement);\n    visualViewport?.addEventListener('resize', this.handleVisualViewportChange);\n\n    const rect = this.parentElement.getBoundingClientRect();\n    this.parentWidth = rect.width;\n    this.parentHeight = rect.height;\n    this.handleResize();\n  };\n\n  // Visual viewport resize handler, mainly used to react to browser zoom changes.\n  // Wait 2 frames to align with when the resize observer callback is done (in case it might follow):\n  // - Frame 1: a paint after the visual viewport resize\n  // - Frame 2: a paint after the resize observer has been handled, if it was ever triggered\n  //\n  // Both resize observer and visual viewport will react to classic browser zoom changes,\n  // so we dedupe the callbacks, but pinch zoom only triggers the visual viewport handler.\n  private resizeRafId: number | null = null;\n  private handleVisualViewportChange = () => {\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    this.resizeRafId = requestAnimationFrame(() => {\n      this.resizeRafId = requestAnimationFrame(() => {\n        this.handleResize();\n      });\n    });\n  };\n\n  /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */\n  private handleResize = () => {\n    // Cancel any scheduled resize handlers\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    const pinchZoom = visualViewport?.scale ?? 1;\n\n    // Zoom level can be calculated comparing the browser's outerWidth and the viewport width.\n    // Note: avoid innerWidth, use visualViewport.width instead.\n    // - innerWidth is affected by pinch zoom in Safari, but not other browsers.\n    //   visualViewport.width works consistently in all browsers.\n    // - innerWidth is rounded to integer, but not visualViewport.width.\n    // - visualViewport.width is affected by hard scrollbars, so they need to be added manually\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    const innerWidth = visualViewport\n      ? visualViewport.scale * visualViewport.width + scrollbarWidth\n      : window.innerWidth;\n\n    // Slight rounding here helps the <canvas> maintain a consistent computed size as the zoom level changes\n    const classicZoom = Math.round((10000 * window.outerWidth) / innerWidth) / 10000;\n\n    // As of 2025, Safari reports physical devicePixelRatio, but other browsers add the current zoom level\n    // https://bugs.webkit.org/show_bug.cgi?id=124862\n    const realPixelRatio = this.isSafari ? devicePixelRatio : devicePixelRatio / classicZoom;\n    const targetPixelRatio = Math.max(realPixelRatio, this.minPixelRatio);\n    const targetRenderScale = targetPixelRatio * classicZoom * pinchZoom;\n    const targetPixelWidth = this.parentWidth * targetRenderScale;\n    const targetPixelHeight = this.parentHeight * targetRenderScale;\n\n    // Prevent the total rendered pixel count from exceeding maxPixelCount\n    const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);\n\n    const newRenderScale = targetRenderScale * Math.min(1, maxPixelCountHeadroom);\n    const newWidth = Math.round(this.parentWidth * newRenderScale);\n    const newHeight = Math.round(this.parentHeight * newRenderScale);\n\n    if (\n      this.canvasElement.width !== newWidth ||\n      this.canvasElement.height !== newHeight ||\n      this.renderScale !== newRenderScale // Usually, only render scale change when the user zooms in/out\n    ) {\n      this.renderScale = newRenderScale;\n      this.canvasElement.width = newWidth;\n      this.canvasElement.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n\n      // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n      this.render(performance.now());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    if (this.program === null) {\n      console.warn('Tried to render before program or gl was initialized');\n      return;\n    }\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastRenderTime;\n    this.lastRenderTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.currentFrame += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.currentFrame * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, this.renderScale);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\n      this.requestRender();\n    } else {\n      this.rafId = null;\n    }\n  };\n\n  private requestRender = () => {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  /** Creates a texture from an image and sets it into a uniform value */\n  private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {\n    if (!image.complete || image.naturalWidth === 0) {\n      throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);\n    }\n\n    // Clean up existing texture if present\n    const existingTexture = this.textures.get(uniformName);\n    if (existingTexture) {\n      this.gl.deleteTexture(existingTexture);\n    }\n\n    // Get texture unit\n    if (!this.textureUnitMap.has(uniformName)) {\n      this.textureUnitMap.set(uniformName, this.textureUnitMap.size);\n    }\n    const textureUnit = this.textureUnitMap.get(uniformName)!;\n    // Activate correct texture unit before creating the texture\n    this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\n\n    // Create and set up the new texture\n    const texture = this.gl.createTexture();\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n\n    // Set texture parameters\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    // Upload image to texture\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);\n    const error = this.gl.getError();\n    if (error !== this.gl.NO_ERROR || texture === null) {\n      console.error('Paper Shaders: WebGL error when uploading texture:', error);\n      return;\n    }\n\n    // Store the texture\n    this.textures.set(uniformName, texture);\n\n    // Set up texture unit and uniform\n    const location = this.uniformLocations[uniformName];\n    if (location) {\n      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}AspectRatio`;\n      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];\n      if (aspectRatioLocation) {\n        const aspectRatio = image.naturalWidth / image.naturalHeight;\n        this.gl.uniform1f(aspectRatioLocation, aspectRatio);\n      }\n    }\n  };\n\n  /** Utility: recursive equality test for all the uniforms */\n  private areUniformValuesEqual = (a: any, b: any): boolean => {\n    if (a === b) return true;\n    if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {\n      return a.every((val, i) => this.areUniformValuesEqual(val, (b as any)[i]));\n    }\n    return false;\n  };\n\n  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */\n  private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {\n    this.gl.useProgram(this.program);\n    Object.entries(updatedUniforms).forEach(([key, value]) => {\n      // Grab the value to use in the uniform cache\n      let cacheValue: ShaderMountUniforms[keyof ShaderMountUniforms] | string = value;\n      if (value instanceof HTMLImageElement) {\n        // Images use their src for the cache value to save memory\n        cacheValue = `${value.src.slice(0, 200)}|${value.naturalWidth}x${value.naturalHeight}`;\n      }\n\n      // Check if the uniform value has changed and, if not, bail early to avoid extra work\n      if (this.areUniformValuesEqual(this.uniformCache[key], cacheValue)) return;\n      // Update the uniform cache if we are still here\n      this.uniformCache[key] = cacheValue;\n\n      const location = this.uniformLocations[key];\n      if (!location) {\n        console.warn(`Uniform location for ${key} not found`);\n        return;\n      }\n\n      if (value instanceof HTMLImageElement) {\n        // Texture case, requires a good amount of code so it gets its own function:\n        this.setTextureUniform(key, value);\n      } else if (Array.isArray(value)) {\n        // Array case\n        let flatArray: number[] | null = null;\n        let valueLength: number | null = null;\n\n        // If it's an array of same-sized arrays, flatten it down so we can set the uniform\n        if (value[0] !== undefined && Array.isArray(value[0])) {\n          const firstChildLength = value[0].length;\n          if (value.every((arr) => (arr as number[]).length === firstChildLength)) {\n            // Array of same-sized arrays case, flattens the array sets it\n            flatArray = value.flat();\n            valueLength = firstChildLength;\n          } else {\n            console.warn(`All child arrays must be the same length for ${key}`);\n            return;\n          }\n        } else {\n          // Array of primitive values case, supports 2, 3, 4, 9, 16 length arrays\n          flatArray = value as number[];\n          valueLength = flatArray.length;\n        }\n\n        // Set the uniform based on array length... supports 2, 3, 4, 9, 16 length arrays of primitive values\n        // or arbitrary length arrays of arrays\n        switch (valueLength) {\n          case 2:\n            this.gl.uniform2fv(location, flatArray);\n            break;\n          case 3:\n            this.gl.uniform3fv(location, flatArray);\n            break;\n          case 4:\n            this.gl.uniform4fv(location, flatArray);\n            break;\n          case 9:\n            this.gl.uniformMatrix3fv(location, false, flatArray);\n            break;\n          case 16:\n            this.gl.uniformMatrix4fv(location, false, flatArray);\n            break;\n          default:\n            console.warn(`Unsupported uniform array length: ${valueLength}`);\n        }\n      } else if (typeof value === 'number') {\n        // Number case, supports floats and ints\n        this.gl.uniform1f(location, value);\n      } else if (typeof value === 'boolean') {\n        // Boolean case, supports true and false\n        this.gl.uniform1i(location, value ? 1 : 0);\n      } else {\n        // May happen on the server for SSR when undefined images are passed in\n        console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);\n      }\n    });\n  };\n\n  /** Gets the current total animation time from 0ms */\n  public getCurrentFrame = (): number => {\n    return this.currentFrame;\n  };\n\n  /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */\n  public setFrame = (newFrame: number): void => {\n    this.currentFrame = newFrame;\n    this.lastRenderTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastRenderTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */\n  public setMaxPixelCount = (newMaxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT): void => {\n    this.maxPixelCount = newMaxPixelCount;\n\n    this.handleResize();\n  };\n\n  /** Set the minimum pixel ratio for the shader */\n  public setMinPixelRatio = (newMinPixelRatio: number = 2): void => {\n    this.minPixelRatio = newMinPixelRatio;\n\n    this.handleResize();\n  };\n\n  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */\n  public setUniforms = (newUniforms: ShaderMountUniforms): void => {\n    this.setUniformValues(newUniforms);\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      // Clean up all textures\n      this.textures.forEach((texture) => {\n        this.gl.deleteTexture(texture);\n      });\n      this.textures.clear();\n\n      this.gl.deleteProgram(this.program);\n      this.program = null;\n\n      // Reset the WebGL context\n      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);\n      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n\n      // Clear any errors\n      this.gl.getError();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    visualViewport?.removeEventListener('resize', this.handleVisualViewportChange);\n\n    this.uniformLocations = {};\n\n    // Remove the shader mount from the div wrapper element to avoid any GC issues\n    this.parentElement.paperShaderMount = undefined;\n  };\n}\n\nfunction createShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction createProgram(\n  gl: WebGL2RenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const format = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);\n  const precision = format ? format.precision : null;\n  // MEDIUM_FLOAT precision can be 10, 16 or 23 bits depending on device;\n  // Shaders fail on 10 bit (and 16 bit is hard to test) => we force 23-bit by switching to highp\n  if (precision && precision < 23) {\n    vertexShaderSource = vertexShaderSource.replace(/precision\\s+(lowp|mediump)\\s+float;/g, 'precision highp float;');\n    fragmentShaderSource = fragmentShaderSource\n      .replace(/precision\\s+(lowp|mediump)\\s+float/g, 'precision highp float')\n      .replace(/\\b(uniform|varying|attribute)\\s+(lowp|mediump)\\s+(\\w+)/g, '$1 highp $3');\n  }\n\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n  if (!vertexShader || !fragmentShader) return null;\n\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\n    gl.deleteProgram(program);\n    gl.deleteShader(vertexShader);\n    gl.deleteShader(fragmentShader);\n    return null;\n  }\n\n  // Clean up shaders after successful linking\n  gl.detachShader(program, vertexShader);\n  gl.detachShader(program, fragmentShader);\n  gl.deleteShader(vertexShader);\n  gl.deleteShader(fragmentShader);\n\n  return program;\n}\n\nconst defaultStyle = `@layer paper-shaders {\n  :where([data-paper-shader]) {\n    isolation: isolate;\n    position: relative;\n\n    & canvas {\n      contain: strict;\n      display: block;\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      corner-shape: inherit;\n    }\n  }\n}`;\n\n/** The parent `<div>` element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if an element is a Paper shader element */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/**\n * Uniform types that we support to be auto-mapped into the fragment shader\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMotionParams {\n  speed?: number;\n  frame?: number;\n}\n\nexport type ShaderPreset<T> = {\n  name: string;\n  params: Required<T>;\n};\n\nfunction isSafari() {\n  const ua = navigator.userAgent.toLowerCase();\n  return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android');\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { vertexShaderSource } from './vertex-shader.js';\n\nconst DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;\n\nexport class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: HTMLCanvasElement;\n  private gl: WebGL2RenderingContext;\n  private program: WebGLProgram | null = null;\n  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};\n  /** The fragment shader that we are using */\n  private fragmentShader: string;\n  /** Stores the RAF for the render loop */\n  private rafId: number | null = null;\n  /** Time of the last rendered frame */\n  private lastRenderTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private currentFrame = 0;\n  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */\n  private speed = 0;\n  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */\n  private providedUniforms: ShaderMountUniforms;\n  /** Just a sanity check to make sure frames don't run after we're disposed */\n  private hasBeenDisposed = false;\n  /** If the resolution of the canvas has changed since the last render */\n  private resolutionChanged = true;\n  /** Store textures that are provided by the user */\n  private textures: Map<string, WebGLTexture> = new Map();\n  private minPixelRatio;\n  private maxPixelCount;\n  private isSafari = isSafari();\n  private uniformCache: Record<string, unknown> = {};\n  private textureUnitMap: Map<string, number> = new Map();\n\n  constructor(\n    /** The div you'd like to mount the shader to. The shader will match its size. */\n    parentElement: HTMLElement,\n    fragmentShader: string,\n    uniforms: ShaderMountUniforms,\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 0,\n    /** Pass a frame to offset the starting u_time value and give deterministic results*/\n    frame = 0,\n    /**\n     * The minimum pixel ratio to render at, defaults to 2.\n     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.\n     */\n    minPixelRatio = 2,\n    /**\n     * The maximum amount of physical device pixels to render for the shader,\n     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.\n     * Actual DOM size of the canvas can be larger, it will just lose quality after this.\n     *\n     * May be reduced to improve performance or increased to improve quality on high-resolution screens.\n     */\n    maxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT\n  ) {\n    if (parentElement instanceof HTMLElement) {\n      this.parentElement = parentElement as PaperShaderElement;\n    } else {\n      throw new Error('Paper Shaders: parent element must be an HTMLElement');\n    }\n\n    if (!document.querySelector('style[data-paper-shader]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shader', '');\n      document.head.prepend(styleElement);\n    }\n\n    // Create the canvas element and mount it into the provided element\n    const canvasElement = document.createElement('canvas');\n    this.canvasElement = canvasElement;\n    this.parentElement.prepend(canvasElement);\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided frame value\n    this.currentFrame = frame;\n    this.minPixelRatio = minPixelRatio;\n    this.maxPixelCount = maxPixelCount;\n\n    const gl = canvasElement.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('Paper Shaders: WebGL is not supported in this browser');\n    }\n    this.gl = gl;\n\n    this.initProgram();\n    this.setupPositionAttribute();\n    // Grab the locations of the uniforms in the fragment shader\n    this.setupUniforms();\n    // Put the user provided values into the uniforms\n    this.setUniformValues(this.providedUniforms);\n    // Set up the resize observer to handle window resizing and set u_resolution\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark parent element as paper shader mount\n    this.parentElement.setAttribute('data-paper-shader', '');\n\n    // Add the shaderMount instance to the div mount element to make it easily accessible\n    this.parentElement.paperShaderMount = this;\n  }\n\n  private initProgram = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\n    const positionBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);\n    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    // Create a map to store all uniform locations\n    const uniformLocations: Record<string, WebGLUniformLocation | null> = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n    };\n\n    // Add locations for all provided uniforms\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);\n\n      // For texture uniforms, also look for the aspect ratio uniform\n      if (value instanceof HTMLImageElement) {\n        const aspectRatioUniformName = `${key}AspectRatio`;\n        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);\n      }\n    });\n\n    this.uniformLocations = uniformLocations;\n  };\n\n  /**\n   * The scale that we should render at.\n   * - Used to target 2x rendering even on 1x screens for better antialiasing\n   * - Prevents the virtual resolution from going beyond the maximum resolution\n   * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels\n   */\n  private renderScale = 1;\n  private parentWidth = 0;\n  private parentHeight = 0;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(([entry]) => {\n      if (entry?.borderBoxSize[0]) {\n        this.parentWidth = entry.borderBoxSize[0].inlineSize;\n        this.parentHeight = entry.borderBoxSize[0].blockSize;\n      }\n\n      this.handleResize();\n    });\n\n    this.resizeObserver.observe(this.parentElement);\n    visualViewport?.addEventListener('resize', this.handleVisualViewportChange);\n\n    const rect = this.parentElement.getBoundingClientRect();\n    this.parentWidth = rect.width;\n    this.parentHeight = rect.height;\n    this.handleResize();\n  };\n\n  // Visual viewport resize handler, mainly used to react to browser zoom changes.\n  // Wait 2 frames to align with when the resize observer callback is done (in case it might follow):\n  // - Frame 1: a paint after the visual viewport resize\n  // - Frame 2: a paint after the resize observer has been handled, if it was ever triggered\n  //\n  // Both resize observer and visual viewport will react to classic browser zoom changes,\n  // so we dedupe the callbacks, but pinch zoom only triggers the visual viewport handler.\n  private resizeRafId: number | null = null;\n  private handleVisualViewportChange = () => {\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    this.resizeRafId = requestAnimationFrame(() => {\n      this.resizeRafId = requestAnimationFrame(() => {\n        this.handleResize();\n      });\n    });\n  };\n\n  /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */\n  private handleResize = () => {\n    // Cancel any scheduled resize handlers\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    const pinchZoom = visualViewport?.scale ?? 1;\n\n    // Zoom level can be calculated comparing the browser's outerWidth and the viewport width.\n    // Note: avoid innerWidth, use visualViewport.width instead.\n    // - innerWidth is affected by pinch zoom in Safari, but not other browsers.\n    //   visualViewport.width works consistently in all browsers.\n    // - innerWidth is rounded to integer, but not visualViewport.width.\n    // - visualViewport.width is affected by hard scrollbars, so they need to be added manually\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    const innerWidth = visualViewport\n      ? visualViewport.scale * visualViewport.width + scrollbarWidth\n      : window.innerWidth;\n\n    // Slight rounding here helps the <canvas> maintain a consistent computed size as the zoom level changes\n    const classicZoom = Math.round((10000 * window.outerWidth) / innerWidth) / 10000;\n\n    // As of 2025, Safari reports physical devicePixelRatio, but other browsers add the current zoom level\n    // https://bugs.webkit.org/show_bug.cgi?id=124862\n    const realPixelRatio = this.isSafari ? devicePixelRatio : devicePixelRatio / classicZoom;\n    const targetPixelRatio = Math.max(realPixelRatio, this.minPixelRatio);\n    const targetRenderScale = targetPixelRatio * classicZoom * pinchZoom;\n    const targetPixelWidth = this.parentWidth * targetRenderScale;\n    const targetPixelHeight = this.parentHeight * targetRenderScale;\n\n    // Prevent the total rendered pixel count from exceeding maxPixelCount\n    const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);\n\n    const newRenderScale = targetRenderScale * Math.min(1, maxPixelCountHeadroom);\n    const newWidth = Math.round(this.parentWidth * newRenderScale);\n    const newHeight = Math.round(this.parentHeight * newRenderScale);\n\n    if (\n      this.canvasElement.width !== newWidth ||\n      this.canvasElement.height !== newHeight ||\n      this.renderScale !== newRenderScale // Usually, only render scale change when the user zooms in/out\n    ) {\n      this.renderScale = newRenderScale;\n      this.canvasElement.width = newWidth;\n      this.canvasElement.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n\n      // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n      this.render(performance.now());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    if (this.program === null) {\n      console.warn('Tried to render before program or gl was initialized');\n      return;\n    }\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastRenderTime;\n    this.lastRenderTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.currentFrame += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.currentFrame * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, this.renderScale);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\n      this.requestRender();\n    } else {\n      this.rafId = null;\n    }\n  };\n\n  private requestRender = () => {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  /** Creates a texture from an image and sets it into a uniform value */\n  private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {\n    if (!image.complete || image.naturalWidth === 0) {\n      throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);\n    }\n\n    // Clean up existing texture if present\n    const existingTexture = this.textures.get(uniformName);\n    if (existingTexture) {\n      this.gl.deleteTexture(existingTexture);\n    }\n\n    // Get texture unit\n    if (!this.textureUnitMap.has(uniformName)) {\n      this.textureUnitMap.set(uniformName, this.textureUnitMap.size);\n    }\n    const textureUnit = this.textureUnitMap.get(uniformName)!;\n    // Activate correct texture unit before creating the texture\n    this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\n\n    // Create and set up the new texture\n    const texture = this.gl.createTexture();\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n\n    // Set texture parameters\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    // Upload image to texture\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);\n    const error = this.gl.getError();\n    if (error !== this.gl.NO_ERROR || texture === null) {\n      console.error('Paper Shaders: WebGL error when uploading texture:', error);\n      return;\n    }\n\n    // Store the texture\n    this.textures.set(uniformName, texture);\n\n    // Set up texture unit and uniform\n    const location = this.uniformLocations[uniformName];\n    if (location) {\n      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}AspectRatio`;\n      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];\n      if (aspectRatioLocation) {\n        const aspectRatio = image.naturalWidth / image.naturalHeight;\n        this.gl.uniform1f(aspectRatioLocation, aspectRatio);\n      }\n    }\n  };\n\n  /** Utility: recursive equality test for all the uniforms */\n  private areUniformValuesEqual = (a: any, b: any): boolean => {\n    if (a === b) return true;\n    if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {\n      return a.every((val, i) => this.areUniformValuesEqual(val, (b as any)[i]));\n    }\n    return false;\n  };\n\n  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */\n  private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {\n    this.gl.useProgram(this.program);\n    Object.entries(updatedUniforms).forEach(([key, value]) => {\n      // Grab the value to use in the uniform cache\n      let cacheValue: ShaderMountUniforms[keyof ShaderMountUniforms] | string = value;\n      if (value instanceof HTMLImageElement) {\n        // Images use their src for the cache value to save memory\n        cacheValue = `${value.src.slice(0, 200)}|${value.naturalWidth}x${value.naturalHeight}`;\n      }\n\n      // Check if the uniform value has changed and, if not, bail early to avoid extra work\n      if (this.areUniformValuesEqual(this.uniformCache[key], cacheValue)) return;\n      // Update the uniform cache if we are still here\n      this.uniformCache[key] = cacheValue;\n\n      const location = this.uniformLocations[key];\n      if (!location) {\n        console.warn(`Uniform location for ${key} not found`);\n        return;\n      }\n\n      if (value instanceof HTMLImageElement) {\n        // Texture case, requires a good amount of code so it gets its own function:\n        this.setTextureUniform(key, value);\n      } else if (Array.isArray(value)) {\n        // Array case\n        let flatArray: number[] | null = null;\n        let valueLength: number | null = null;\n\n        // If it's an array of same-sized arrays, flatten it down so we can set the uniform\n        if (value[0] !== undefined && Array.isArray(value[0])) {\n          const firstChildLength = value[0].length;\n          if (value.every((arr) => (arr as number[]).length === firstChildLength)) {\n            // Array of same-sized arrays case, flattens the array sets it\n            flatArray = value.flat();\n            valueLength = firstChildLength;\n          } else {\n            console.warn(`All child arrays must be the same length for ${key}`);\n            return;\n          }\n        } else {\n          // Array of primitive values case, supports 2, 3, 4, 9, 16 length arrays\n          flatArray = value as number[];\n          valueLength = flatArray.length;\n        }\n\n        // Set the uniform based on array length... supports 2, 3, 4, 9, 16 length arrays of primitive values\n        // or arbitrary length arrays of arrays\n        switch (valueLength) {\n          case 2:\n            this.gl.uniform2fv(location, flatArray);\n            break;\n          case 3:\n            this.gl.uniform3fv(location, flatArray);\n            break;\n          case 4:\n            this.gl.uniform4fv(location, flatArray);\n            break;\n          case 9:\n            this.gl.uniformMatrix3fv(location, false, flatArray);\n            break;\n          case 16:\n            this.gl.uniformMatrix4fv(location, false, flatArray);\n            break;\n          default:\n            console.warn(`Unsupported uniform array length: ${valueLength}`);\n        }\n      } else if (typeof value === 'number') {\n        // Number case, supports floats and ints\n        this.gl.uniform1f(location, value);\n      } else if (typeof value === 'boolean') {\n        // Boolean case, supports true and false\n        this.gl.uniform1i(location, value ? 1 : 0);\n      } else {\n        // May happen on the server for SSR when undefined images are passed in\n        console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);\n      }\n    });\n  };\n\n  /** Gets the current total animation time from 0ms */\n  public getCurrentFrame = (): number => {\n    return this.currentFrame;\n  };\n\n  /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */\n  public setFrame = (newFrame: number): void => {\n    this.currentFrame = newFrame;\n    this.lastRenderTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastRenderTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */\n  public setMaxPixelCount = (newMaxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT): void => {\n    this.maxPixelCount = newMaxPixelCount;\n\n    this.handleResize();\n  };\n\n  /** Set the minimum pixel ratio for the shader */\n  public setMinPixelRatio = (newMinPixelRatio: number = 2): void => {\n    this.minPixelRatio = newMinPixelRatio;\n\n    this.handleResize();\n  };\n\n  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */\n  public setUniforms = (newUniforms: ShaderMountUniforms): void => {\n    this.setUniformValues(newUniforms);\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      // Clean up all textures\n      this.textures.forEach((texture) => {\n        this.gl.deleteTexture(texture);\n      });\n      this.textures.clear();\n\n      this.gl.deleteProgram(this.program);\n      this.program = null;\n\n      // Reset the WebGL context\n      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);\n      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n\n      // Clear any errors\n      this.gl.getError();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    visualViewport?.removeEventListener('resize', this.handleVisualViewportChange);\n\n    this.uniformLocations = {};\n\n    // Remove the shader mount from the div wrapper element to avoid any GC issues\n    this.parentElement.paperShaderMount = undefined;\n  };\n}\n\nfunction createShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction createProgram(\n  gl: WebGL2RenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const format = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT);\n  const precision = format ? format.precision : null;\n  // MEDIUM_FLOAT precision can be 10, 16 or 23 bits depending on device;\n  // Shaders fail on 10 bit (and 16 bit is hard to test) => we force 23-bit by switching to highp\n  if (precision && precision < 23) {\n    vertexShaderSource = vertexShaderSource.replace(/precision\\s+(lowp|mediump)\\s+float;/g, 'precision highp float;');\n    fragmentShaderSource = fragmentShaderSource\n      .replace(/precision\\s+(lowp|mediump)\\s+float/g, 'precision highp float')\n      .replace(/\\b(uniform|varying|attribute)\\s+(lowp|mediump)\\s+(\\w+)/g, '$1 highp $3');\n  }\n\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n  if (!vertexShader || !fragmentShader) return null;\n\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\n    gl.deleteProgram(program);\n    gl.deleteShader(vertexShader);\n    gl.deleteShader(fragmentShader);\n    return null;\n  }\n\n  // Clean up shaders after successful linking\n  gl.detachShader(program, vertexShader);\n  gl.detachShader(program, fragmentShader);\n  gl.deleteShader(vertexShader);\n  gl.deleteShader(fragmentShader);\n\n  return program;\n}\n\nconst defaultStyle = `@layer paper-shaders {\n  :where([data-paper-shader]) {\n    isolation: isolate;\n    position: relative;\n\n    & canvas {\n      contain: strict;\n      display: block;\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      corner-shape: inherit;\n    }\n  }\n}`;\n\n/** The parent `<div>` element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if an element is a Paper shader element */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/**\n * Uniform types that we support to be auto-mapped into the fragment shader\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMotionParams {\n  speed?: number;\n  frame?: number;\n}\n\nexport type ShaderPreset<T> = {\n  name: string;\n  params: Required<T>;\n};\n\nexport type ImageShaderPreset<T> = {\n  name: string;\n  /**\n   * Params for the shader excluding the image.\n   * Image is excluded as it isn't considered a preset,\n   * e.g. when switching between presets it shouldn't switch the image.\n   *\n   * While we exclude images from presets they should still be set with a default prop value so the code-first usage of shaders remains great.\n   */\n  params: Required<Omit<T, 'image'>>;\n};\n\nfunction isSafari() {\n  const ua = navigator.userAgent.toLowerCase();\n  return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android');\n}\n"],
+  "mappings": "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",
   "names": ["vertexShaderSource"]
 }

package/dist/shaders/dot-orbit.js

@@ -67,7 +67,8 @@ void main() {
   vec2 shape_uv = v_patternUV;
   shape_uv *= 1.5;
 
-  float t = u_time - 10.;
+  const float firstFrameOffset = -10.;
+  float t = u_time + firstFrameOffset;
 
   vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4;
 

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 dot pattern with dots orbiting around their grid positions\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_size (0..1): dot radius (relative to cell size)\n * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size\n * - u_spreading (0..1): max orbit distance of each dot around the cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\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  float t = u_time - 10.;\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 = 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;AAkBO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAsDG,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 { 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 dot pattern with dots orbiting around their grid positions\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_size (0..1): dot radius (relative to cell size)\n * - u_sizeRange (0..1): randomizes dot radius between 0 and u_size\n * - u_spreading (0..1): max orbit distance of each dot around the cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\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 = 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;AAkBO,MAAM,yBAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAuDG,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.js

@@ -8,7 +8,6 @@ import { declarePI, rotation2 } from "../shader-utils.js";
 const flutedGlassFragmentShader = `#version 300 es
 precision mediump float;
 
-uniform float u_time;
 uniform vec2 u_resolution;
 uniform float u_pixelRatio;
 

package/dist/shaders/fluted-glass.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/fluted-glass.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2 } from '../shader-utils.js';\n\n/**\n * Mimicking glass surface distortion over the image by distorting the texture\n * coordinates within line patterns\n *\n * Uniforms:\n * - u_count, u_angle - number and direction of grid relative to the image\n * - u_shape (float used as integer):\n * ---- 1: uniformly spaced stripes\n * ---- 2: randomly spaced stripes\n * ---- 3: sine wave stripes\n * ---- 4: zigzag stripes\n * ---- 5: wave-based pattern\n * - u_distortion - the power of distortion applied along within each stripe\n * - u_distortionShape (float used as integer):\n * ---- 5 shapes available\n * - u_shift - texture shift in direction opposite to the grid\n * - u_blur - one-directional blur applied over the main distortion\n * - u_highlights - thin color lines along the grid (independent from distortion)\n * - u_marginLeft, u_marginRight, u_marginTop, u_marginBottom - paddings\n *   within picture to be shown without any distortion\n *\n */\n\n// language=GLSL\nexport const flutedGlassFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_count;\nuniform float u_angle;\nuniform float u_highlights;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, uv.y);\n\n  return left * right * bottom * top;\n}\n\nconst int MAX_RADIUS = 50;\n\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = texture(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = texture(tex, uv + offset);\n    vec4 s2 = texture(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  return sum / weightSum;\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  \n  vec2 uv = imageUV;\n  float frame = getUvFrame(imageUV);\n  if (frame < .05) discard;\n\n  float gridNumber = u_count * u_imageAspectRatio;\n\n  vec2 sw = vec2(.005 * u_distortion) * vec2(1., u_imageAspectRatio);\n  float maskOuter =\n    smoothstep(u_marginLeft - sw.x, u_marginLeft, imageUV.x + sw.x) *\n    smoothstep(u_marginRight - sw.x, u_marginRight, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop - sw.y, u_marginTop, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom - sw.y, u_marginBottom, 1.0 - imageUV.y + sw.y);\n  float mask =\n    smoothstep(u_marginLeft, u_marginLeft + sw.x, imageUV.x + sw.x) *\n    smoothstep(u_marginRight, u_marginRight + sw.x, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop, u_marginTop + sw.y, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom, u_marginBottom + sw.y, 1.0 - imageUV.y + sw.y);\n  float stroke = (1. - mask) * maskOuter;\n\n  float patternRotation = u_angle * PI / 180.;\n  uv = rotate(uv - vec2(.5), patternRotation);\n  uv *= gridNumber;\n  \n  float curve = 0.;\n  if (u_shape > 4.5) {\n    // pattern\n    curve = .5 + .5 * sin(1.5 * uv.x) * cos(1.5 * uv.y);\n  } else if (u_shape > 3.5) {\n    // zigzag\n    curve = 10. * abs(fract(.1 * uv.y) - .5);\n  } else if (u_shape > 2.5) {\n    // wave\n    curve = 4. * sin(.23 * uv.y);\n  } else if (u_shape > 1.5) {\n    // lines irregular\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  } else {\n    // lines\n    curve = .2 * gridNumber / u_imageAspectRatio;\n  }\n\n  vec2 uvOrig = uv;\n  uv += curve;\n\n  vec2 fractUV = fract(uv);\n  vec2 floorUV = floor(uv);\n\n  vec2 fractOrigUV = fract(uvOrig);\n  vec2 floorOrigUV = floor(uvOrig);\n\n  float highlights = smoothstep(.85, .95, fractUV.x);\n  highlights *= mask;\n\n  float xDistortion = 0.;\n  if (u_distortionShape == 1.) {\n    xDistortion = -pow(1.5 * fractUV.x, 3.) + (.5 + u_shift);\n  } else if (u_distortionShape == 2.) {\n    xDistortion = 2. * pow(fractUV.x, 2.) - (.5 + u_shift);\n  } else if (u_distortionShape == 3.) {\n    xDistortion = pow(2. * (fractUV.x - .5), 6.) + .5 - .5 + u_shift;\n  } else if (u_distortionShape == 4.) {\n    xDistortion = sin((fractUV.x + .25 + u_shift) * TWO_PI);\n    xDistortion *= .5;\n  } else if (u_distortionShape == 5.) {\n    xDistortion += (.5 + u_shift);\n    xDistortion -= pow(abs(fractUV.x), .2) * fractUV.x;\n    xDistortion *= .33;\n  }\n\n  xDistortion *= 3. * u_distortion;\n\n  uv = (floorOrigUV + fractOrigUV) / gridNumber;\n  uv.x += xDistortion / gridNumber;\n  uv += pow(stroke, 4.);\n  uv.y = mix(uv.y, .0, .4 * u_highlights * highlights);\n  \n  uv = rotate(uv, -patternRotation) + vec2(.5);\n\n  uv = mix(imageUV, uv, mask);\n  float blur = mix(0., u_blur, mask);\n  \n  vec4 color = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);\n\n  float opacity = color.a;\n  fragColor = vec4(color.rgb, opacity);\n}\n`;\n\nexport interface FlutedGlassUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_count: number;\n  u_angle: number;\n  u_distortion: number;\n  u_shift: number;\n  u_blur: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_highlights: number;\n  u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];\n  u_shape: (typeof GlassGridShapes)[GlassGridShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  count?: number;\n  angle?: number;\n  distortion?: number;\n  shift?: number;\n  blur?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  highlights?: number;\n  distortionShape?: GlassDistortionShape;\n  shape?: GlassGridShape;\n}\n\nexport const GlassGridShapes = {\n  lines: 1,\n  linesIrregular: 2,\n  wave: 3,\n  zigzag: 4,\n  pattern: 5,\n} as const;\n\nexport const GlassDistortionShapes = {\n  prism: 1,\n  lens: 2,\n  contour: 3,\n  cascade: 4,\n  facete: 5,\n} as const;\n\nexport type GlassDistortionShape = keyof typeof GlassDistortionShapes;\nexport type GlassGridShape = keyof typeof GlassGridShapes;\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,iBAAiB;AA0B9B,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuB/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuKJ,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2 } from '../shader-utils.js';\n\n/**\n * Mimicking glass surface distortion over the image by distorting the texture\n * coordinates within line patterns\n *\n * Uniforms:\n * - u_count, u_angle - number and direction of grid relative to the image\n * - u_shape (float used as integer):\n * ---- 1: uniformly spaced stripes\n * ---- 2: randomly spaced stripes\n * ---- 3: sine wave stripes\n * ---- 4: zigzag stripes\n * ---- 5: wave-based pattern\n * - u_distortion - the power of distortion applied along within each stripe\n * - u_distortionShape (float used as integer):\n * ---- 5 shapes available\n * - u_shift - texture shift in direction opposite to the grid\n * - u_blur - one-directional blur applied over the main distortion\n * - u_highlights - thin color lines along the grid (independent from distortion)\n * - u_marginLeft, u_marginRight, u_marginTop, u_marginBottom - paddings\n *   within picture to be shown without any distortion\n *\n */\n\n// language=GLSL\nexport const flutedGlassFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_count;\nuniform float u_angle;\nuniform float u_highlights;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, uv.y);\n\n  return left * right * bottom * top;\n}\n\nconst int MAX_RADIUS = 50;\n\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = texture(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = texture(tex, uv + offset);\n    vec4 s2 = texture(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  return sum / weightSum;\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  \n  vec2 uv = imageUV;\n  float frame = getUvFrame(imageUV);\n  if (frame < .05) discard;\n\n  float gridNumber = u_count * u_imageAspectRatio;\n\n  vec2 sw = vec2(.005 * u_distortion) * vec2(1., u_imageAspectRatio);\n  float maskOuter =\n    smoothstep(u_marginLeft - sw.x, u_marginLeft, imageUV.x + sw.x) *\n    smoothstep(u_marginRight - sw.x, u_marginRight, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop - sw.y, u_marginTop, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom - sw.y, u_marginBottom, 1.0 - imageUV.y + sw.y);\n  float mask =\n    smoothstep(u_marginLeft, u_marginLeft + sw.x, imageUV.x + sw.x) *\n    smoothstep(u_marginRight, u_marginRight + sw.x, 1.0 - imageUV.x + sw.x) *\n    smoothstep(u_marginTop, u_marginTop + sw.y, imageUV.y + sw.y) *\n    smoothstep(u_marginBottom, u_marginBottom + sw.y, 1.0 - imageUV.y + sw.y);\n  float stroke = (1. - mask) * maskOuter;\n\n  float patternRotation = u_angle * PI / 180.;\n  uv = rotate(uv - vec2(.5), patternRotation);\n  uv *= gridNumber;\n  \n  float curve = 0.;\n  if (u_shape > 4.5) {\n    // pattern\n    curve = .5 + .5 * sin(1.5 * uv.x) * cos(1.5 * uv.y);\n  } else if (u_shape > 3.5) {\n    // zigzag\n    curve = 10. * abs(fract(.1 * uv.y) - .5);\n  } else if (u_shape > 2.5) {\n    // wave\n    curve = 4. * sin(.23 * uv.y);\n  } else if (u_shape > 1.5) {\n    // lines irregular\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  } else {\n    // lines\n    curve = .2 * gridNumber / u_imageAspectRatio;\n  }\n\n  vec2 uvOrig = uv;\n  uv += curve;\n\n  vec2 fractUV = fract(uv);\n  vec2 floorUV = floor(uv);\n\n  vec2 fractOrigUV = fract(uvOrig);\n  vec2 floorOrigUV = floor(uvOrig);\n\n  float highlights = smoothstep(.85, .95, fractUV.x);\n  highlights *= mask;\n\n  float xDistortion = 0.;\n  if (u_distortionShape == 1.) {\n    xDistortion = -pow(1.5 * fractUV.x, 3.) + (.5 + u_shift);\n  } else if (u_distortionShape == 2.) {\n    xDistortion = 2. * pow(fractUV.x, 2.) - (.5 + u_shift);\n  } else if (u_distortionShape == 3.) {\n    xDistortion = pow(2. * (fractUV.x - .5), 6.) + .5 - .5 + u_shift;\n  } else if (u_distortionShape == 4.) {\n    xDistortion = sin((fractUV.x + .25 + u_shift) * TWO_PI);\n    xDistortion *= .5;\n  } else if (u_distortionShape == 5.) {\n    xDistortion += (.5 + u_shift);\n    xDistortion -= pow(abs(fractUV.x), .2) * fractUV.x;\n    xDistortion *= .33;\n  }\n\n  xDistortion *= 3. * u_distortion;\n\n  uv = (floorOrigUV + fractOrigUV) / gridNumber;\n  uv.x += xDistortion / gridNumber;\n  uv += pow(stroke, 4.);\n  uv.y = mix(uv.y, .0, .4 * u_highlights * highlights);\n  \n  uv = rotate(uv, -patternRotation) + vec2(.5);\n\n  uv = mix(imageUV, uv, mask);\n  float blur = mix(0., u_blur, mask);\n  \n  vec4 color = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur);\n\n  float opacity = color.a;\n  fragColor = vec4(color.rgb, opacity);\n}\n`;\n\nexport interface FlutedGlassUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_count: number;\n  u_angle: number;\n  u_distortion: number;\n  u_shift: number;\n  u_blur: number;\n  u_marginLeft: number;\n  u_marginRight: number;\n  u_marginTop: number;\n  u_marginBottom: number;\n  u_highlights: number;\n  u_distortionShape: (typeof GlassDistortionShapes)[GlassDistortionShape];\n  u_shape: (typeof GlassGridShapes)[GlassGridShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface FlutedGlassParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  count?: number;\n  angle?: number;\n  distortion?: number;\n  shift?: number;\n  blur?: number;\n  marginLeft?: number;\n  marginRight?: number;\n  marginTop?: number;\n  marginBottom?: number;\n  highlights?: number;\n  distortionShape?: GlassDistortionShape;\n  shape?: GlassGridShape;\n}\n\nexport const GlassGridShapes = {\n  lines: 1,\n  linesIrregular: 2,\n  wave: 3,\n  zigzag: 4,\n  pattern: 5,\n} as const;\n\nexport const GlassDistortionShapes = {\n  prism: 1,\n  lens: 2,\n  contour: 3,\n  cascade: 4,\n  facete: 5,\n} as const;\n\nexport type GlassDistortionShape = keyof typeof GlassDistortionShapes;\nexport type GlassGridShape = keyof typeof GlassGridShapes;\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,iBAAiB;AA0B9B,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsB/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuKJ,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/grain-gradient.js

@@ -97,7 +97,8 @@ vec2 truchet(vec2 uv, float idx){
 
 void main() {
 
-  float t = .1 * u_time;
+  const float firstFrameOffset = 7.;
+  float t = .1 * (u_time + firstFrameOffset);
 
   vec2 shape_uv = vec2(0.);
   vec2 grain_uv = vec2(0.);

package/dist/shaders/grain-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/grain-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingDebugVariablesDeclaration,\n} from '../shader-sizing.js';\nimport {\n  simplexNoise,\n  declarePI,\n  rotation2,\n  textureRandomizerR,\n  proceduralHash21,\n  proceduralHash11,\n} from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradient with noise & grain over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_softness (0..1): blur between color bands\n * - u_intensity (0..1): distortion between color bands\n * - u_noise (0..1): grainy noise independent of softness\n * - u_shape (float used as integer):\n * ---- 1: single sine wave\n * ---- 2: dots pattern\n * ---- 3: truchet pattern\n * ---- 4: corners (2 rounded rectangles)\n * ---- 5: ripple\n * ---- 6: blob (metaballs)\n * ---- 7: circle imitating 3d look\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n */\n\n// language=GLSL\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\n${sizingVariablesDeclaration}\n${ sizingDebugVariablesDeclaration }\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n${proceduralHash21}\n${textureRandomizerR}\n\nfloat valueNoiseR(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\nfloat fbmR(vec2 n) {\n  float total = 0.;\n  float amplitude = .2;\n  for (int i = 0; i < 3; i++) {\n    n = rotate(n, .3);\n    total += valueNoiseR(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n${proceduralHash11}\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n\n  float t = .1 * u_time;\n\n  vec2 shape_uv = vec2(0.);\n  vec2 grain_uv = vec2(0.);\n\n  if (u_shape > 3.5) {\n    shape_uv = v_objectUV;\n    grain_uv = shape_uv;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    grain_uv -= graphicOffset;\n    grain_uv *= v_objectBoxSize;\n    grain_uv *= .7;\n  } else {\n    shape_uv = .5 * v_patternUV;\n    grain_uv = 100. * v_patternUV;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    if (u_fit > 0.) {\n      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n      vec2 patternBoxGivenSize = vec2(\n        (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n        (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n      );\n      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n    }\n    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n    grain_uv -= graphicOffset / patternBoxScale;\n    grain_uv *= 1.6;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 100.);\n    rand = sign(rand - .5) * pow(4. * abs(rand), .3);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(shape, 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float simplex = snoise(grain_uv * .5);\n  float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);\n  float rawNoise = .75 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);\n  float noise = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float aa = fwidth(shape);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n    if (i > int(u_colorsCount) - 1) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\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  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
-  "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AA2BO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAU3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBrD,0BAA0B;AAAA,EACzB,+BAAgC;AAAA;AAAA;AAAA;AAAA,EAIjC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAyKM,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0ChD,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport {\n  sizingVariablesDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingDebugVariablesDeclaration,\n} from '../shader-sizing.js';\nimport {\n  simplexNoise,\n  declarePI,\n  rotation2,\n  textureRandomizerR,\n  proceduralHash21,\n  proceduralHash11,\n} from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Multi-color gradient with noise & grain over animated abstract shapes\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_softness (0..1): blur between color bands\n * - u_intensity (0..1): distortion between color bands\n * - u_noise (0..1): grainy noise independent of softness\n * - u_shape (float used as integer):\n * ---- 1: single sine wave\n * ---- 2: dots pattern\n * ---- 3: truchet pattern\n * ---- 4: corners (2 rounded rectangles)\n * ---- 5: ripple\n * ---- 6: blob (metaballs)\n * ---- 7: circle imitating 3d look\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: grains are calculated using gl_FragCoord & u_resolution, meaning grains don't react to scaling and fit\n *\n */\n\n// language=GLSL\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\n${sizingVariablesDeclaration}\n${ sizingDebugVariablesDeclaration }\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n${proceduralHash21}\n${textureRandomizerR}\n\nfloat valueNoiseR(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\nfloat fbmR(vec2 n) {\n  float total = 0.;\n  float amplitude = .2;\n  for (int i = 0; i < 3; i++) {\n    n = rotate(n, .3);\n    total += valueNoiseR(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n${proceduralHash11}\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 7.;\n  float t = .1 * (u_time + firstFrameOffset);\n\n  vec2 shape_uv = vec2(0.);\n  vec2 grain_uv = vec2(0.);\n\n  if (u_shape > 3.5) {\n    shape_uv = v_objectUV;\n    grain_uv = shape_uv;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    grain_uv -= graphicOffset;\n    grain_uv *= v_objectBoxSize;\n    grain_uv *= .7;\n  } else {\n    shape_uv = .5 * v_patternUV;\n    grain_uv = 100. * v_patternUV;\n\n    // apply inverse transform to grain_uv so it respects the originXY\n    float r = u_rotation * 3.14159265358979323846 / 180.;\n    mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n    vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n    grain_uv = transpose(graphicRotation) * grain_uv;\n    grain_uv *= u_scale;\n    if (u_fit > 0.) {\n      vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n      givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n      float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n      vec2 patternBoxGivenSize = vec2(\n        (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n        (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n      );\n      patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n      float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n      grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n    }\n    vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n    grain_uv -= graphicOffset / patternBoxScale;\n    grain_uv *= 1.6;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = hash11(stripeIdx * 100.);\n    rand = sign(rand - .5) * pow(4. * abs(rand), .3);\n    shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t);\n    shape = pow(shape, 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = 1. - pow(length(shape_uv), 2.);\n    vec3 pos = vec3(shape_uv, sqrt(d));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n    shape *= step(0., d);\n  }\n\n  float simplex = snoise(grain_uv * .5);\n  float grainDist = simplex * snoise(grain_uv * .2) - fbmR(.002 * grain_uv + 10.) - fbmR(.003 * grain_uv);\n  float rawNoise = .75 * simplex - fbmR(rotate(.4 * grain_uv, 2.)) - fbmR(.001 * grain_uv);\n  float noise = clamp(rawNoise, 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float aa = fwidth(shape);\n\n  shape = clamp(shape - .5 / u_colorsCount, 0., 1.);\n  float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.));\n  float mixer = shape * (u_colorsCount - 1.);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n    if (i > int(u_colorsCount) - 1) break;\n\n    float localT = clamp(mixer - float(i - 1), 0., 1.);\n    localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localT);\n  }\n\n  vec3 color = gradient.rgb * totalShape;\n  float opacity = gradient.a * totalShape;\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  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
+  "mappings": ";;;;;AAEA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AA2BO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAU3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBrD,0BAA0B;AAAA,EACzB,+BAAgC;AAAA;AAAA;AAAA;AAAA,EAIjC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BlB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA0KM,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0ChD,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/image-dithering.js

@@ -8,7 +8,6 @@ import { proceduralHash21 } from "../shader-utils.js";
 const imageDitheringFragmentShader = `#version 300 es
 precision lowp float;
 
-uniform float u_time;
 uniform mediump vec2 u_resolution;
 uniform mediump float u_pixelRatio;
 uniform mediump float u_originX;

package/dist/shaders/image-dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/image-dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUV, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Dithering effect over user texture using 3-color palette\n * or colors sampled from original image\n *\n * Uniforms:\n * - u_colorBack, u_colorFront, u_colorHighlight (RGBA)\n *   (u_colorHighlight to be the lightest parts of u_colorFront pixels)\n * - pxSize: px size set relative to canvas resolution\n * - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n * - u_originalColors - switching between 3 colors palette and original image colors\n * - u_colorSteps - number of colors to use (applies to both color modes)\n *\n * Note: pixelization is applied to the shapes BEFORE dithering,\n *       meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const imageDitheringFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform mediump float u_imageAspectRatio;\n\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_originalColors;\nuniform float u_colorSteps;\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv, vec2 px) {\n  float left   = step(-px.x, uv.x);\n  float right  = step(uv.x, 1.);\n  float bottom = step(-px.y, uv.y);\n  float top    = step(uv.y, 1. + px.y);\n\n  return left * right * bottom * top;\n}\n\n${proceduralHash21}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n\n  #define USE_IMAGE_SIZING\n  #define USE_PIXELIZATION\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = u_resolution * uv;\n  vec4 image = texture(u_image, imageUV);\n  float frame = getUvFrame(imageUV, pxSize / u_resolution.xy);\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), lum);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n\n  float steps = max(floor(u_colorSteps), 1.);\n  float ditherAmount = 1.0 / (steps);\n  \n  vec3 color = vec3(0.0);\n  float opacity = 1.;\n\n  dithering -= .5;\n  float brightness = clamp(lum + dithering * ditherAmount, 0.0, 1.0);\n  brightness = mix(0.0, brightness, frame);\n  float quantLum = floor(brightness * steps + 0.5) / steps;\n\n  if (u_originalColors == true) {\n    vec3 normColor = image.rgb / max(lum, 0.001);\n    color = normColor * quantLum;\n\n    float quantAlpha = floor(image.a * steps + 0.5) / steps;\n    opacity = mix(quantLum, 1., quantAlpha);\n  } else {\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    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\n    float hlOpacity = u_colorHighlight.a;\n\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\n\n    color = fgColor * quantLum;\n    opacity = fgOpacity * quantLum;\n    color += bgColor * (1.0 - opacity);\n    opacity += bgOpacity * (1.0 - opacity);\n  }\n\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ImageDitheringUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n  u_colorSteps: number;\n  u_originalColors: boolean;\n}\n\nexport interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  colorHighlight?: string;\n  type?: DitheringType;\n  pxSize?: number;\n  colorSteps?: number;\n  originalColors?: boolean;\n}\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,SAAS,gBAAoE;AAC7E,SAAS,wBAAwB;AAuB1B,MAAM,+BAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwClD,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwCd,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFL,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingUV, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Dithering effect over user texture using 3-color palette\n * or colors sampled from original image\n *\n * Uniforms:\n * - u_colorBack, u_colorFront, u_colorHighlight (RGBA)\n *   (u_colorHighlight to be the lightest parts of u_colorFront pixels)\n * - pxSize: px size set relative to canvas resolution\n * - u_type (float used as integer)\n * ---- 1: random dithering\n * ---- 2: 2x2 Bayer matrix\n * ---- 3: 4x4 Bayer matrix\n * ---- 4: 8x8 Bayer matrix\n * - u_originalColors - switching between 3 colors palette and original image colors\n * - u_colorSteps - number of colors to use (applies to both color modes)\n *\n * Note: pixelization is applied to the shapes BEFORE dithering,\n *       meaning pixels don't react to scaling and fit\n */\n\n// language=GLSL\nexport const imageDitheringFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform mediump vec2 u_resolution;\nuniform mediump float u_pixelRatio;\nuniform mediump float u_originX;\nuniform mediump float u_originY;\nuniform mediump float u_worldWidth;\nuniform mediump float u_worldHeight;\nuniform mediump float u_fit;\n\nuniform mediump float u_scale;\nuniform mediump float u_rotation;\nuniform mediump float u_offsetX;\nuniform mediump float u_offsetY;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform mediump float u_imageAspectRatio;\n\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_originalColors;\nuniform float u_colorSteps;\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv, vec2 px) {\n  float left   = step(-px.x, uv.x);\n  float right  = step(uv.x, 1.);\n  float bottom = step(-px.y, uv.y);\n  float top    = step(uv.y, 1. + px.y);\n\n  return left * right * bottom * top;\n}\n\n${proceduralHash21}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n\n  #define USE_IMAGE_SIZING\n  #define USE_PIXELIZATION\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = u_resolution * uv;\n  vec4 image = texture(u_image, imageUV);\n  float frame = getUvFrame(imageUV, pxSize / u_resolution.xy);\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\n\n  switch (type) {\n    case 1: {\n      dithering = step(hash21(ditheringNoise_uv), lum);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n\n  float steps = max(floor(u_colorSteps), 1.);\n  float ditherAmount = 1.0 / (steps);\n  \n  vec3 color = vec3(0.0);\n  float opacity = 1.;\n\n  dithering -= .5;\n  float brightness = clamp(lum + dithering * ditherAmount, 0.0, 1.0);\n  brightness = mix(0.0, brightness, frame);\n  float quantLum = floor(brightness * steps + 0.5) / steps;\n\n  if (u_originalColors == true) {\n    vec3 normColor = image.rgb / max(lum, 0.001);\n    color = normColor * quantLum;\n\n    float quantAlpha = floor(image.a * steps + 0.5) / steps;\n    opacity = mix(quantLum, 1., quantAlpha);\n  } else {\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    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\n    float hlOpacity = u_colorHighlight.a;\n\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\n\n    color = fgColor * quantLum;\n    opacity = fgOpacity * quantLum;\n    color += bgColor * (1.0 - opacity);\n    opacity += bgOpacity * (1.0 - opacity);\n  }\n\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ImageDitheringUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n  u_colorSteps: number;\n  u_originalColors: boolean;\n}\n\nexport interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  colorHighlight?: string;\n  type?: DitheringType;\n  pxSize?: number;\n  colorSteps?: number;\n  originalColors?: boolean;\n}\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,SAAS,gBAAoE;AAC7E,SAAS,wBAAwB;AAuB1B,MAAM,+BAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuClD,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwCd,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFL,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
   "names": []
 }

package/dist/shaders/mesh-gradient.js

@@ -42,7 +42,8 @@ void main() {
 
   shape_uv += .5;
 
-  float t = .5 * u_time;
+  const float firstFrameOffset = 41.5;
+  float t = .5 * (u_time + firstFrameOffset);
 
   float radius = smoothstep(0., 1., length(shape_uv - .5));
   float center = 1. - radius;

package/dist/shaders/mesh-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/mesh-gradient.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, colorBandingFix } from '../shader-utils.js';\n\nexport const meshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * A composition of N color spots (one per color) with 2 types of\n * distortions applied to the coordinate space\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_distortion: warp distortion\n * - u_swirl: vortex distortion\n *\n */\n\n// language=GLSL\nexport const meshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${meshGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_distortion;\nuniform float u_swirl;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + mod(float(i), 3.) * .3;\n  float c = .8 + mod(float(i + 1), 4.) * 0.25;\n\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  float t = .5 * u_time;\n\n  float radius = smoothstep(0., 1., length(shape_uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    shape_uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., shape_uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., shape_uv.y));\n    shape_uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., shape_uv.x));\n  }\n\n  vec2 uvRotated = shape_uv;\n  uvRotated -= vec2(.5);\n  float angle = 3. * u_swirl * radius;\n  uvRotated = rotate(uvRotated, -angle);\n  uvRotated += vec2(.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n\n  for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 pos = getPosition(i, t);\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n\n    float dist = length(uvRotated - pos);\n\n    dist = pow(dist, 3.5);\n    float weight = 1. / (dist + 1e-3);\n    color += colorFraction * weight;\n    opacity += opacityFraction * weight;\n    totalWeight += weight;\n  }\n\n  color /= totalWeight;\n  opacity /= totalWeight;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_distortion: number;\n  u_swirl: number;\n}\n\nexport interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  distortion?: number;\n  swirl?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAcO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAK1B,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAqCa,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBlD,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "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, colorBandingFix } from '../shader-utils.js';\n\nexport const meshGradientMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * A composition of N color spots (one per color) with 2 types of\n * distortions applied to the coordinate space\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_distortion: warp distortion\n * - u_swirl: vortex distortion\n *\n */\n\n// language=GLSL\nexport const meshGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colors[${meshGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_distortion;\nuniform float u_swirl;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n\nvec2 getPosition(int i, float t) {\n  float a = float(i) * .37;\n  float b = .6 + mod(float(i), 3.) * .3;\n  float c = .8 + mod(float(i + 1), 4.) * 0.25;\n\n  float x = sin(t * b + a);\n  float y = cos(t * c + a * 1.5);\n\n  return .5 + .5 * vec2(x, y);\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  const float firstFrameOffset = 41.5;\n  float t = .5 * (u_time + firstFrameOffset);\n\n  float radius = smoothstep(0., 1., length(shape_uv - .5));\n  float center = 1. - radius;\n  for (float i = 1.; i <= 2.; i++) {\n    shape_uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., shape_uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., shape_uv.y));\n    shape_uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., shape_uv.x));\n  }\n\n  vec2 uvRotated = shape_uv;\n  uvRotated -= vec2(.5);\n  float angle = 3. * u_swirl * radius;\n  uvRotated = rotate(uvRotated, -angle);\n  uvRotated += vec2(.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n  float totalWeight = 0.;\n\n  for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 pos = getPosition(i, t);\n    vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;\n    float opacityFraction = u_colors[i].a;\n\n    float dist = length(uvRotated - pos);\n\n    dist = pow(dist, 3.5);\n    float weight = 1. / (dist + 1e-3);\n    color += colorFraction * weight;\n    opacity += opacityFraction * weight;\n    totalWeight += weight;\n  }\n\n  color /= totalWeight;\n  opacity /= totalWeight;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MeshGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_distortion: number;\n  u_swirl: number;\n}\n\nexport interface MeshGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  distortion?: number;\n  swirl?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AACjB;AAcO,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAK1B,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAsCa,iBAAiB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBlD,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/metaballs.js

@@ -50,7 +50,8 @@ void main() {
 
   shape_uv += .5;
 
-  float t = .2 * u_time + 500.;
+  const float firstFrameOffset = 2503.4;
+  float t = .2 * (u_time + firstFrameOffset);
 
   vec3 totalColor = vec3(0.);
   float totalShape = 0.;

package/dist/shaders/metaballs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/metaballs.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, textureRandomizerR, colorBandingFix } from '../shader-utils.js';\n\nexport const metaballsMeta = {\n  maxColorCount: 8,\n  maxBallsCount: 20,\n} as const;\n\n/**\n * N circular shapes moving around the center, blending and merging based on distance\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_size: ball base size\n * - u_sizeRange (0..1): randomizes the size of balls between 0 and u_size\n * - u_count: number of balls on the canvas\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const metaballsFragmentShader: 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[${metaballsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${textureRandomizerR}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  vec2 p0 = vec2(i, 0.0);\n  vec2 p1 = vec2(i + 1.0, 0.0);\n  return mix(randomR(p0), randomR(p1), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  float t = .2 * u_time + 500.;\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n\n  for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {\n    if (i >= int(ceil(u_count))) break;\n\n    float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});\n    float angle = TWO_PI * idxFract;\n\n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n\n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\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  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_count: number;\n  u_size: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  count?: number;\n  size?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;AAiBO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4BI,cAAc,aAAa;AAAA;AAAA;AAAA,wCAGX,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwC/D,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "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, textureRandomizerR, colorBandingFix } from '../shader-utils.js';\n\nexport const metaballsMeta = {\n  maxColorCount: 8,\n  maxBallsCount: 20,\n} as const;\n\n/**\n * N circular shapes moving around the center, blending and merging based on distance\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_size: ball base size\n * - u_sizeRange (0..1): randomizes the size of balls between 0 and u_size\n * - u_count: number of balls on the canvas\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const metaballsFragmentShader: 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[${metaballsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${textureRandomizerR}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  vec2 p0 = vec2(i, 0.0);\n  vec2 p1 = vec2(i + 1.0, 0.0);\n  return mix(randomR(p0), randomR(p1), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  const float firstFrameOffset = 2503.4;\n  float t = .2 * (u_time + firstFrameOffset);\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n\n  for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {\n    if (i >= int(ceil(u_count))) break;\n\n    float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});\n    float angle = TWO_PI * idxFract;\n\n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n\n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\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  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_count: number;\n  u_size: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  count?: number;\n  size?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;AAiBO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA6BI,cAAc,aAAa;AAAA;AAAA;AAAA,wCAGX,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwC/D,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/paper-texture.js

@@ -8,7 +8,6 @@ import { rotation2, declarePI, fiberNoise, textureRandomizerR } from "../shader-
 const paperTextureFragmentShader = `#version 300 es
 precision mediump float;
 
-uniform float u_time;
 uniform vec2 u_resolution;
 uniform float u_pixelRatio;
 

package/dist/shaders/paper-texture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/paper-texture.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * Mimicking paper texture with a combination of noises\n *\n * Uniforms:\n * - u_colorFront, u_colorBack (RGBA)\n * - u_contrast - mixing front and back colors\n * - u_roughness - pixel noise, related to canvas => not scalable\n * - u_fiber, u_fiberScale - curly shaped noise\n * - u_crumples, u_crumplesScale - cell-based pattern\n * - u_folds, u_foldsNumber - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_blur - big-scale noise mask applied to everything but roughness\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberScale;\nuniform float u_crumples;\nuniform float u_crumplesScale;\nuniform float u_folds;\nuniform float u_foldsNumber;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_blur;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, uv.y);\n\n  return left * right * bottom * top;\n}\n\n${declarePI}\n${rotation2}\n${textureRandomizerR}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\nfloat fbm(vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 3; i++) {\n    total += valueNoise(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat roughness(vec2 p) {\n  p *= .1;\n  float o = 0.;\n  for (float i = 0.; ++i < 4.; p *= 2.1) {\n    vec4 w = vec4(floor(p), ceil(p));\n    vec2 f = fract(p);\n    o += mix(\n      mix(randomG(w.xy), randomG(w.xw), f.y),\n      mix(randomG(w.zy), randomG(w.zw), f.y),\n      f.x);\n    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));\n  }\n  return o / 3.;\n}\n\n${fiberNoise}\n\nvec2 randomGB(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).gb;\n}\nfloat crumpledNoise(vec2 t, float pw) {\n  vec2 p = floor(t);\n  float wsum = 0.;\n  float cl = 0.;\n  for (int y = -1; y < 2; y += 1) {\n    for (int x = -1; x < 2; x += 1) {\n      vec2 b = vec2(float(x), float(y));\n      vec2 q = b + p;\n      vec2 q2 = q - floor(q / 8.) * 8.;\n      vec2 c = q + randomGB(q2);\n      vec2 r = c - t;\n      float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);\n      cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;\n      wsum += w;\n    }\n  }\n  return pow(cl / wsum, .5) * 2.;\n}\nfloat crumplesShape(vec2 uv) {\n  return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.);\n}\n\n\nvec2 folds(vec2 uv) {\n    vec3 pp = vec3(0.);\n    float l = 9.;\n    for (float i = 0.; i < 15.; i++) {\n      if (i >= u_foldsNumber) break;\n      vec2 rand = randomGB(vec2(i, i * u_seed));\n      float an = rand.x * TWO_PI;\n      vec2 p = vec2(cos(an), sin(an)) * rand.y;\n      float dist = distance(uv, p);\n      l = min(l, dist);\n      \n      if (l == dist) {\n        pp.xy = (uv - p.xy);\n        pp.z = dist;\n      }\n    }\n    return mix(pp.xy, vec2(0.), pow(pp.z, .25));\n}\n\nfloat drops(vec2 uv) {\n  vec2 iDropsUV = floor(uv);\n  vec2 fDropsUV = fract(uv);\n  float dropsMinDist = 1.;\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 neighbor = vec2(float(i), float(j));\n      vec2 offset = randomGB(iDropsUV + neighbor);\n      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);\n      vec2 pos = neighbor + offset - fDropsUV;\n      float dist = length(pos);\n      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);\n    }\n  }\n  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));\n}\n\nvoid main() {\n\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));\n\n  vec2 crumplesUV = fract(patternUV * .1 * u_crumplesScale - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 10. * u_fiberScale * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  vec2 foldsUV = patternUV * .12;\n  foldsUV = rotate(foldsUV, 4. * u_seed);\n  vec2 w = folds(foldsUV);\n  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));\n  vec2 w2 = folds(foldsUV);\n\n  float drops = u_drops * drops(patternUV * 2.);\n  \n  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);\n  normalImage.xy += u_folds * 2. * w;\n\n  normal.xy += crumples;\n  normalImage.xy += 1.5 * crumples;\n\n  normal.xy += 3. * drops;\n  normalImage.xy += .2 * drops;\n\n  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));\n  normal *= (1. - 2. * blur);\n  fiber *= (1. - blur);\n\n  normal.xy += u_roughness * 1.5 * roughness;\n  normal.xy += fiber;\n  \n  normalImage += u_roughness * .75 * roughness;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\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  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n  \n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n  \n  color -= .007 * drops;\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_noiseTexture?: HTMLImageElement;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_contrast: number;\n  u_roughness: number;\n  u_fiber: number;\n  u_fiberScale: number;\n  u_crumples: number;\n  u_foldsNumber: number;\n  u_folds: number;\n  u_blur: number;\n  u_crumplesScale: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberScale?: number;\n  crumples?: number;\n  foldsNumber?: number;\n  folds?: number;\n  blur?: number;\n  crumplesScale?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,YAAY,0BAA0B;AAqB9D,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BhD,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ClB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * Mimicking paper texture with a combination of noises\n *\n * Uniforms:\n * - u_colorFront, u_colorBack (RGBA)\n * - u_contrast - mixing front and back colors\n * - u_roughness - pixel noise, related to canvas => not scalable\n * - u_fiber, u_fiberScale - curly shaped noise\n * - u_crumples, u_crumplesScale - cell-based pattern\n * - u_folds, u_foldsNumber - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_blur - big-scale noise mask applied to everything but roughness\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberScale;\nuniform float u_crumples;\nuniform float u_crumplesScale;\nuniform float u_folds;\nuniform float u_foldsNumber;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_blur;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, uv.y);\n\n  return left * right * bottom * top;\n}\n\n${declarePI}\n${rotation2}\n${textureRandomizerR}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\nfloat fbm(vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 3; i++) {\n    total += valueNoise(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat roughness(vec2 p) {\n  p *= .1;\n  float o = 0.;\n  for (float i = 0.; ++i < 4.; p *= 2.1) {\n    vec4 w = vec4(floor(p), ceil(p));\n    vec2 f = fract(p);\n    o += mix(\n      mix(randomG(w.xy), randomG(w.xw), f.y),\n      mix(randomG(w.zy), randomG(w.zw), f.y),\n      f.x);\n    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));\n  }\n  return o / 3.;\n}\n\n${fiberNoise}\n\nvec2 randomGB(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).gb;\n}\nfloat crumpledNoise(vec2 t, float pw) {\n  vec2 p = floor(t);\n  float wsum = 0.;\n  float cl = 0.;\n  for (int y = -1; y < 2; y += 1) {\n    for (int x = -1; x < 2; x += 1) {\n      vec2 b = vec2(float(x), float(y));\n      vec2 q = b + p;\n      vec2 q2 = q - floor(q / 8.) * 8.;\n      vec2 c = q + randomGB(q2);\n      vec2 r = c - t;\n      float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);\n      cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;\n      wsum += w;\n    }\n  }\n  return pow(cl / wsum, .5) * 2.;\n}\nfloat crumplesShape(vec2 uv) {\n  return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.);\n}\n\n\nvec2 folds(vec2 uv) {\n    vec3 pp = vec3(0.);\n    float l = 9.;\n    for (float i = 0.; i < 15.; i++) {\n      if (i >= u_foldsNumber) break;\n      vec2 rand = randomGB(vec2(i, i * u_seed));\n      float an = rand.x * TWO_PI;\n      vec2 p = vec2(cos(an), sin(an)) * rand.y;\n      float dist = distance(uv, p);\n      l = min(l, dist);\n      \n      if (l == dist) {\n        pp.xy = (uv - p.xy);\n        pp.z = dist;\n      }\n    }\n    return mix(pp.xy, vec2(0.), pow(pp.z, .25));\n}\n\nfloat drops(vec2 uv) {\n  vec2 iDropsUV = floor(uv);\n  vec2 fDropsUV = fract(uv);\n  float dropsMinDist = 1.;\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 neighbor = vec2(float(i), float(j));\n      vec2 offset = randomGB(iDropsUV + neighbor);\n      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);\n      vec2 pos = neighbor + offset - fDropsUV;\n      float dist = length(pos);\n      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);\n    }\n  }\n  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));\n}\n\nvoid main() {\n\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));\n\n  vec2 crumplesUV = fract(patternUV * .1 * u_crumplesScale - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 10. * u_fiberScale * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  vec2 foldsUV = patternUV * .12;\n  foldsUV = rotate(foldsUV, 4. * u_seed);\n  vec2 w = folds(foldsUV);\n  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));\n  vec2 w2 = folds(foldsUV);\n\n  float drops = u_drops * drops(patternUV * 2.);\n  \n  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);\n  normalImage.xy += u_folds * 2. * w;\n\n  normal.xy += crumples;\n  normalImage.xy += 1.5 * crumples;\n\n  normal.xy += 3. * drops;\n  normalImage.xy += .2 * drops;\n\n  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));\n  normal *= (1. - 2. * blur);\n  fiber *= (1. - blur);\n\n  normal.xy += u_roughness * 1.5 * roughness;\n  normal.xy += fiber;\n  \n  normalImage += u_roughness * .75 * roughness;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\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  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n  \n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n  \n  color -= .007 * drops;\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_noiseTexture?: HTMLImageElement;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_contrast: number;\n  u_roughness: number;\n  u_fiber: number;\n  u_fiberScale: number;\n  u_crumples: number;\n  u_foldsNumber: number;\n  u_folds: number;\n  u_blur: number;\n  u_crumplesScale: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberScale?: number;\n  crumples?: number;\n  foldsNumber?: number;\n  folds?: number;\n  blur?: number;\n  crumplesScale?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,YAAY,0BAA0B;AAqB9D,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BhD,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ClB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/pulsing-border.js

@@ -84,7 +84,8 @@ float linearstep(float edge0, float edge1, float x) {
 
 void main() {
 
-  float t = 1.2 * u_time;
+  const float firstFrameOffset = 4.;
+  float t = 1.2 * (u_time + firstFrameOffset);
 
   vec2 borderUV = v_responsiveUV;
 

package/dist/shaders/pulsing-border.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/pulsing-border.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, textureRandomizerGB, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_intensity: thickness of individual spots\n * - u_bloom: normal / additive color blending\n * - u_spotSize: angular size of spots\n * - u_spots (float used as int): number of spots rendered per color\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat beat(float time) {\n  float first = pow(sin(time * TWO_PI), 10.);\n  float second = pow(sin((time - 0.15) * TWO_PI), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat roundedBox(vec2 uv, float distance) {\n  float thickness = .5 * u_thickness;\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-u_softness * thickness - 2. * fwidth(borderDistance), .5 * u_softness * thickness, borderDistance - .5 * thickness);\n  border = pow(border, 2.);\n\n  return border;\n}\n\nfloat roundedBoxSmoke(vec2 uv, float distance, float size) {\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n  border *= border;\n  return border;\n}\n\n${textureRandomizerGB}\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat linearstep(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  float t = 1.2 * u_time;\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  borderUV.x *= borderRatio;\n  vec2 halfSize = vec2(.5);\n  halfSize.x *= borderRatio;\n  float radius = min(.5 * u_roundness, halfSize.x);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, 0.)) - radius;\n  float insideDistance = min(max(d.x, d.y), 0.0);\n  float distance = outsideDistance + insideDistance;\n\n  float border = roundedBox(borderUV, distance);\n\n  vec2 v0 = borderUV + halfSize;\n  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);\n  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);\n  vec2 v3 = borderUV - halfSize;\n\n  float cornerFade = 1. - abs(v0.x - v0.y);\n  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));\n  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));\n  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));\n  cornerFade = .75 * pow(cornerFade, 20.);\n\n  float cornerFadeMask = 0.;\n  float maskR = (.35 * u_thickness - .25 * radius);\n  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);\n  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);\n  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);\n  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);\n  float maskOffset = .25 * (u_thickness + radius);\n  {\n    float m = maskHR;\n    m *= maskVT;\n    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHR;\n    m *= maskVB;\n    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVT;\n    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVB;\n    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  cornerFade = clamp(cornerFade, 0., 1.);\n  cornerFade *= cornerFadeMask;\n  border += cornerFade;\n\n  vec2 smokeUV = .2 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);\n  smoke = 30. * pow(smoke, 2.);\n  smoke += cornerFadeMask;\n  smoke *= u_smoke;\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));\n  border *= borderBounds;\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.0;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.0;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + 4. * u_intensity;\n\n  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n        step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = smoothstep(.5 - spotSize, .5, atg1) * smoothstep(.5 + spotSize, .5, atg1);\n\n      sector *= mask;\n      sector *= border;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_roundness: number;\n  u_thickness: number;\n  u_softness: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_spots: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  roundness?: number;\n  thickness?: number;\n  softness?: number;\n  intensity?: number;\n  bloom?: number;\n  spots?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAqBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAkHiB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;",
+  "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, textureRandomizerGB, colorBandingFix } from '../shader-utils.js';\n\nexport const pulsingBorderMeta = {\n  maxColorCount: 5,\n  maxSpots: 4,\n} as const;\n\n/**\n * Color spots traveling around rectangular stroke (border)\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_roundness, u_thickness, u_softness: border parameters\n * - u_intensity: thickness of individual spots\n * - u_bloom: normal / additive color blending\n * - u_spotSize: angular size of spots\n * - u_spots (float used as int): number of spots rendered per color\n * - u_pulse: optional pulsing animation\n * - u_smoke, u_smokeSize: optional noisy shapes around the border\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const pulsingBorderFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${pulsingBorderMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_roundness;\nuniform float u_thickness;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_spotSize;\nuniform float u_spots;\nuniform float u_pulse;\nuniform float u_smoke;\nuniform float u_smokeSize;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat beat(float time) {\n  float first = pow(sin(time * TWO_PI), 10.);\n  float second = pow(sin((time - 0.15) * TWO_PI), 10.);\n\n  return clamp(first + 0.6 * second, 0.0, 1.0);\n}\n\nfloat roundedBox(vec2 uv, float distance) {\n  float thickness = .5 * u_thickness;\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-u_softness * thickness - 2. * fwidth(borderDistance), .5 * u_softness * thickness, borderDistance - .5 * thickness);\n  border = pow(border, 2.);\n\n  return border;\n}\n\nfloat roundedBoxSmoke(vec2 uv, float distance, float size) {\n  float borderDistance = abs(distance);\n  float border = 1. - smoothstep(-.75 * size, .75 * size, borderDistance);\n  border *= border;\n  return border;\n}\n\n${textureRandomizerGB}\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat linearstep(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 4.;\n  float t = 1.2 * (u_time + firstFrameOffset);\n\n  vec2 borderUV = v_responsiveUV;\n\n  float angle = atan(borderUV.y, borderUV.x) / TWO_PI;\n\n  float pulse = u_pulse * beat(.18 * u_time);\n\n  float borderRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  borderUV.x *= borderRatio;\n  vec2 halfSize = vec2(.5);\n  halfSize.x *= borderRatio;\n  float radius = min(.5 * u_roundness, halfSize.x);\n  vec2 d = abs(borderUV) - halfSize + radius;\n  float outsideDistance = length(max(d, 0.)) - radius;\n  float insideDistance = min(max(d.x, d.y), 0.0);\n  float distance = outsideDistance + insideDistance;\n\n  float border = roundedBox(borderUV, distance);\n\n  vec2 v0 = borderUV + halfSize;\n  vec2 v1 = borderUV - vec2(-halfSize.x, halfSize.y);\n  vec2 v2 = borderUV - vec2(halfSize.x, -halfSize.y);\n  vec2 v3 = borderUV - halfSize;\n\n  float cornerFade = 1. - abs(v0.x - v0.y);\n  cornerFade = max(cornerFade, 1. - abs(v1.x + v1.y));\n  cornerFade = max(cornerFade, 1. - abs(v2.x + v2.y));\n  cornerFade = max(cornerFade, 1. - abs(v3.x - v3.y));\n  cornerFade = .75 * pow(cornerFade, 20.);\n\n  float cornerFadeMask = 0.;\n  float maskR = (.35 * u_thickness - .25 * radius);\n  float maskHL = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, borderUV.x);\n  float maskHR = linearstep(halfSize.x - .25 * u_thickness, halfSize.x, -borderUV.x);\n  float maskVT = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, -borderUV.y);\n  float maskVB = linearstep(halfSize.y - .25 * u_thickness, halfSize.y, borderUV.y);\n  float maskOffset = .25 * (u_thickness + radius);\n  {\n    float m = maskHR;\n    m *= maskVT;\n    m *= (1. - clamp(length((v0 - maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHR;\n    m *= maskVB;\n    m *= (1. - clamp(length((v1 - vec2(1., -1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVT;\n    m *= (1. - clamp(length((v2 - vec2(-1., 1.) * maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  {\n    float m = maskHL;\n    m *= maskVB;\n    m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));\n    cornerFadeMask += m;\n  }\n  cornerFade = clamp(cornerFade, 0., 1.);\n  cornerFade *= cornerFadeMask;\n  border += cornerFade;\n\n  vec2 smokeUV = .2 * u_smokeSize * v_patternUV;\n  float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.);\n  smoke -= valueNoise(3.4 * smokeUV - .5 * t);\n  smoke *= roundedBoxSmoke(borderUV, distance, u_smoke);\n  smoke = 30. * pow(smoke, 2.);\n  smoke += cornerFadeMask;\n  smoke *= u_smoke;\n  smoke *= mix(1., pulse, u_pulse);\n  smoke = clamp(smoke, 0., 1.);\n\n  border += smoke;\n  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));\n  border *= borderBounds;\n  border = clamp(border, 0., 1.);\n\n  vec3 blendColor = vec3(0.);\n  float blendAlpha = 0.0;\n  vec3 addColor = vec3(0.);\n  float addAlpha = 0.0;\n\n  float bloom = 4. * u_bloom;\n  float intensity = 1. + 4. * u_intensity;\n\n  for (int colorIdx = 0; colorIdx < ${pulsingBorderMeta.maxColorCount}; colorIdx++) {\n    if (colorIdx >= int(u_colorsCount)) break;\n    float colorIdxF = float(colorIdx);\n\n    vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a;\n    float a = u_colors[colorIdx].a;\n\n    for (int spotIdx = 0; spotIdx < ${pulsingBorderMeta.maxSpots}; spotIdx++) {\n      if (spotIdx >= int(u_spots)) break;\n      float spotIdxF = float(spotIdx);\n\n      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));\n\n      float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;\n      time *= mix(1., -1., step(.5, randVal.y));\n\n      float mask = .5 + .5 * mix(\n        sin(t + spotIdxF * (5. - 1.5 * colorIdxF)),\n        cos(t + spotIdxF * (3. + 1.3 * colorIdxF)),\n        step(mod(colorIdxF, 2.), .5)\n      );\n\n      float p = clamp(2. * u_pulse - randVal.x, 0., 1.);\n      mask = mix(mask, pulse, p);\n\n      float atg1 = fract(angle + time);\n      float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x;\n      spotSize = mix(spotSize, .1, p);\n      float sector = smoothstep(.5 - spotSize, .5, atg1) * smoothstep(.5 + spotSize, .5, atg1);\n\n      sector *= mask;\n      sector *= border;\n      sector *= intensity;\n      sector = clamp(sector, 0., 1.);\n\n      vec3 srcColor = c * sector;\n      float srcAlpha = a * sector;\n\n      blendColor += ((1. - blendAlpha) * srcColor);\n      blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha;\n      addColor += srcColor;\n      addAlpha += srcAlpha;\n    }\n  }\n\n  vec3 accumColor = mix(blendColor, addColor, bloom);\n  float accumAlpha = mix(blendAlpha, addAlpha, bloom);\n  accumAlpha = clamp(accumAlpha, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}`;\n\nexport interface PulsingBorderUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_roundness: number;\n  u_thickness: number;\n  u_softness: number;\n  u_intensity: number;\n  u_bloom: number;\n  u_spots: number;\n  u_spotSize: number;\n  u_pulse: number;\n  u_smoke: number;\n  u_smokeSize: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  roundness?: number;\n  thickness?: number;\n  softness?: number;\n  intensity?: number;\n  bloom?: number;\n  spots?: number;\n  spotSize?: number;\n  pulse?: number;\n  smoke?: number;\n  smokeSize?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB,uBAAuB;AAEzD,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,UAAU;AACZ;AAqBO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAM3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAmHiB,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAO/B,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8C5D,eAAe;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/swirl.d.ts

@@ -23,6 +23,8 @@ export interface SwirlUniforms extends ShaderSizingUniforms {
     u_colorsCount: number;
     u_bandCount: number;
     u_twist: number;
+    u_center: number;
+    u_proportion: number;
     u_softness: number;
     u_noiseFrequency: number;
     u_noise: number;
@@ -32,6 +34,8 @@ export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];
     bandCount?: number;
     twist?: number;
+    center?: number;
+    proportion?: number;
     softness?: number;
     noiseFrequency?: number;
     noise?: number;

package/dist/shaders/swirl.js

@@ -18,6 +18,8 @@ uniform vec4 u_colors[${swirlMeta.maxColorCount}];
 uniform float u_colorsCount;
 uniform float u_bandCount;
 uniform float u_twist;
+uniform float u_center;
+uniform float u_proportion;
 uniform float u_softness;
 uniform float u_noise;
 uniform float u_noiseFrequency;
@@ -47,9 +49,14 @@ void main() {
   shape = 1. - abs(2. * shape - 1.);
   shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);
 
-  float mid = smoothstep(.2, .4, pow(l, twist));
+  float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));
   shape = mix(0., shape, mid);
 
+  float proportion = clamp(u_proportion, 0., 1.);
+  float exponent = mix(.25, 1., proportion * 2.);
+  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));
+  shape = pow(shape, exponent);
+
   float mixer = shape * u_colorsCount;
   vec4 gradient = u_colors[0];
   gradient.rgb *= gradient.a;
@@ -71,6 +78,10 @@ void main() {
     gradient = mix(gradient, c, m);
   }
 
+  float midAA = .1 * fwidth(pow(l, -twist));
+  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));
+  outerShape = mix(0., outerShape, outerMid);
+
   vec3 color = gradient.rgb * outerShape;
   float opacity = gradient.a * outerShape;
 

package/dist/shaders/swirl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/swirl.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 { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Twisting radial bands\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_bandCount (float, used as int): number of sectors\n * - u_twist: sectors twist intensity (0 = linear)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_noise, u_noiseFrequency: simplex noise distortion over the shape\n *\n */\n\n// language=GLSL\nexport const swirlFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${swirlMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_softness;\nuniform float u_noise;\nuniform float u_noiseFrequency;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n\n  float t = u_time;\n\n  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;\n  float angle_norm = angle / TWO_PI;\n\n  float twist = 3. * clamp(u_twist, 0., 1.);\n  float offset = pow(l, -twist) + angle_norm;\n\n  float shape = fract(offset);\n  shape = 1. - abs(2. * shape - 1.);\n  shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);\n\n  float mid = smoothstep(.2, .4, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float mixer = shape * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  \n  float outerShape = 0.;\n  for (int i = 1; i < ${swirlMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    float aa = fwidth(m);\n    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);\n\n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\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 SwirlUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_bandCount: number;\n  u_twist: number;\n  u_softness: number;\n  u_noiseFrequency: number;\n  u_noise: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  bandCount?: number;\n  twist?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noise?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,cAAc,WAAW,WAAW,uBAAuB;AAE7D,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAgBO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMnB,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ7C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA2Ba,UAAU,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuB/C,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "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 { simplexNoise, declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const swirlMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Twisting radial bands\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_bandCount (float, used as int): number of sectors\n * - u_twist: sectors twist intensity (0 = linear)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_noise, u_noiseFrequency: simplex noise distortion over the shape\n *\n */\n\n// language=GLSL\nexport const swirlFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${swirlMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_bandCount;\nuniform float u_twist;\nuniform float u_center;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_noise;\nuniform float u_noiseFrequency;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${simplexNoise}\n${rotation2}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  float l = length(shape_uv);\n\n  float t = u_time;\n\n  float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t;\n  float angle_norm = angle / TWO_PI;\n\n  float twist = 3. * clamp(u_twist, 0., 1.);\n  float offset = pow(l, -twist) + angle_norm;\n\n  float shape = fract(offset);\n  shape = 1. - abs(2. * shape - 1.);\n  shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv);\n\n  float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist));\n  shape = mix(0., shape, mid);\n\n  float proportion = clamp(u_proportion, 0., 1.);\n  float exponent = mix(.25, 1., proportion * 2.);\n  exponent = mix(exponent, 10., max(0., proportion * 2. - 1.));\n  shape = pow(shape, exponent);\n\n  float mixer = shape * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  \n  float outerShape = 0.;\n  for (int i = 1; i < ${swirlMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = clamp(mixer - float(i - 1), 0., 1.);\n    float aa = fwidth(m);\n    m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m);\n\n    if (i == 1) {\n      outerShape = m;\n    }\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  float midAA = .1 * fwidth(pow(l, -twist));\n  float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist));\n  outerShape = mix(0., outerShape, outerMid);\n\n  vec3 color = gradient.rgb * outerShape;\n  float opacity = gradient.a * outerShape;\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 SwirlUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_bandCount: number;\n  u_twist: number;\n  u_center: number;\n  u_proportion: number;\n  u_softness: number;\n  u_noiseFrequency: number;\n  u_noise: number;\n}\n\nexport interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  bandCount?: number;\n  twist?: number;\n  center?: number;\n  proportion?: number;\n  softness?: number;\n  noiseFrequency?: number;\n  noise?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,cAAc,WAAW,WAAW,uBAAuB;AAE7D,MAAM,YAAY;AAAA,EACvB,eAAe;AACjB;AAgBO,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMnB,UAAU,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAgCa,UAAU,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2B/C,eAAe;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/warp.js

@@ -54,7 +54,8 @@ void main() {
   vec2 uv = v_patternUV;
   uv *= .5;
 
-  float t = 0.0625 * u_time;
+  const float firstFrameOffset = 118.;
+  float t = 0.0625 * (u_time + firstFrameOffset);
 
   float n1 = valueNoise(uv * 1. + t);
   float n2 = valueNoise(uv * 2. - t);

package/dist/shaders/warp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/warp.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, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  float t = 0.0625 * u_time;\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(uv * 2. - t);\n  float angle = n1 * TWO_PI;\n  uv.x += 4. * u_distortion * n2 * cos(angle);\n  uv.y += 4. * u_distortion * n2 * sin(angle);\n\n  float swirl = u_swirl;\n  for (int i = 1; i <= 20; i++) {\n    if (i >= int(u_swirlIterations)) break;\n    float iFloat = float(i);\n//    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float aa = fwidth(shape);\n  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(m);\n    float softness = .5 * u_softness + fwidth(m);\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n    float stepped = localMixerStart + smoothed;\n\n    m = mix(stepped, m, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAsBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA6Da,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA+BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
+  "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, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  const float firstFrameOffset = 118.;\n  float t = 0.0625 * (u_time + firstFrameOffset);\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(uv * 2. - t);\n  float angle = n1 * TWO_PI;\n  uv.x += 4. * u_distortion * n2 * cos(angle);\n  uv.y += 4. * u_distortion * n2 * sin(angle);\n\n  float swirl = u_swirl;\n  for (int i = 1; i <= 20; i++) {\n    if (i >= int(u_swirlIterations)) break;\n    float iFloat = float(i);\n//    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float aa = fwidth(shape);\n  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(m);\n    float softness = .5 * u_softness + fwidth(m);\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n    float stepped = localMixerStart + smoothed;\n\n    m = mix(stepped, m, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAsBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA8Da,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA+BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
   "names": []
 }

package/dist/shaders/water.js

@@ -65,7 +65,8 @@ float getCausticNoise(vec2 uv, float t, float scale) {
 void main() {
   vec2 imageUV = v_imageUV;
   vec2 patternUV = v_imageUV - .5;
-  patternUV = 10. * u_effectScale * (patternUV * vec2(u_imageAspectRatio, 1.));
+  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));
+  patternUV /= (.01 + .09 * u_effectScale);
   
   float t = u_time;
   

package/dist/shaders/water.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/water.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Mimicking water surface distortion with a combination of noises;\n * Can be applied over the texture or just be used as an animated pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorHighlight (RGBA)\n * - u_effectScale: pattern scale relative to the image\n * - u_caustic: power of caustic distortion\n * - u_layering: the power of 2nd layer of caustic distortion\n * - u_edges: caustic distortion power on the image edges\n * - u_waves: additional distortion based in Simplex noise, independent from caustic\n * - u_highlights: a coloring added over the image/background, following the caustic shape\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_effectScale;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n${simplexNoise}\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, uv.y);\n\n  return left * right * bottom * top;\n}\n\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 10. * u_effectScale * (patternUV * vec2(u_imageAspectRatio, 1.));\n  \n  float t = u_time;\n  \n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = pow(causticNoise, 2.);\n  \n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));\n  edgesDistortion *= smoothstep(1., .9, imageUV.y);\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n  \n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n  \n  float wavesDistortion = .1 * u_waves * wavesNoise;\n  \n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  \n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n  \n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n  \n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n  \n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_effectScale: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  effectScale?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB;AAkB5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Mimicking water surface distortion with a combination of noises;\n * Can be applied over the texture or just be used as an animated pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorHighlight (RGBA)\n * - u_effectScale: pattern scale relative to the image\n * - u_caustic: power of caustic distortion\n * - u_layering: the power of 2nd layer of caustic distortion\n * - u_edges: caustic distortion power on the image edges\n * - u_waves: additional distortion based in Simplex noise, independent from caustic\n * - u_highlights: a coloring added over the image/background, following the caustic shape\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_effectScale;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n${simplexNoise}\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, uv.y);\n\n  return left * right * bottom * top;\n}\n\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\n  patternUV /= (.01 + .09 * u_effectScale);\n  \n  float t = u_time;\n  \n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = pow(causticNoise, 2.);\n  \n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));\n  edgesDistortion *= smoothstep(1., .9, imageUV.y);\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n  \n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n  \n  float wavesDistortion = .1 * u_waves * wavesNoise;\n  \n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  \n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n  \n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n  \n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n  \n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_effectScale: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  effectScale?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB;AAkB5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
   "type": "module",
   "sideEffects": false,