@paper-design/shaders-react 0.0.44 → 0.0.46

package/README.md

@@ -25,4 +25,5 @@ import { MeshGradient, DotOrbit } from '@paper-design/shaders-react';
 ```
 
 ## Release notes
-[View changelog →](./../../CHANGELOG.md)
+
+[View changelog →](https://github.com/paper-design/shaders/blob/main/CHANGELOG.md)

package/dist/index.d.ts

@@ -63,6 +63,18 @@ export type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@pape
 export { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';
 export type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';
 export type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';
+export { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';
+export type { PaperTextureProps } from './shaders/paper-texture.js';
+export type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';
+export { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';
+export { type FlutedGlassProps } from './shaders/fluted-glass.js';
+export { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';
+export { Water, waterPresets } from './shaders/water.js';
+export type { WaterProps } from './shaders/water.js';
+export type { WaterUniforms, WaterParams } from '@paper-design/shaders';
+export { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';
+export type { ImageDitheringProps } from './shaders/image-dithering.js';
+export type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';
 export { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';
 export type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';
 export { colorPanelsMeta, dotOrbitMeta, godRaysMeta, grainGradientMeta, meshGradientMeta, metaballsMeta, pulsingBorderMeta, simplexNoiseMeta, smokeRingMeta, swirlMeta, voronoiMeta, warpMeta, staticMeshGradientMeta, staticRadialGradientMeta, } from '@paper-design/shaders';

package/dist/index.js

@@ -3,6 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
+"use client";
 import { ShaderMount } from "./shader-mount.js";
 import { MeshGradient, meshGradientPresets } from "./shaders/mesh-gradient.js";
 import { SmokeRing, smokeRingPresets } from "./shaders/smoke-ring.js";
@@ -25,6 +26,12 @@ import { PulsingBorder, pulsingBorderPresets } from "./shaders/pulsing-border.js
 import { ColorPanels, colorPanelsPresets } from "./shaders/color-panels.js";
 import { StaticMeshGradient, staticMeshGradientPresets } from "./shaders/static-mesh-gradient.js";
 import { StaticRadialGradient, staticRadialGradientPresets } from "./shaders/static-radial-gradient.js";
+import { PaperTexture, paperTexturePresets } from "./shaders/paper-texture.js";
+import { FlutedGlass, flutedGlassPresets } from "./shaders/fluted-glass.js";
+import {} from "./shaders/fluted-glass.js";
+import {} from "@paper-design/shaders";
+import { Water, waterPresets } from "./shaders/water.js";
+import { ImageDithering, imageDitheringPresets } from "./shaders/image-dithering.js";
 import { isPaperShaderElement, getShaderColorFromString } from "@paper-design/shaders";
 import {
   colorPanelsMeta,
@@ -47,12 +54,15 @@ export {
   Dithering,
   DotGrid,
   DotOrbit,
+  FlutedGlass,
   GodRays,
   GrainGradient,
+  ImageDithering,
   LiquidMetal,
   MeshGradient,
   Metaballs,
   NeuroNoise,
+  PaperTexture,
   PerlinNoise,
   PulsingBorder,
   ShaderMount,
@@ -64,6 +74,7 @@ export {
   Swirl,
   Voronoi,
   Warp,
+  Water,
   Waves,
   colorPanelsMeta,
   colorPanelsPresets,
@@ -71,11 +82,13 @@ export {
   dotGridPresets,
   dotOrbitMeta,
   dotOrbitPresets,
+  flutedGlassPresets,
   getShaderColorFromString,
   godRaysMeta,
   godRaysPresets,
   grainGradientMeta,
   grainGradientPresets,
+  imageDitheringPresets,
   isPaperShaderElement,
   liquidMetalPresets,
   meshGradientMeta,
@@ -83,6 +96,7 @@ export {
   metaballsMeta,
   metaballsPresets,
   neuroNoisePresets,
+  paperTexturePresets,
   perlinNoisePresets,
   pulsingBorderMeta,
   pulsingBorderPresets,
@@ -101,6 +115,7 @@ export {
   voronoiPresets,
   warpMeta,
   warpPresets,
+  waterPresets,
   wavesPresets
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "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 { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n  colorPanelsMeta,\n  dotOrbitMeta,\n  godRaysMeta,\n  grainGradientMeta,\n  meshGradientMeta,\n  metaballsMeta,\n  pulsingBorderMeta,\n  simplexNoiseMeta,\n  smokeRingMeta,\n  swirlMeta,\n  voronoiMeta,\n  warpMeta,\n  staticMeshGradientMeta,\n  staticRadialGradientMeta,\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,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,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,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["'use client';\n\nexport { 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 { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';\nexport type { PaperTextureProps } from './shaders/paper-texture.js';\nexport type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';\n\nexport { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';\nexport { type FlutedGlassProps } from './shaders/fluted-glass.js';\nexport { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';\n\nexport { Water, waterPresets } from './shaders/water.js';\nexport type { WaterProps } from './shaders/water.js';\nexport type { WaterUniforms, WaterParams } from '@paper-design/shaders';\n\nexport { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';\nexport type { ImageDitheringProps } from './shaders/image-dithering.js';\nexport type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n  colorPanelsMeta,\n  dotOrbitMeta,\n  godRaysMeta,\n  grainGradientMeta,\n  meshGradientMeta,\n  metaballsMeta,\n  pulsingBorderMeta,\n  simplexNoiseMeta,\n  smokeRingMeta,\n  swirlMeta,\n  voronoiMeta,\n  warpMeta,\n  staticMeshGradientMeta,\n  staticRadialGradientMeta,\n} from '@paper-design/shaders';\n"],
+  "mappings": ";;;;;;AAEA,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,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,SAAS,cAAc,2BAA2B;AAIlD,SAAS,aAAa,0BAA0B;AAChD,eAAsC;AACtC,eAAiE;AAEjE,SAAS,OAAO,oBAAoB;AAIpC,SAAS,gBAAgB,6BAA6B;AAItD,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,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/shader-mount.d.ts

@@ -1,7 +1,12 @@
 import { type PaperShaderElement, type ShaderMotionParams } from '@paper-design/shaders';
-/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */
+/**
+ * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images
+ *
+ * We accept undefined as a convenience for server rendering, when some things may be undefined
+ * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
+ */
 interface ShaderMountUniformsReact {
-    [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;
+    [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;
 }
 export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {
     ref?: React.Ref<PaperShaderElement>;

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 PaperShaderElement,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\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' | 'ref'>, ShaderMotionParams {\n  ref?: React.Ref<PaperShaderElement>;\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' | 'ref'> {\n  ref?: React.Ref<PaperShaderElement>;\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<PaperShaderElement, 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<PaperShaderElement>(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    const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n    return <div ref={mergedRef} {...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 PaperShaderElement,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\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 */\ninterface ShaderMountUniformsReact {\n  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n  ref?: React.Ref<PaperShaderElement>;\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' | 'ref'> {\n  ref?: React.Ref<PaperShaderElement>;\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<PaperShaderElement, 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<PaperShaderElement>(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    const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n    return <div ref={mergedRef} {...divProps} />;\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/color-panels.js

@@ -17,19 +17,19 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultObjectSizing,
-    speed: 1,
+    speed: 0.5,
     frame: 0,
-    colors: ["#ff4000", "#00ffd4", "#5500ff", "#eaff00", "#aa00ff"],
+    colors: ["#ff9d00", "#fd4f30", "#809bff", "#6d2eff", "#333aff", "#f15cff", "#ffd557"],
     colorBack: "#080808",
-    angle1: 0.1,
-    angle2: 0.1,
-    length: 1,
-    edges: false,
-    blur: 0.25,
-    fadeIn: 0.85,
+    angle1: 0,
+    angle2: 0,
+    length: 1.1,
+    edges: true,
+    blur: 0,
+    fadeIn: 1,
     fadeOut: 0.3,
     gradient: 0,
-    density: 2
+    density: 3
   }
 };
 const glassPreset = {

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

@@ -1,7 +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\nexport const defaultPreset: ColorPanelsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#ff4000', '#00ffd4', '#5500ff', '#eaff00', '#aa00ff'],\n    colorBack: '#080808',\n    angle1: 0.1,\n    angle2: 0.1,\n    length: 1,\n    edges: false,\n    blur: 0.25,\n    fadeIn: 0.85,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 2,\n  },\n};\n\nexport const glassPreset: ColorPanelsPreset = {\n  name: 'Glass',\n  params: {\n    ...defaultObjectSizing,\n    rotation: 112,\n    speed: 1,\n    frame: 0,\n    colors: ['#00cfff', '#ff2d55', '#34c759', '#af52de'],\n    colorBack: '#ffffff',\n    angle1: 0.3,\n    angle2: 0.3,\n    length: 1,\n    edges: true,\n    blur: 0.25,\n    fadeIn: 0.85,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 1.6,\n  },\n};\n\nexport const gradientPreset: ColorPanelsPreset = {\n  name: 'Gradient',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#f2ff00', '#00000000', '#00000000', '#5a0283', '#005eff'],\n    colorBack: '#8ffff2',\n    angle1: 0.4,\n    angle2: 0.4,\n    length: 3,\n    edges: false,\n    blur: 0.5,\n    fadeIn: 1.0,\n    fadeOut: 0.39,\n    gradient: 0.78,\n    density: 1.65,\n    scale: 1.72,\n    rotation: 270,\n    offsetX: 0.18,\n  },\n};\n\nexport const openingPreset: ColorPanelsPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    speed: 2.0,\n    frame: 0,\n    colors: ['#00ffff'],\n    colorBack: '#570044',\n    angle1: -1.0,\n    angle2: -1.0,\n    length: 0.52,\n    edges: false,\n    blur: 0.0,\n    fadeIn: 0.0,\n    fadeOut: 1.0,\n    gradient: 0.0,\n    density: 2.21,\n    scale: 2.32,\n    rotation: 360,\n    offsetX: -0.3,\n    offsetY: 0.6,\n  },\n};\n\nexport const colorPanelsPresets: ColorPanelsPreset[] = [defaultPreset, glassPreset, gradientPreset, openingPreset];\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  edges = defaultPreset.params.edges,\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_edges: edges,\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": "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",
+  "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\nexport const defaultPreset: ColorPanelsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#ff9d00', '#fd4f30', '#809bff', '#6d2eff', '#333aff', '#f15cff', '#ffd557'],\n    colorBack: '#080808',\n    angle1: 0,\n    angle2: 0,\n    length: 1.1,\n    edges: true,\n    blur: 0,\n    fadeIn: 1,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 3,\n  },\n};\n\nexport const glassPreset: ColorPanelsPreset = {\n  name: 'Glass',\n  params: {\n    ...defaultObjectSizing,\n    rotation: 112,\n    speed: 1,\n    frame: 0,\n    colors: ['#00cfff', '#ff2d55', '#34c759', '#af52de'],\n    colorBack: '#ffffff',\n    angle1: 0.3,\n    angle2: 0.3,\n    length: 1,\n    edges: true,\n    blur: 0.25,\n    fadeIn: 0.85,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 1.6,\n  },\n};\n\nexport const gradientPreset: ColorPanelsPreset = {\n  name: 'Gradient',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#f2ff00', '#00000000', '#00000000', '#5a0283', '#005eff'],\n    colorBack: '#8ffff2',\n    angle1: 0.4,\n    angle2: 0.4,\n    length: 3,\n    edges: false,\n    blur: 0.5,\n    fadeIn: 1.0,\n    fadeOut: 0.39,\n    gradient: 0.78,\n    density: 1.65,\n    scale: 1.72,\n    rotation: 270,\n    offsetX: 0.18,\n  },\n};\n\nexport const openingPreset: ColorPanelsPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    speed: 2.0,\n    frame: 0,\n    colors: ['#00ffff'],\n    colorBack: '#570044',\n    angle1: -1.0,\n    angle2: -1.0,\n    length: 0.52,\n    edges: false,\n    blur: 0.0,\n    fadeIn: 0.0,\n    fadeOut: 1.0,\n    gradient: 0.0,\n    density: 2.21,\n    scale: 2.32,\n    rotation: 360,\n    offsetX: -0.3,\n    offsetY: 0.6,\n  },\n};\n\nexport const colorPanelsPresets: ColorPanelsPreset[] = [defaultPreset, glassPreset, gradientPreset, openingPreset];\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  edges = defaultPreset.params.edges,\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_edges: edges,\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": "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",
   "names": []
 }

package/dist/shaders/dithering.d.ts

@@ -8,7 +8,7 @@ export declare const sinePreset: DitheringPreset;
 export declare const bugsPreset: DitheringPreset;
 export declare const ripplePreset: DitheringPreset;
 export declare const swirlPreset: DitheringPreset;
-export declare const spherePreset: DitheringPreset;
+export declare const warpPreset: DitheringPreset;
 export declare const ditheringPresets: DitheringPreset[];
 export declare const Dithering: React.FC<DitheringProps>;
 export {};

package/dist/shaders/dithering.js

@@ -21,9 +21,9 @@ const defaultPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    colorBack: "#2f6e83",
-    colorFront: "#dceae8",
-    shape: "warp",
+    colorBack: "#000000",
+    colorFront: "#00b2ff",
+    shape: "sphere",
     type: "4x4",
     pxSize: 2
   }
@@ -81,22 +81,22 @@ const swirlPreset = {
     pxSize: 2
   }
 };
-const spherePreset = {
-  name: "Sphere",
+const warpPreset = {
+  name: "Warp",
   params: {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
     colorBack: "#301c2a",
     colorFront: "#56ae6c",
-    shape: "sphere",
+    shape: "warp",
     type: "4x4",
     pxSize: 2.5
   }
 };
 const ditheringPresets = [
   defaultPreset,
-  spherePreset,
+  warpPreset,
   sinePreset,
   ripplePreset,
   bugsPreset,
@@ -150,7 +150,7 @@ export {
   ditheringPresets,
   ripplePreset,
   sinePreset,
-  spherePreset,
-  swirlPreset
+  swirlPreset,
+  warpPreset
 };
 //# sourceMappingURL=dithering.js.map

package/dist/shaders/dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dithering.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  ditheringFragmentShader,\n  ShaderFitOptions,\n  type DitheringUniforms,\n  type DitheringParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#2f6e83',\n    colorFront: '#dceae8',\n    shape: 'warp',\n    type: '4x4',\n    pxSize: 2,\n  },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n  name: 'Sine Wave',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#730d54',\n    colorFront: '#00becc',\n    shape: 'wave',\n    type: '4x4',\n    pxSize: 11,\n    scale: 1.2,\n  },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n  name: 'Bugs',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#008000',\n    shape: 'dots',\n    type: 'random',\n    pxSize: 9,\n  },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#603520',\n    colorFront: '#c67953',\n    shape: 'ripple',\n    type: '2x2',\n    pxSize: 3,\n  },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#89a7b8',\n    shape: 'swirl',\n    type: '8x8',\n    pxSize: 2,\n  },\n} as const;\n\nexport const spherePreset: DitheringPreset = {\n  name: 'Sphere',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#301c2a',\n    colorFront: '#56ae6c',\n    shape: 'sphere',\n    type: '4x4',\n    pxSize: 2.5,\n  },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n  defaultPreset,\n  spherePreset,\n  sinePreset,\n  ripplePreset,\n  bugsPreset,\n  swirlPreset,\n];\n\nexport const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorFront = defaultPreset.params.colorFront,\n  shape = defaultPreset.params.shape,\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.pxSize,\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}) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_shape: DitheringShapes[shape],\n    u_type: DitheringTypes[type],\n    u_pxSize: pxSize,\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 DitheringUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  ditheringFragmentShader,\n  ShaderFitOptions,\n  type DitheringUniforms,\n  type DitheringParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#00b2ff',\n    shape: 'sphere',\n    type: '4x4',\n    pxSize: 2,\n  },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n  name: 'Sine Wave',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#730d54',\n    colorFront: '#00becc',\n    shape: 'wave',\n    type: '4x4',\n    pxSize: 11,\n    scale: 1.2,\n  },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n  name: 'Bugs',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#008000',\n    shape: 'dots',\n    type: 'random',\n    pxSize: 9,\n  },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#603520',\n    colorFront: '#c67953',\n    shape: 'ripple',\n    type: '2x2',\n    pxSize: 3,\n  },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#89a7b8',\n    shape: 'swirl',\n    type: '8x8',\n    pxSize: 2,\n  },\n} as const;\n\nexport const warpPreset: DitheringPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#301c2a',\n    colorFront: '#56ae6c',\n    shape: 'warp',\n    type: '4x4',\n    pxSize: 2.5,\n  },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n  defaultPreset,\n  warpPreset,\n  sinePreset,\n  ripplePreset,\n  bugsPreset,\n  swirlPreset,\n];\n\nexport const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorFront = defaultPreset.params.colorFront,\n  shape = defaultPreset.params.shape,\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.pxSize,\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}) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_shape: DitheringShapes[shape],\n    u_type: DitheringTypes[type],\n    u_pxSize: pxSize,\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 DitheringUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/dot-grid.js

@@ -18,15 +18,15 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultPatternSizing,
-    colorBack: "#15212d",
-    colorFill: "#5794ff",
-    colorStroke: "#0000ff",
-    size: 3,
-    gapX: 25,
-    gapY: 25,
+    colorBack: "#000000",
+    colorFill: "#ffffff",
+    colorStroke: "#ffaa00",
+    size: 2,
+    gapX: 32,
+    gapY: 32,
     strokeWidth: 0,
-    sizeRange: 0.25,
-    opacityRange: 0.9,
+    sizeRange: 0,
+    opacityRange: 0,
     shape: "circle"
   }
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-grid.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  dotGridFragmentShader,\n  DotGridShapes,\n  ShaderFitOptions,\n  type DotGridParams,\n  type DotGridUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotGridProps extends ShaderComponentProps, DotGridParams {}\n\ntype DotGridPreset = ShaderPreset<DotGridParams>;\n\nexport const defaultPreset: DotGridPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#15212d',\n    colorFill: '#5794ff',\n    colorStroke: '#0000ff',\n    size: 3,\n    gapX: 25,\n    gapY: 25,\n    strokeWidth: 0,\n    sizeRange: 0.25,\n    opacityRange: 0.9,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ffffff',\n    colorStroke: '#808080',\n    size: 5,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'triangle',\n  },\n};\n\nconst treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#f4fce7',\n    colorFill: '#052e19',\n    colorStroke: '#000000',\n    size: 8,\n    gapX: 20,\n    gapY: 90,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0.6,\n    shape: 'circle',\n  },\n};\n\nconst wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#204030',\n    colorFill: '#000000',\n    colorStroke: '#bd955b',\n    size: 9,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];\n\nexport const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorFill = defaultPreset.params.colorFill,\n  colorStroke = defaultPreset.params.colorStroke,\n  size = defaultPreset.params.size,\n  gapX = defaultPreset.params.gapX,\n  gapY = defaultPreset.params.gapY,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  sizeRange = defaultPreset.params.sizeRange,\n  opacityRange = defaultPreset.params.opacityRange,\n  shape = defaultPreset.params.shape,\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\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: DotGridProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFill: getShaderColorFromString(colorFill),\n    u_colorStroke: getShaderColorFromString(colorStroke),\n    u_dotSize: size,\n    u_gapX: gapX,\n    u_gapY: gapY,\n    u_strokeWidth: strokeWidth,\n    u_sizeRange: sizeRange,\n    u_opacityRange: opacityRange,\n    u_shape: DotGridShapes[shape],\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 DotGridUniforms;\n\n  return (\n    <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "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  dotGridFragmentShader,\n  DotGridShapes,\n  ShaderFitOptions,\n  type DotGridParams,\n  type DotGridUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotGridProps extends ShaderComponentProps, DotGridParams {}\n\ntype DotGridPreset = ShaderPreset<DotGridParams>;\n\nexport const defaultPreset: DotGridPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#000000',\n    colorFill: '#ffffff',\n    colorStroke: '#ffaa00',\n    size: 2,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ffffff',\n    colorStroke: '#808080',\n    size: 5,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'triangle',\n  },\n};\n\nconst treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#f4fce7',\n    colorFill: '#052e19',\n    colorStroke: '#000000',\n    size: 8,\n    gapX: 20,\n    gapY: 90,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0.6,\n    shape: 'circle',\n  },\n};\n\nconst wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#204030',\n    colorFill: '#000000',\n    colorStroke: '#bd955b',\n    size: 9,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];\n\nexport const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorFill = defaultPreset.params.colorFill,\n  colorStroke = defaultPreset.params.colorStroke,\n  size = defaultPreset.params.size,\n  gapX = defaultPreset.params.gapX,\n  gapY = defaultPreset.params.gapY,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  sizeRange = defaultPreset.params.sizeRange,\n  opacityRange = defaultPreset.params.opacityRange,\n  shape = defaultPreset.params.shape,\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\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: DotGridProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFill: getShaderColorFromString(colorFill),\n    u_colorStroke: getShaderColorFromString(colorStroke),\n    u_dotSize: size,\n    u_gapX: gapX,\n    u_gapY: gapY,\n    u_strokeWidth: strokeWidth,\n    u_sizeRange: sizeRange,\n    u_opacityRange: opacityRange,\n    u_shape: DotGridShapes[shape],\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 DotGridUniforms;\n\n  return (\n    <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
   "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAkIH;AA5HG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,kBAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,iBAAgC;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,kBAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,iBAAiB,gBAAgB,eAAe;AAExG,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,cAAc,cAAc,OAAO;AAAA,EACnC,OAAO,cAAc,OAAO;AAAA,EAC5B,OAAO,cAAc,OAAO;AAAA,EAC5B,OAAO,cAAc,OAAO;AAAA,EAC5B,cAAc,cAAc,OAAO;AAAA,EACnC,YAAY,cAAc,OAAO;AAAA,EACjC,eAAe,cAAc,OAAO;AAAA,EACpC,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,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;AAAA,EAGnC,gBAAgB,OAAO;AAAA;AAAA,EACvB,GAAG;AACL,GAAiB;AACf,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,aAAa,yBAAyB,SAAS;AAAA,IAC/C,eAAe,yBAAyB,WAAW;AAAA,IACnD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS,cAAc,KAAK;AAAA;AAAA,IAG5B,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,oBAAC,eAAa,GAAG,OAAO,eAA8B,gBAAgB,uBAAuB,UAAoB;AAErH,GAAG,kBAAkB;",
   "names": []
 }

package/dist/shaders/dot-orbit.js

@@ -8,6 +8,7 @@ import { ShaderMount } from "../shader-mount.js";
 import { colorPropsAreEqual } from "../color-props-are-equal.js";
 import {
   getShaderColorFromString,
+  getShaderNoiseTexture,
   dotOrbitFragmentShader,
   ShaderFitOptions,
   defaultPatternSizing
@@ -20,11 +21,11 @@ const defaultPreset = {
     speed: 2,
     frame: 0,
     colorBack: "#000000",
-    colors: ["#D2822D", "#0C3D80", "#B41A57", "#37A166"],
-    size: 0.9,
+    colors: ["#ff6f00", "#610000", "#0f0000", "#ffdfa8"],
+    size: 1,
     sizeRange: 0,
     spreading: 1,
-    stepsPerColor: 2
+    stepsPerColor: 4
   }
 };
 const shinePreset = {
@@ -104,6 +105,7 @@ const DotOrbit = memo(function DotOrbitImpl({
     u_sizeRange: sizeRange,
     u_spreading: spreading,
     u_stepsPerColor: stepsPerColor,
+    u_noiseTexture: getShaderNoiseTexture(),
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
     u_scale: scale,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-orbit.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  dotOrbitFragmentShader,\n  ShaderFitOptions,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#D2822D', '#0C3D80', '#B41A57', '#37A166'],\n    size: 0.9,\n    sizeRange: 0,\n    spreading: 1,\n    stepsPerColor: 2,\n  },\n};\n\nexport const shinePreset: DotOrbitPreset = {\n  name: 'Shine',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.1,\n    frame: 0,\n    colors: ['#ffffff', '#006aff', '#fff675'],\n    colorBack: '#000000',\n    stepsPerColor: 4,\n    size: 0.3,\n    sizeRange: 0.2,\n    spreading: 1,\n    scale: 0.4,\n  },\n};\n\nexport const bubblesPreset: DotOrbitPreset = {\n  name: 'Bubbles',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.4,\n    frame: 0,\n    colors: ['#29b9e0'],\n    colorBack: '#009494',\n    stepsPerColor: 2,\n    size: 0.9,\n    sizeRange: 0.7,\n    spreading: 1.0,\n    scale: 1.64,\n  },\n};\n\nexport const hallucinatoryPreset: DotOrbitPreset = {\n  name: 'Hallucinatory',\n  params: {\n    ...defaultPatternSizing,\n    speed: 5,\n    frame: 0,\n    colors: ['#000000'],\n    colorBack: '#ffe500',\n    stepsPerColor: 2,\n    size: 0.65,\n    sizeRange: 0,\n    spreading: 0.3,\n    scale: 0.5,\n  },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  size = defaultPreset.params.size,\n  sizeRange = defaultPreset.params.sizeRange,\n  spreading = defaultPreset.params.spreading,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\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}: DotOrbitProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_size: size,\n    u_sizeRange: sizeRange,\n    u_spreading: spreading,\n    u_stepsPerColor: stepsPerColor,\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 DotOrbitUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\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;AAqHH;AA/GG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,cAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,kBAAoC,CAAC,eAAe,eAAe,aAAa,mBAAmB;AAEzG,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA;AAAA,EAGrC,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,GAAkB;AAChB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,IAGjB,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,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,wBAAwB,UAAoB;AAEpH,GAAG,kBAAkB;",
+  "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  getShaderNoiseTexture,\n  dotOrbitFragmentShader,\n  ShaderFitOptions,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#ff6f00', '#610000', '#0f0000', '#ffdfa8'],\n    size: 1,\n    sizeRange: 0,\n    spreading: 1,\n    stepsPerColor: 4,\n  },\n};\n\nexport const shinePreset: DotOrbitPreset = {\n  name: 'Shine',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.1,\n    frame: 0,\n    colors: ['#ffffff', '#006aff', '#fff675'],\n    colorBack: '#000000',\n    stepsPerColor: 4,\n    size: 0.3,\n    sizeRange: 0.2,\n    spreading: 1,\n    scale: 0.4,\n  },\n};\n\nexport const bubblesPreset: DotOrbitPreset = {\n  name: 'Bubbles',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.4,\n    frame: 0,\n    colors: ['#29b9e0'],\n    colorBack: '#009494',\n    stepsPerColor: 2,\n    size: 0.9,\n    sizeRange: 0.7,\n    spreading: 1.0,\n    scale: 1.64,\n  },\n};\n\nexport const hallucinatoryPreset: DotOrbitPreset = {\n  name: 'Hallucinatory',\n  params: {\n    ...defaultPatternSizing,\n    speed: 5,\n    frame: 0,\n    colors: ['#000000'],\n    colorBack: '#ffe500',\n    stepsPerColor: 2,\n    size: 0.65,\n    sizeRange: 0,\n    spreading: 0.3,\n    scale: 0.5,\n  },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  size = defaultPreset.params.size,\n  sizeRange = defaultPreset.params.sizeRange,\n  spreading = defaultPreset.params.spreading,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\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}: DotOrbitProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_size: size,\n    u_sizeRange: sizeRange,\n    u_spreading: spreading,\n    u_stepsPerColor: stepsPerColor,\n    u_noiseTexture: getShaderNoiseTexture(),\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 DotOrbitUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,12 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type FlutedGlassParams, type ShaderPreset } from '@paper-design/shaders';
+export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
+}
+type FlutedGlassPreset = ShaderPreset<FlutedGlassParams>;
+export declare const defaultPreset: FlutedGlassPreset;
+export declare const wavesPreset: FlutedGlassPreset;
+export declare const irregularPreset: FlutedGlassPreset;
+export declare const foldsPreset: FlutedGlassPreset;
+export declare const flutedGlassPresets: FlutedGlassPreset[];
+export declare const FlutedGlass: React.FC<FlutedGlassProps>;
+export {};