@paper-design/shaders-react 0.0.32 → 0.0.34

package/README.md

@@ -6,11 +6,8 @@
 import { MeshGradient } from '@paper-design/shaders-react';
 
 <MeshGradient
-  color1="#FFC0CB" // pink
-  color2="#FFFF00" // yellow
-  color3="#0000FF" // blue
-  color4="#800080" // purple
   speed={0.25}
+  colors={["#FFC0CB", "#FFFF00", "#0000FF", "#800080"]}
   style={{ width: 500, height: 200 }}
 />;
 

package/dist/index.d.ts

@@ -1,59 +1,62 @@
-export { ShaderMount } from './shader-mount';
-export type { ShaderMountProps, ShaderComponentProps } from './shader-mount';
-export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient';
-export type { MeshGradientProps } from './shaders/mesh-gradient';
+export { ShaderMount } from './shader-mount.js';
+export type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';
+export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';
+export type { MeshGradientProps } from './shaders/mesh-gradient.js';
 export type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';
-export { SmokeRing, smokeRingPresets } from './shaders/smoke-ring';
-export type { SmokeRingProps } from './shaders/smoke-ring';
+export { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';
+export type { SmokeRingProps } from './shaders/smoke-ring.js';
 export type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';
-export { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise';
-export type { NeuroNoiseProps } from './shaders/neuro-noise';
+export { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';
+export type { NeuroNoiseProps } from './shaders/neuro-noise.js';
 export type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';
-export { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit';
-export type { DotOrbitProps } from './shaders/dot-orbit';
+export { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';
+export type { DotOrbitProps } from './shaders/dot-orbit.js';
 export type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';
-export { DotGrid, dotGridPresets } from './shaders/dot-grid';
-export type { DotGridProps } from './shaders/dot-grid';
-export type { DotGridUniforms, DotGridParams, DotGridShape } from '@paper-design/shaders';
-export { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise';
-export type { SimplexNoiseProps } from './shaders/simplex-noise';
+export { DotGrid, dotGridPresets } from './shaders/dot-grid.js';
+export type { DotGridProps } from './shaders/dot-grid.js';
+export type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';
+export { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';
+export type { SimplexNoiseProps } from './shaders/simplex-noise.js';
 export type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';
-export { Metaballs, metaballsPresets } from './shaders/metaballs';
-export type { MetaballsProps } from './shaders/metaballs';
+export { Metaballs, metaballsPresets } from './shaders/metaballs.js';
+export type { MetaballsProps } from './shaders/metaballs.js';
 export type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';
-export { Waves, wavesPresets } from './shaders/waves';
-export type { WavesProps } from './shaders/waves';
+export { Waves, wavesPresets } from './shaders/waves.js';
+export type { WavesProps } from './shaders/waves.js';
 export type { WavesUniforms, WavesParams } from '@paper-design/shaders';
-export { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise';
-export type { PerlinNoiseProps } from './shaders/perlin-noise';
+export { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';
+export type { PerlinNoiseProps } from './shaders/perlin-noise.js';
 export type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';
-export { Voronoi, voronoiPresets } from './shaders/voronoi';
-export type { VoronoiProps } from './shaders/voronoi';
+export { Voronoi, voronoiPresets } from './shaders/voronoi.js';
+export type { VoronoiProps } from './shaders/voronoi.js';
 export type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';
-export { Warp, warpPresets } from './shaders/warp';
-export type { WarpProps } from './shaders/warp';
+export { Warp, warpPresets } from './shaders/warp.js';
+export type { WarpProps } from './shaders/warp.js';
 export type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';
-export { GodRays, godRaysPresets } from './shaders/god-rays';
-export type { GodRaysProps } from './shaders/god-rays';
+export { GodRays, godRaysPresets } from './shaders/god-rays.js';
+export type { GodRaysProps } from './shaders/god-rays.js';
 export type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';
-export { Spiral, spiralPresets } from './shaders/spiral';
-export type { SpiralProps } from './shaders/spiral';
+export { Spiral, spiralPresets } from './shaders/spiral.js';
+export type { SpiralProps } from './shaders/spiral.js';
 export type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';
-export { Swirl, swirlPresets } from './shaders/swirl';
-export type { SwirlProps } from './shaders/swirl';
+export { Swirl, swirlPresets } from './shaders/swirl.js';
+export type { SwirlProps } from './shaders/swirl.js';
 export type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';
-export { Dithering, ditheringPresets } from './shaders/dithering';
-export type { DitheringProps } from './shaders/dithering';
+export { Dithering, ditheringPresets } from './shaders/dithering.js';
+export type { DitheringProps } from './shaders/dithering.js';
 export type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';
-export { GrainGradient, grainGradientPresets } from './shaders/grain-gradient';
-export type { GrainGradientProps } from './shaders/grain-gradient';
+export { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';
+export type { GrainGradientProps } from './shaders/grain-gradient.js';
 export type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';
-export { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal';
-export type { LiquidMetalProps } from './shaders/liquid-metal';
+export { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';
+export type { LiquidMetalProps } from './shaders/liquid-metal.js';
 export type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';
-export { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border';
-export type { PulsingBorderProps } from './shaders/pulsing-border';
+export { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';
+export type { PulsingBorderProps } from './shaders/pulsing-border.js';
 export type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';
+export { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';
+export type { ColorPanelsProps } from './shaders/color-panels.js';
+export type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';
 export { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';
 export type { ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';
 export { dotOrbitMeta, godRaysMeta, grainGradientMeta, meshGradientMeta, metaballsMeta, pulsingBorderMeta, simplexNoiseMeta, smokeRingMeta, swirlMeta, voronoiMeta, warpMeta, } from '@paper-design/shaders';

package/dist/index.js

@@ -3,25 +3,26 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { ShaderMount } from "./shader-mount";
-import { MeshGradient, meshGradientPresets } from "./shaders/mesh-gradient";
-import { SmokeRing, smokeRingPresets } from "./shaders/smoke-ring";
-import { NeuroNoise, neuroNoisePresets } from "./shaders/neuro-noise";
-import { DotOrbit, dotOrbitPresets } from "./shaders/dot-orbit";
-import { DotGrid, dotGridPresets } from "./shaders/dot-grid";
-import { SimplexNoise, simplexNoisePresets } from "./shaders/simplex-noise";
-import { Metaballs, metaballsPresets } from "./shaders/metaballs";
-import { Waves, wavesPresets } from "./shaders/waves";
-import { PerlinNoise, perlinNoisePresets } from "./shaders/perlin-noise";
-import { Voronoi, voronoiPresets } from "./shaders/voronoi";
-import { Warp, warpPresets } from "./shaders/warp";
-import { GodRays, godRaysPresets } from "./shaders/god-rays";
-import { Spiral, spiralPresets } from "./shaders/spiral";
-import { Swirl, swirlPresets } from "./shaders/swirl";
-import { Dithering, ditheringPresets } from "./shaders/dithering";
-import { GrainGradient, grainGradientPresets } from "./shaders/grain-gradient";
-import { LiquidMetal, liquidMetalPresets } from "./shaders/liquid-metal";
-import { PulsingBorder, pulsingBorderPresets } from "./shaders/pulsing-border";
+import { ShaderMount } from "./shader-mount.js";
+import { MeshGradient, meshGradientPresets } from "./shaders/mesh-gradient.js";
+import { SmokeRing, smokeRingPresets } from "./shaders/smoke-ring.js";
+import { NeuroNoise, neuroNoisePresets } from "./shaders/neuro-noise.js";
+import { DotOrbit, dotOrbitPresets } from "./shaders/dot-orbit.js";
+import { DotGrid, dotGridPresets } from "./shaders/dot-grid.js";
+import { SimplexNoise, simplexNoisePresets } from "./shaders/simplex-noise.js";
+import { Metaballs, metaballsPresets } from "./shaders/metaballs.js";
+import { Waves, wavesPresets } from "./shaders/waves.js";
+import { PerlinNoise, perlinNoisePresets } from "./shaders/perlin-noise.js";
+import { Voronoi, voronoiPresets } from "./shaders/voronoi.js";
+import { Warp, warpPresets } from "./shaders/warp.js";
+import { GodRays, godRaysPresets } from "./shaders/god-rays.js";
+import { Spiral, spiralPresets } from "./shaders/spiral.js";
+import { Swirl, swirlPresets } from "./shaders/swirl.js";
+import { Dithering, ditheringPresets } from "./shaders/dithering.js";
+import { GrainGradient, grainGradientPresets } from "./shaders/grain-gradient.js";
+import { LiquidMetal, liquidMetalPresets } from "./shaders/liquid-metal.js";
+import { PulsingBorder, pulsingBorderPresets } from "./shaders/pulsing-border.js";
+import { ColorPanels, colorPanelsPresets } from "./shaders/color-panels.js";
 import { isPaperShaderElement, getShaderColorFromString } from "@paper-design/shaders";
 import {
   dotOrbitMeta,
@@ -37,6 +38,7 @@ import {
   warpMeta
 } from "@paper-design/shaders";
 export {
+  ColorPanels,
   Dithering,
   DotGrid,
   DotOrbit,
@@ -56,6 +58,7 @@ export {
   Voronoi,
   Warp,
   Waves,
+  colorPanelsPresets,
   ditheringPresets,
   dotGridPresets,
   dotOrbitMeta,

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { ShaderMount } from './shader-mount';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient';\nexport type { MeshGradientProps } from './shaders/mesh-gradient';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring';\nexport type { SmokeRingProps } from './shaders/smoke-ring';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit';\nexport type { DotOrbitProps } from './shaders/dot-orbit';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid';\nexport type { DotGridProps } from './shaders/dot-grid';\nexport type { DotGridUniforms, DotGridParams, DotGridShape } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs';\nexport type { MetaballsProps } from './shaders/metaballs';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves';\nexport type { WavesProps } from './shaders/waves';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi';\nexport type { VoronoiProps } from './shaders/voronoi';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp';\nexport type { WarpProps } from './shaders/warp';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays';\nexport type { GodRaysProps } from './shaders/god-rays';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral';\nexport type { SpiralProps } from './shaders/spiral';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl';\nexport type { SwirlProps } from './shaders/swirl';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering';\nexport type { DitheringProps } from './shaders/dithering';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient';\nexport type { GrainGradientProps } from './shaders/grain-gradient';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal';\nexport type { LiquidMetalProps } from './shaders/liquid-metal';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border';\nexport type { PulsingBorderProps } from './shaders/pulsing-border';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n  dotOrbitMeta,\n  godRaysMeta,\n  grainGradientMeta,\n  meshGradientMeta,\n  metaballsMeta,\n  pulsingBorderMeta,\n  simplexNoiseMeta,\n  smokeRingMeta,\n  swirlMeta,\n  voronoiMeta,\n  warpMeta,\n} from '@paper-design/shaders';\n"],
-  "mappings": ";;;;;AAAA,SAAS,mBAAmB;AAG5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["export { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';\nexport type { MeshGradientProps } from './shaders/mesh-gradient.js';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';\nexport type { SmokeRingProps } from './shaders/smoke-ring.js';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';\nexport type { DotOrbitProps } from './shaders/dot-orbit.js';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid.js';\nexport type { DotGridProps } from './shaders/dot-grid.js';\nexport type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs.js';\nexport type { MetaballsProps } from './shaders/metaballs.js';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves.js';\nexport type { WavesProps } from './shaders/waves.js';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi.js';\nexport type { VoronoiProps } from './shaders/voronoi.js';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp.js';\nexport type { WarpProps } from './shaders/warp.js';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays.js';\nexport type { GodRaysProps } from './shaders/god-rays.js';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral.js';\nexport type { SpiralProps } from './shaders/spiral.js';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl.js';\nexport type { SwirlProps } from './shaders/swirl.js';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering.js';\nexport type { DitheringProps } from './shaders/dithering.js';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';\nexport type { GrainGradientProps } from './shaders/grain-gradient.js';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';\nexport type { LiquidMetalProps } from './shaders/liquid-metal.js';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';\nexport type { PulsingBorderProps } from './shaders/pulsing-border.js';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';\nexport type { ColorPanelsProps } from './shaders/color-panels.js';\nexport type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n  dotOrbitMeta,\n  godRaysMeta,\n  grainGradientMeta,\n  meshGradientMeta,\n  metaballsMeta,\n  pulsingBorderMeta,\n  simplexNoiseMeta,\n  smokeRingMeta,\n  swirlMeta,\n  voronoiMeta,\n  warpMeta,\n} from '@paper-design/shaders';\n"],
+  "mappings": ";;;;;AAAA,SAAS,mBAAmB;AAG5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/shader-mount.d.ts

@@ -1,4 +1,7 @@
-import { type ShaderMotionParams } from '@paper-design/shaders';
+import { ShaderMount as ShaderMountVanilla, type ShaderMotionParams } from '@paper-design/shaders';
+export interface ShaderMountRef extends HTMLDivElement {
+    paperShaderMount?: ShaderMountVanilla;
+}
 /** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */
 interface ShaderMountUniformsReact {
     [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;

package/dist/shader-mount.js

@@ -8,7 +8,7 @@ import { useEffect, useRef, forwardRef, useState } from "react";
 import {
   ShaderMount as ShaderMountVanilla
 } from "@paper-design/shaders";
-import { useMergeRefs } from "./use-merge-refs";
+import { useMergeRefs } from "./use-merge-refs.js";
 import { jsx } from "react/jsx-runtime";
 async function processUniforms(uniformsProp) {
   const processedUniforms = {};
@@ -107,6 +107,12 @@ const ShaderMount = forwardRef(
     useEffect(() => {
       shaderMountRef.current?.setSpeed(speed);
     }, [speed, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setMaxPixelCount(maxPixelCount);
+    }, [maxPixelCount, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setMinPixelRatio(minPixelRatio);
+    }, [minPixelRatio, isInitialized]);
     useEffect(() => {
       shaderMountRef.current?.setFrame(frame);
     }, [frame, isInitialized]);

package/dist/shader-mount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.tsx"],
-  "sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n  ShaderMount as ShaderMountVanilla,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs';\n\n/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */\ninterface ShaderMountUniformsReact {\n  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color'>, ShaderMotionParams {\n  fragmentShader: string;\n  uniforms: ShaderMountUniformsReact;\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color'> {\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n  const processedUniforms = {} as ShaderMountUniforms;\n  const imageLoadPromises: Promise<void>[] = [];\n\n  const isValidUrl = (url: string): boolean => {\n    try {\n      // Handle absolute paths\n      if (url.startsWith('/')) return true;\n      // Check if it's a valid URL\n      new URL(url);\n      return true;\n    } catch {\n      return false;\n    }\n  };\n\n  const isExternalUrl = (url: string): boolean => {\n    try {\n      if (url.startsWith('/')) return false;\n      const urlObject = new URL(url, window.location.origin);\n      return urlObject.origin !== window.location.origin;\n    } catch {\n      return false;\n    }\n  };\n\n  Object.entries(uniformsProp).forEach(([key, value]) => {\n    if (typeof value === 'string') {\n      // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n      if (!isValidUrl(value)) {\n        console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n        return;\n      }\n\n      const imagePromise = new Promise<void>((resolve, reject) => {\n        const img = new Image();\n        if (isExternalUrl(value)) {\n          img.crossOrigin = 'anonymous';\n        }\n        img.onload = () => {\n          processedUniforms[key] = img;\n          resolve();\n        };\n        img.onerror = () => {\n          console.error(`Could not set uniforms. Failed to load image at ${value}`);\n          reject();\n        };\n        img.src = value;\n      });\n      imageLoadPromises.push(imagePromise);\n    } else {\n      processedUniforms[key] = value;\n    }\n  });\n\n  await Promise.all(imageLoadPromises);\n  return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<HTMLDivElement, ShaderMountProps>(\n  function ShaderMountImpl(\n    {\n      fragmentShader,\n      uniforms: uniformsProp,\n      webGlContextAttributes,\n      speed = 0,\n      frame = 0,\n      minPixelRatio,\n      maxPixelCount,\n      ...divProps\n    },\n    forwardedRef\n  ) {\n    const [isInitialized, setIsInitialized] = useState(false);\n    const divRef = useRef<HTMLDivElement>(null);\n    const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n\n    // Initialize the ShaderMountVanilla\n    useEffect(() => {\n      const initShader = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n\n        if (divRef.current && !shaderMountRef.current) {\n          shaderMountRef.current = new ShaderMountVanilla(\n            divRef.current,\n            fragmentShader,\n            uniforms,\n            webGlContextAttributes,\n            speed,\n            frame,\n            minPixelRatio,\n            maxPixelCount\n          );\n\n          setIsInitialized(true);\n        }\n      };\n\n      initShader();\n\n      return () => {\n        shaderMountRef.current?.dispose();\n        shaderMountRef.current = null;\n      };\n    }, [fragmentShader, webGlContextAttributes]);\n\n    // Uniforms\n    useEffect(() => {\n      const updateUniforms = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n        shaderMountRef.current?.setUniforms(uniforms);\n      };\n\n      updateUniforms();\n    }, [uniformsProp, isInitialized]);\n\n    // Speed\n    useEffect(() => {\n      shaderMountRef.current?.setSpeed(speed);\n    }, [speed, isInitialized]);\n\n    // Frame\n    useEffect(() => {\n      shaderMountRef.current?.setFrame(frame);\n    }, [frame, isInitialized]);\n\n    return <div ref={useMergeRefs([divRef, forwardedRef])} {...divProps} />;\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n  ShaderMount as ShaderMountVanilla,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\nexport interface ShaderMountRef extends HTMLDivElement {\n  paperShaderMount?: ShaderMountVanilla;\n}\n\n/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */\ninterface ShaderMountUniformsReact {\n  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color'>, ShaderMotionParams {\n  fragmentShader: string;\n  uniforms: ShaderMountUniformsReact;\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color'> {\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n  const processedUniforms = {} as ShaderMountUniforms;\n  const imageLoadPromises: Promise<void>[] = [];\n\n  const isValidUrl = (url: string): boolean => {\n    try {\n      // Handle absolute paths\n      if (url.startsWith('/')) return true;\n      // Check if it's a valid URL\n      new URL(url);\n      return true;\n    } catch {\n      return false;\n    }\n  };\n\n  const isExternalUrl = (url: string): boolean => {\n    try {\n      if (url.startsWith('/')) return false;\n      const urlObject = new URL(url, window.location.origin);\n      return urlObject.origin !== window.location.origin;\n    } catch {\n      return false;\n    }\n  };\n\n  Object.entries(uniformsProp).forEach(([key, value]) => {\n    if (typeof value === 'string') {\n      // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n      if (!isValidUrl(value)) {\n        console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n        return;\n      }\n\n      const imagePromise = new Promise<void>((resolve, reject) => {\n        const img = new Image();\n        if (isExternalUrl(value)) {\n          img.crossOrigin = 'anonymous';\n        }\n        img.onload = () => {\n          processedUniforms[key] = img;\n          resolve();\n        };\n        img.onerror = () => {\n          console.error(`Could not set uniforms. Failed to load image at ${value}`);\n          reject();\n        };\n        img.src = value;\n      });\n      imageLoadPromises.push(imagePromise);\n    } else {\n      processedUniforms[key] = value;\n    }\n  });\n\n  await Promise.all(imageLoadPromises);\n  return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<ShaderMountRef, ShaderMountProps>(\n  function ShaderMountImpl(\n    {\n      fragmentShader,\n      uniforms: uniformsProp,\n      webGlContextAttributes,\n      speed = 0,\n      frame = 0,\n      minPixelRatio,\n      maxPixelCount,\n      ...divProps\n    },\n    forwardedRef\n  ) {\n    const [isInitialized, setIsInitialized] = useState(false);\n    const divRef = useRef<HTMLDivElement>(null);\n    const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n\n    // Initialize the ShaderMountVanilla\n    useEffect(() => {\n      const initShader = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n\n        if (divRef.current && !shaderMountRef.current) {\n          shaderMountRef.current = new ShaderMountVanilla(\n            divRef.current,\n            fragmentShader,\n            uniforms,\n            webGlContextAttributes,\n            speed,\n            frame,\n            minPixelRatio,\n            maxPixelCount\n          );\n\n          setIsInitialized(true);\n        }\n      };\n\n      initShader();\n\n      return () => {\n        shaderMountRef.current?.dispose();\n        shaderMountRef.current = null;\n      };\n    }, [fragmentShader, webGlContextAttributes]);\n\n    // Uniforms\n    useEffect(() => {\n      const updateUniforms = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n        shaderMountRef.current?.setUniforms(uniforms);\n      };\n\n      updateUniforms();\n    }, [uniformsProp, isInitialized]);\n\n    // Speed\n    useEffect(() => {\n      shaderMountRef.current?.setSpeed(speed);\n    }, [speed, isInitialized]);\n\n    // Max Pixel Count\n    useEffect(() => {\n      shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n    }, [maxPixelCount, isInitialized]);\n\n    // Min Pixel Ratio\n    useEffect(() => {\n      shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n    }, [minPixelRatio, isInitialized]);\n\n    // Frame\n    useEffect(() => {\n      shaderMountRef.current?.setFrame(frame);\n    }, [frame, isInitialized]);\n\n    return <div ref={useMergeRefs([divRef, forwardedRef])} {...divProps} />;\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,9 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type ColorPanelsParams, type ShaderPreset } from '@paper-design/shaders';
+export interface ColorPanelsProps extends ShaderComponentProps, ColorPanelsParams {
+}
+type ColorPanelsPreset = ShaderPreset<ColorPanelsParams>;
+export declare const defaultPreset: ColorPanelsPreset;
+export declare const colorPanelsPresets: ColorPanelsPreset[];
+export declare const ColorPanels: React.FC<ColorPanelsProps>;
+export {};

package/dist/shaders/color-panels.js

@@ -0,0 +1,107 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import {
+  getShaderColorFromString,
+  colorPanelsFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colors: [
+      "hsla(15, 100%, 50%, 1)",
+      "hsla(170, 100%, 50%, 1)",
+      "hsla(260, 100%, 50%, 1)",
+      "hsla(65, 100%, 50%, 1)",
+      "hsla(280, 100%, 50%, 1)"
+    ],
+    colorBack: "hsla(0, 0%, 3%, 1)",
+    angle1: 0.1,
+    angle2: 0.1,
+    length: 1,
+    blur: 0.25,
+    fadeIn: 0.85,
+    fadeOut: 0.3,
+    gradient: 0,
+    density: 2
+  }
+};
+const colorPanelsPresets = [defaultPreset];
+const ColorPanels = memo(function ColorPanelsImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  colorBack = defaultPreset.params.colorBack,
+  angle1 = defaultPreset.params.angle1,
+  angle2 = defaultPreset.params.angle2,
+  length = defaultPreset.params.length,
+  blur = defaultPreset.params.blur,
+  fadeIn = defaultPreset.params.fadeIn,
+  fadeOut = defaultPreset.params.fadeOut,
+  density = defaultPreset.params.density,
+  gradient = defaultPreset.params.gradient,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_angle1: angle1,
+    u_angle2: angle2,
+    u_length: length,
+    u_blur: blur,
+    u_fadeIn: fadeIn,
+    u_fadeOut: fadeOut,
+    u_density: density,
+    u_gradient: gradient,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: colorPanelsFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  ColorPanels,
+  colorPanelsPresets,
+  defaultPreset
+};
+//# sourceMappingURL=color-panels.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/color-panels.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  getShaderColorFromString,\n  colorPanelsFragmentShader,\n  ShaderFitOptions,\n  type ColorPanelsUniforms,\n  type ColorPanelsParams,\n  type ShaderPreset,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface ColorPanelsProps extends ShaderComponentProps, ColorPanelsParams {}\n\ntype ColorPanelsPreset = ShaderPreset<ColorPanelsParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport const defaultPreset: ColorPanelsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: [\n      'hsla(15, 100%, 50%, 1)',\n      'hsla(170, 100%, 50%, 1)',\n      'hsla(260, 100%, 50%, 1)',\n      'hsla(65, 100%, 50%, 1)',\n      'hsla(280, 100%, 50%, 1)',\n    ],\n    colorBack: 'hsla(0, 0%, 3%, 1)',\n    angle1: 0.1,\n    angle2: 0.1,\n    length: 1,\n    blur: 0.25,\n    fadeIn: 0.85,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 2,\n  },\n};\n\nexport const colorPanelsPresets: ColorPanelsPreset[] = [defaultPreset];\n\nexport const ColorPanels: React.FC<ColorPanelsProps> = memo(function ColorPanelsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  colorBack = defaultPreset.params.colorBack,\n  angle1 = defaultPreset.params.angle1,\n  angle2 = defaultPreset.params.angle2,\n  length = defaultPreset.params.length,\n  blur = defaultPreset.params.blur,\n  fadeIn = defaultPreset.params.fadeIn,\n  fadeOut = defaultPreset.params.fadeOut,\n  density = defaultPreset.params.density,\n  gradient = defaultPreset.params.gradient,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: ColorPanelsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_angle1: angle1,\n    u_angle2: angle2,\n    u_length: length,\n    u_blur: blur,\n    u_fadeIn: fadeIn,\n    u_fadeOut: fadeOut,\n    u_density: density,\n    u_gradient: gradient,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies ColorPanelsUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={colorPanelsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AA2FH;AAjFG,MAAM,gBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,qBAA0C,CAAC,aAAa;AAE9D,MAAM,cAA0C,KAAK,SAAS,gBAAgB;AAAA;AAAA,EAEnF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,SAAS,cAAc,OAAO;AAAA,EAC9B,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,SAAS,cAAc,OAAO;AAAA,EAC9B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAqB;AACnB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA;AAAA,IAGZ,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
+  "names": []
+}

package/dist/shaders/dithering.d.ts

@@ -1,4 +1,4 @@
-import { type ShaderComponentProps } from '../shader-mount';
+import { type ShaderComponentProps } from '../shader-mount.js';
 import { type DitheringParams, type ShaderPreset } from '@paper-design/shaders';
 export interface DitheringProps extends ShaderComponentProps, DitheringParams {
 }

package/dist/shaders/dithering.js

@@ -4,14 +4,16 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { memo } from "react";
-import { ShaderMount } from "../shader-mount";
+import { ShaderMount } from "../shader-mount.js";
 import {
   getShaderColorFromString,
   ditheringFragmentShader,
   ShaderFitOptions,
   defaultPatternSizing,
-  defaultObjectSizing
+  defaultObjectSizing,
+  DitheringTypes
 } from "@paper-design/shaders";
+import { DitheringShapes } from "@paper-design/shaders";
 import { jsx } from "react/jsx-runtime";
 const defaultPreset = {
   name: "Default",
@@ -19,12 +21,11 @@ const defaultPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    color1: "hsla(240, 14%, 17%, 1)",
-    color2: "hsla(34, 26%, 61%, 1)",
-    shape: 1,
-    type: 3,
-    pxSize: 2,
-    pxRounded: true
+    colorBack: "#252531",
+    colorFront: "#b59f82",
+    shape: "simplex",
+    type: "4x4",
+    pxSize: 2
   }
 };
 const warpPreset = {
@@ -33,12 +34,11 @@ const warpPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    color1: "hsla(195, 47%, 35%, 1)",
-    color2: "hsla(171, 26%, 89%, 1)",
-    shape: 2,
-    type: 3,
-    pxSize: 2,
-    pxRounded: true
+    colorBack: "#2f6e83",
+    colorFront: "#dceae8",
+    shape: "warp",
+    type: "4x4",
+    pxSize: 2
   }
 };
 const sinePreset = {
@@ -47,12 +47,11 @@ const sinePreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    color1: "hsla(318, 80%, 25%, 1)",
-    color2: "hsla(184, 100%, 40%, 1)",
-    shape: 4,
-    type: 4,
-    pxSize: 11,
-    pxRounded: true
+    colorBack: "#730d54",
+    colorFront: "#00becc",
+    shape: "wave",
+    type: "4x4",
+    pxSize: 11
   }
 };
 const bugsPreset = {
@@ -61,12 +60,11 @@ const bugsPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    color1: "hsla(0, 0%, 0%, 1)",
-    color2: "hsla(120, 100%, 25%, 1)",
-    shape: 3,
-    type: 1,
-    pxSize: 9,
-    pxRounded: true
+    colorBack: "#000000",
+    colorFront: "#008000",
+    shape: "dots",
+    type: "random",
+    pxSize: 9
   }
 };
 const ripplePreset = {
@@ -75,12 +73,11 @@ const ripplePreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    color1: "hsla(20, 50%, 25%, 1)",
-    color2: "hsla(20, 50%, 55%, 1)",
-    shape: 5,
-    type: 2,
-    pxSize: 3,
-    pxRounded: false
+    colorBack: "#603520",
+    colorFront: "#c67953",
+    shape: "ripple",
+    type: "2x2",
+    pxSize: 3
   }
 };
 const swirlPreset = {
@@ -89,28 +86,24 @@ const swirlPreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    color1: "hsla(0, 0%, 0%, 1)",
-    color2: "hsla(200, 26%, 20%, 1)",
-    shape: 6,
-    type: 4,
-    pxSize: 2,
-    pxRounded: false
+    colorBack: "#000000",
+    colorFront: "#263740",
+    shape: "swirl",
+    type: "8x8",
+    pxSize: 2
   }
 };
 const spherePreset = {
   name: "Sphere",
   params: {
     ...defaultObjectSizing,
-    offsetX: -0.5,
-    offsetY: 0.23,
     speed: 1,
     frame: 0,
-    color1: "hsla(320, 26%, 15%, 1)",
-    color2: "hsla(135, 30%, 30%, 1)",
-    shape: 7,
-    type: 3,
-    pxSize: 2.5,
-    pxRounded: true
+    colorBack: "#301c2a",
+    colorFront: "#366341",
+    shape: "sphere",
+    type: "4x4",
+    pxSize: 2.5
   }
 };
 const ditheringPresets = [
@@ -126,12 +119,11 @@ const Dithering = memo(function DitheringImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
-  color1 = defaultPreset.params.color1,
-  color2 = defaultPreset.params.color2,
+  colorBack = defaultPreset.params.colorBack,
+  colorFront = defaultPreset.params.colorFront,
   shape = defaultPreset.params.shape,
   type = defaultPreset.params.type,
   pxSize = defaultPreset.params.pxSize,
-  pxRounded = defaultPreset.params.pxRounded,
   // Sizing props
   fit = defaultPreset.params.fit,
   scale = defaultPreset.params.scale,
@@ -146,12 +138,11 @@ const Dithering = memo(function DitheringImpl({
 }) {
   const uniforms = {
     // Own uniforms
-    u_color1: getShaderColorFromString(color1),
-    u_color2: getShaderColorFromString(color2),
-    u_shape: shape,
-    u_type: type,
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorFront: getShaderColorFromString(colorFront),
+    u_shape: DitheringShapes[shape],
+    u_type: DitheringTypes[type],
     u_pxSize: pxSize,
-    u_pxRounded: pxRounded,
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
     u_scale: scale,