@paper-design/shaders 0.0.30 → 0.0.31

package/README.md

@@ -13,10 +13,13 @@ myDiv.style.width = '600px';
 myDiv.style.height = '400px';
 
 const shaderParams = {
-  u_color1: getShaderColorFromString("#283BFC"),
-  u_color2: getShaderColorFromString("#FF2828"),
-  u_color3: getShaderColorFromString("#dddddd"),
-  u_color4: getShaderColorFromString("#800080")
+  u_colorsCount: 4,
+  u_colors: [
+    getShaderColorFromString("#283bfc"),
+    getShaderColorFromString("#ff2828"),
+    getShaderColorFromString("#dddddd"),
+    getShaderColorFromString("#800080")
+  ],
 };
 
 const speed = 0.25;

package/dist/index.d.ts

@@ -1,43 +1,45 @@
 /** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */
-export { ShaderMount, isPaperShaderElement } from './shader-mount';
-export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount';
+export { ShaderMount, isPaperShaderElement } from './shader-mount.js';
+export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset } from './shader-mount.js';
 /** Shader sizing options and uniforms */
-export { defaultObjectSizing, defaultPatternSizing, ShaderFitOptions, type ShaderFit, type ShaderSizingParams, type ShaderSizingUniforms, } from './shader-sizing';
+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 */
-export { meshGradientFragmentShader, meshGradientMeta, type MeshGradientParams, type MeshGradientUniforms, } from './shaders/mesh-gradient';
+export { meshGradientFragmentShader, meshGradientMeta, type MeshGradientParams, type MeshGradientUniforms, } from './shaders/mesh-gradient.js';
 /** Fractional Brownian motion (fBm) noise over the polar coordinates, masked with ring shape */
-export { smokeRingMeta, smokeRingFragmentShader, type SmokeRingParams, type SmokeRingUniforms, } from './shaders/smoke-ring';
+export { smokeRingMeta, smokeRingFragmentShader, type SmokeRingParams, type SmokeRingUniforms, } from './shaders/smoke-ring.js';
 /** A shader rendering a fractal-like structure made of several layers of since-arches */
-export { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise';
+export { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';
 /** A shader rendering an animated dot pattern based on Voronoi diagram */
-export { dotOrbitMeta, dotOrbitFragmentShader, type DotOrbitParams, type DotOrbitUniforms } from './shaders/dot-orbit';
+export { dotOrbitMeta, dotOrbitFragmentShader, type DotOrbitParams, type DotOrbitUniforms, } from './shaders/dot-orbit.js';
 /** A shader rendering a static dot pattern */
-export { dotGridFragmentShader, DotGridShapes, type DotGridShape, type DotGridParams, type DotGridUniforms, } from './shaders/dot-grid';
+export { dotGridFragmentShader, DotGridShapes, type DotGridShape, type DotGridParams, type DotGridUniforms, } from './shaders/dot-grid.js';
 /** A shader that calculates a combination of 2 simplex noises with result rendered as a gradient */
-export { simplexNoiseMeta, simplexNoiseFragmentShader, type SimplexNoiseParams, type SimplexNoiseUniforms, } from './shaders/simplex-noise';
+export { simplexNoiseMeta, simplexNoiseFragmentShader, type SimplexNoiseParams, type SimplexNoiseUniforms, } from './shaders/simplex-noise.js';
 /** A number of circlular shapes blened in a gooey way */
-export { metaballsMeta, metaballsFragmentShader, type MetaballsParams, type MetaballsUniforms, } from './shaders/metaballs';
+export { metaballsMeta, metaballsFragmentShader, type MetaballsParams, type MetaballsUniforms, } from './shaders/metaballs.js';
 /** 2d noise with max number of parameters to be exposed to users */
-export { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise';
+export { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';
 /** Voronoi diagram: classic + rounded edges */
-export { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi';
+export { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';
 /** Waves pattern */
-export { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves';
+export { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';
 /** Warp: distortion + swirl + underlying shapes */
-export { warpMeta, warpFragmentShader, WarpPatterns, type WarpParams, type WarpUniforms, type WarpPattern, } from './shaders/warp';
+export { warpMeta, warpFragmentShader, WarpPatterns, type WarpParams, type WarpUniforms, type WarpPattern, } from './shaders/warp.js';
 /** Radial shape made of randomized stripes */
-export { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays';
+export { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';
 /** Single-color spiral shape */
-export { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral';
+export { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';
 /** Multi-color radial swirl  */
-export { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl';
+export { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';
 /** Dithering effect applied over abstract shapes */
-export { ditheringFragmentShader, DitheringShapes, DitheringTypes, type DitheringParams, type DitheringUniforms, type DitheringShape, type DitheringType, } from './shaders/dithering';
+export { ditheringFragmentShader, DitheringShapes, DitheringTypes, type DitheringParams, type DitheringUniforms, type DitheringShape, type DitheringType, } from './shaders/dithering.js';
 /** N-color gradient applied to the abstract shapes w/ grainy overlay & distortion  */
-export { grainGradientFragmentShader, grainGradientMeta, GrainGradientShapes, type GrainGradientParams, type GrainGradientUniforms, type GrainGradientShape, } from './shaders/grain-gradient';
+export { grainGradientFragmentShader, grainGradientMeta, GrainGradientShapes, type GrainGradientParams, type GrainGradientUniforms, type GrainGradientShape, } from './shaders/grain-gradient.js';
 /** Liquid metal effect applied to the abstract shapes */
-export { liquidMetalFragmentShader, type LiquidMetalParams, type LiquidMetalUniforms } from './shaders/liquid-metal';
+export { liquidMetalFragmentShader, LiquidMetalShapes, type LiquidMetalParams, type LiquidMetalUniforms, type LiquidMetalShape, } from './shaders/liquid-metal.js';
 /** Border with configurable size & radius ade of rotating pulsing light spots  */
-export { pulsingBorderMeta, pulsingBorderFragmentShader, type PulsingBorderParams, type PulsingBorderUniforms, } from './shaders/pulsing-border';
-export { getShaderColorFromString } from './get-shader-color-from-string';
-export { getShaderNoiseTexture } from './get-shader-noise-texture';
+export { pulsingBorderMeta, pulsingBorderFragmentShader, type PulsingBorderParams, type PulsingBorderUniforms, } from './shaders/pulsing-border.js';
+/**  */
+export { colorPanelsFragmentShader, colorPanelsMeta, type ColorPanelsParams, type ColorPanelsUniforms, } from './shaders/color-panels.js';
+export { getShaderColorFromString } from './get-shader-color-from-string.js';
+export { getShaderNoiseTexture } from './get-shader-noise-texture.js';

package/dist/index.js

@@ -3,70 +3,83 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { ShaderMount, isPaperShaderElement } from "./shader-mount";
+import { ShaderMount, isPaperShaderElement } from "./shader-mount.js";
 import {
   defaultObjectSizing,
   defaultPatternSizing,
   ShaderFitOptions
-} from "./shader-sizing";
+} from "./shader-sizing.js";
 import {
   meshGradientFragmentShader,
   meshGradientMeta
-} from "./shaders/mesh-gradient";
+} from "./shaders/mesh-gradient.js";
 import {
   smokeRingMeta,
   smokeRingFragmentShader
-} from "./shaders/smoke-ring";
-import { neuroNoiseFragmentShader } from "./shaders/neuro-noise";
-import { dotOrbitMeta, dotOrbitFragmentShader } from "./shaders/dot-orbit";
+} from "./shaders/smoke-ring.js";
+import { neuroNoiseFragmentShader } from "./shaders/neuro-noise.js";
+import {
+  dotOrbitMeta,
+  dotOrbitFragmentShader
+} from "./shaders/dot-orbit.js";
 import {
   dotGridFragmentShader,
   DotGridShapes
-} from "./shaders/dot-grid";
+} from "./shaders/dot-grid.js";
 import {
   simplexNoiseMeta,
   simplexNoiseFragmentShader
-} from "./shaders/simplex-noise";
+} from "./shaders/simplex-noise.js";
 import {
   metaballsMeta,
   metaballsFragmentShader
-} from "./shaders/metaballs";
-import { perlinNoiseFragmentShader } from "./shaders/perlin-noise";
-import { voronoiMeta, voronoiFragmentShader } from "./shaders/voronoi";
-import { wavesFragmentShader } from "./shaders/waves";
+} from "./shaders/metaballs.js";
+import { perlinNoiseFragmentShader } from "./shaders/perlin-noise.js";
+import { voronoiMeta, voronoiFragmentShader } from "./shaders/voronoi.js";
+import { wavesFragmentShader } from "./shaders/waves.js";
 import {
   warpMeta,
   warpFragmentShader,
   WarpPatterns
-} from "./shaders/warp";
-import { godRaysMeta, godRaysFragmentShader } from "./shaders/god-rays";
-import { spiralFragmentShader } from "./shaders/spiral";
-import { swirlMeta, swirlFragmentShader } from "./shaders/swirl";
+} from "./shaders/warp.js";
+import { godRaysMeta, godRaysFragmentShader } from "./shaders/god-rays.js";
+import { spiralFragmentShader } from "./shaders/spiral.js";
+import { swirlMeta, swirlFragmentShader } from "./shaders/swirl.js";
 import {
   ditheringFragmentShader,
   DitheringShapes,
   DitheringTypes
-} from "./shaders/dithering";
+} from "./shaders/dithering.js";
 import {
   grainGradientFragmentShader,
   grainGradientMeta,
   GrainGradientShapes
-} from "./shaders/grain-gradient";
-import { liquidMetalFragmentShader } from "./shaders/liquid-metal";
+} from "./shaders/grain-gradient.js";
+import {
+  liquidMetalFragmentShader,
+  LiquidMetalShapes
+} from "./shaders/liquid-metal.js";
 import {
   pulsingBorderMeta,
   pulsingBorderFragmentShader
-} from "./shaders/pulsing-border";
-import { getShaderColorFromString } from "./get-shader-color-from-string";
-import { getShaderNoiseTexture } from "./get-shader-noise-texture";
+} from "./shaders/pulsing-border.js";
+import {
+  colorPanelsFragmentShader,
+  colorPanelsMeta
+} from "./shaders/color-panels.js";
+import { getShaderColorFromString } from "./get-shader-color-from-string.js";
+import { getShaderNoiseTexture } from "./get-shader-noise-texture.js";
 export {
   DitheringShapes,
   DitheringTypes,
   DotGridShapes,
   GrainGradientShapes,
+  LiquidMetalShapes,
   ShaderFitOptions,
   ShaderMount,
   WarpPatterns,
+  colorPanelsFragmentShader,
+  colorPanelsMeta,
   defaultObjectSizing,
   defaultPatternSizing,
   ditheringFragmentShader,

package/dist/index.js.map

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

package/dist/shaders/color-panels.d.ts

@@ -0,0 +1,48 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const colorPanelsMeta: {
+    readonly maxColorCount: 7;
+};
+/**
+ * Animated, pseudo-3D color panels with dynamic layering and directional blur
+ * by Ksenia Kondrashova
+ *
+ * Uniforms include:
+ * - u_colors (vec4[]): Input RGBA colors for panels
+ * - u_colorsCount (float): Number of active colors (`u_colors` length)
+ * - u_density (float): Panels to show
+ * - u_colorBack (vec4): Background color to blend behind panels
+ * - u_angle (float): Panel skew angle to morph rect to triangle panels
+ * - u_length (float): Length of panels (relative to total height)
+ * - u_blur (float): Horizontal blur amount along panel edges
+ * - u_fadePosition (float): Controls transparency toward the center of panels
+ * - u_colorShuffler (float): Affects how panel colors cycle
+ * - u_singleColor (float): Controls blending of adjacent colors per panel
+ */
+export declare const colorPanelsFragmentShader: string;
+export interface ColorPanelsUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_colorBack: [number, number, number, number];
+    u_angle1: number;
+    u_angle2: number;
+    u_length: number;
+    u_blur: number;
+    u_fadeIn: number;
+    u_fadeOut: number;
+    u_density: number;
+    u_gradient: number;
+}
+export interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    colorBack?: string;
+    angle1?: number;
+    angle2?: number;
+    length?: number;
+    blur?: number;
+    fadeIn?: number;
+    fadeOut?: number;
+    density?: number;
+    gradient?: number;
+}

package/dist/shaders/color-panels.js

@@ -0,0 +1,213 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, colorBandingFix } from "../shader-utils.js";
+const colorPanelsMeta = {
+  maxColorCount: 7
+};
+const colorPanelsFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform vec2 u_resolution;
+
+uniform float u_time;
+uniform float u_scale;
+
+uniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform vec4 u_colorBack;
+uniform float u_angle1;
+uniform float u_angle2;
+uniform float u_length;
+uniform float u_blur;
+uniform float u_fadeIn;
+uniform float u_fadeOut;
+uniform float u_density;
+uniform float u_gradient;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+
+vec2 getPanel(float angle, vec2 uv, float invLength) {
+  float sinA = sin(angle);
+  float cosA = cos(angle);
+
+  float denom = sinA - uv.y * cosA;
+  if (abs(denom) < 1e-5) return vec2(0.);
+
+  float z = uv.y / denom;
+  float zLimit = 0.5;
+
+  if (z < 0. || z > zLimit) return vec2(0.);
+
+  float zRatio = z / zLimit;
+  float panelMap = 1.0 - zRatio;
+  float x = uv.x * (cosA * z + 1.) * invLength;
+
+  float zOffset = zRatio - .5;
+  float left = -.5 + zOffset * u_angle1;
+  float right = .5 - zOffset * u_angle2;
+
+  float blurFactor = (1. - panelMap) * clamp((abs(angle / TWO_PI - .5) - .01) / (-.01), 0., 1.);;
+  float blurX = .15 * blurFactor + panelMap * u_blur;
+
+  float leftEdge1 = left - .5 * blurX;
+  float leftEdge2 = left + blurX;
+  float rightEdge1 = right - blurX;
+  float rightEdge2 = right + .5 * blurX;
+
+  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
+
+  return vec2(panel, clamp(panelMap, 0., 1.));
+}
+
+vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
+  float fade = smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap)
+   * (1. - smoothstep(1. - u_fadeIn, 1., panelMap));
+
+  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
+  float blendedAlpha = mix(0., colorA.a, fade);
+
+  return vec4(blendedRGB, blendedAlpha) * panelMask;
+}
+
+void main() {
+  vec2 uv = v_objectUV;
+  uv *= 1.25;
+
+  float t = .05 * u_time;
+  t = fract(t);
+  bool reverseTime = (t < 0.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  int colorsCount = int(u_colorsCount);
+
+  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];
+  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {
+    if (i >= colorsCount) break;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    premultipliedColors[i] = c;
+  }
+
+  float invLength = 1.5 / (u_length + 0.001);
+
+  float totalColorWeight = 0.;
+  int panelsNumber = 12;
+
+  float densityNormalizer = 1.;
+  if (colorsCount == 4) {
+    panelsNumber = 16;
+    densityNormalizer = 1.34;
+  } else if (colorsCount == 5) {
+    panelsNumber = 20;
+    densityNormalizer = 1.67;
+  } else if (colorsCount == 7) {
+    panelsNumber = 14;
+    densityNormalizer = 1.17;
+  }
+
+  float fPanelsNumber = float(panelsNumber);
+
+  float totalPanelsShape = 0.;
+  float panelGrad = 1. - clamp(u_gradient, 0., 1.);
+
+  for (int set = 0; set < 2; set++) {
+    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
+    if (!isForward) continue;
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 1) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(t + offset);
+      float angleNorm = densityFract / u_density;
+      if (densityFract >= .5 || angleNorm >= .3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength);
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      if (panelMask <= .001) continue;
+      float panelMap = panel[1];
+
+      int colorIdx = idx % colorsCount;
+      int nextColorIdx = (idx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 0) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(-t + offset);
+      float angleNorm = -densityFract / u_density;
+      if (densityFract >= .5 || angleNorm < -.3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength);
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      if (panelMask <= .001) continue;
+      float panelMap = panel[1];
+
+      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
+      if (colorIdx < 0) colorIdx += colorsCount;
+      int nextColorIdx = (colorIdx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  colorPanelsFragmentShader,
+  colorPanelsMeta
+};
+//# sourceMappingURL=color-panels.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/color-panels.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\n\nexport const colorPanelsMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Animated, pseudo-3D color panels with dynamic layering and directional blur\n * by Ksenia Kondrashova\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors for panels\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_density (float): Panels to show\n * - u_colorBack (vec4): Background color to blend behind panels\n * - u_angle (float): Panel skew angle to morph rect to triangle panels\n * - u_length (float): Length of panels (relative to total height)\n * - u_blur (float): Horizontal blur amount along panel edges\n * - u_fadePosition (float): Controls transparency toward the center of panels\n * - u_colorShuffler (float): Affects how panel colors cycle\n * - u_singleColor (float): Controls blending of adjacent colors per panel\n */\n\nexport const colorPanelsFragmentShader: string = `#version 300 es\nprecision lowp float;\n\nuniform vec2 u_resolution;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${colorPanelsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_density;\nuniform float u_gradient;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 getPanel(float angle, vec2 uv, float invLength) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < 1e-5) return vec2(0.);\n\n  float z = uv.y / denom;\n  float zLimit = 0.5;\n\n  if (z < 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1.0 - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n\n  float blurFactor = (1. - panelMap) * clamp((abs(angle / TWO_PI - .5) - .01) / (-.01), 0., 1.);;\n  float blurX = .15 * blurFactor + panelMap * u_blur;\n\n  float leftEdge1 = left - .5 * blurX;\n  float leftEdge2 = left + blurX;\n  float rightEdge1 = right - blurX;\n  float rightEdge2 = right + .5 * blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n\n  return vec2(panel, clamp(panelMap, 0., 1.));\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap)\n   * (1. - smoothstep(1. - u_fadeIn, 1., panelMap));\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = v_objectUV;\n  uv *= 1.25;\n\n  float t = .05 * u_time;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[${colorPanelsMeta.maxColorCount}];\n  for (int i = 0; i < ${colorPanelsMeta.maxColorCount}; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / (u_length + 0.001);\n\n  float totalColorWeight = 0.;\n  int panelsNumber = 12;\n\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n\n  float totalPanelsShape = 0.;\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface ColorPanelsUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_colorBack: [number, number, number, number];\n  u_angle1: number;\n  u_angle2: number;\n  u_length: number;\n  u_blur: number;\n  u_fadeIn: number;\n  u_fadeOut: number;\n  u_density: number;\n  u_gradient: number;\n}\n\nexport interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  angle1?: number;\n  angle2?: number;\n  length?: number;\n  blur?: number;\n  fadeIn?: number;\n  fadeOut?: number;\n  density?: number;\n  gradient?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAEpC,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AACjB;AAmBO,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQzB,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BA0DkB,gBAAgB,aAAa;AAAA,wBAClC,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8GjD,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/dithering.d.ts

@@ -1,13 +1,13 @@
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
  * Dithering Fragment Shader by Ksenia Kondrashova
  * Applies dithering (4 dithering types available) over the
  * abstract shapes animation (7 animated shapes available)
  *
  * Uniforms include:
- * - u_color1: background color, RGBA
- * - u_color2: pixels color, RGBA
+ * - u_colorBack: background color, RGBA
+ * - u_colorFront: pixels color, RGBA
  *
  * - u_shape (float, used as int, 1 to 7):
  *  --- shape = 1: Simplex noise pattern
@@ -29,15 +29,15 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const ditheringFragmentShader: string;
 export interface DitheringUniforms extends ShaderSizingUniforms {
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_colorFront: [number, number, number, number];
     u_shape: (typeof DitheringShapes)[DitheringShape];
     u_type: (typeof DitheringTypes)[DitheringType];
     u_pxSize: number;
 }
 export interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {
-    color1?: string;
-    color2?: string;
+    colorBack?: string;
+    colorFront?: string;
     shape?: DitheringShape;
     type?: DitheringType;
     pxSize?: number;

package/dist/shaders/dithering.js

@@ -7,8 +7,8 @@ import {
   sizingUniformsDeclaration,
   sizingUV,
   drawSizingHelpers
-} from "../shader-sizing";
-import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils";
+} from "../shader-sizing.js";
+import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils.js";
 const ditheringFragmentShader = `#version 300 es
 precision mediump float;
 
@@ -18,8 +18,8 @@ uniform float u_pixelRatio;
 
 ${sizingUniformsDeclaration}
 
-uniform vec4 u_color1;
-uniform vec4 u_color2;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorFront;
 uniform float u_shape;
 uniform float u_type;
 uniform float u_pxSize;
@@ -174,8 +174,16 @@ void main() {
   dithering -= .5;
   float res = step(.5, shape + dithering);
 
-  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);
-  float opacity = mix(u_color1.a, u_color2.a, res);
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
 
   #ifdef ADD_HELPERS
     vec2 helperBox = objectHelperBox;
@@ -200,7 +208,7 @@ const DitheringShapes = {
   sphere: 7
 };
 const DitheringTypes = {
-  random: 1,
+  "random": 1,
   "2x2": 2,
   "4x4": 3,
   "8x8": 4