@paper-design/shaders-react 0.0.0-canary.7930b4d → 0.0.0-canary.7fc2fb35

package/dist/shaders/fluted-glass.js

@@ -19,7 +19,6 @@ const defaultPreset = {
   params: {
     ...defaultObjectSizing,
     fit: "cover",
-    scale: 1.1,
     speed: 0,
     frame: 0,
     colorBack: "#00000000",
@@ -34,6 +33,7 @@ const defaultPreset = {
     distortion: 0.5,
     shift: 0,
     blur: 0,
+    edges: 0.25,
     stretch: 0,
     margin: 0,
     marginLeft: 0,
@@ -64,6 +64,7 @@ const wavesPreset = {
     distortion: 0.5,
     shift: 0,
     blur: 0.1,
+    edges: 0.5,
     stretch: 1,
     margin: 0,
     marginLeft: 0,
@@ -94,6 +95,7 @@ const abstractPreset = {
     distortion: 1,
     shift: 0,
     blur: 1,
+    edges: 0.5,
     stretch: 1,
     margin: 0,
     marginLeft: 0,
@@ -123,12 +125,13 @@ const foldsPreset = {
     distortion: 0.75,
     shift: 0,
     blur: 0.25,
+    edges: 0.5,
     stretch: 0,
-    margin: 0.2,
-    marginLeft: 0.2,
-    marginRight: 0.2,
-    marginTop: 0.2,
-    marginBottom: 0.2,
+    margin: 0.1,
+    marginLeft: 0.1,
+    marginRight: 0.1,
+    marginTop: 0.1,
+    marginBottom: 0.1,
     grainMixer: 0,
     grainOverlay: 0
   }
@@ -150,6 +153,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
   shape = defaultPreset.params.shape,
   shift = defaultPreset.params.shift,
   blur = defaultPreset.params.blur,
+  edges = defaultPreset.params.edges,
   margin,
   marginLeft = margin ?? defaultPreset.params.marginLeft,
   marginRight = margin ?? defaultPreset.params.marginRight,
@@ -157,9 +161,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
   marginBottom = margin ?? defaultPreset.params.marginBottom,
   grainMixer = defaultPreset.params.grainMixer,
   grainOverlay = defaultPreset.params.grainOverlay,
-  // `edges` were renamed to `stretch`
-  edges,
-  stretch = edges === void 0 ? defaultPreset.params.stretch : edges,
+  stretch = defaultPreset.params.stretch,
   // integer `count` was deprecated in favor of the normalized `size` param
   count,
   size = count === void 0 ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,
@@ -187,6 +189,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
     u_distortion: distortion,
     u_shift: shift,
     u_blur: blur,
+    u_edges: edges,
     u_stretch: stretch,
     u_distortionShape: GlassDistortionShapes[distortionShape],
     u_highlights: highlights,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/fluted-glass.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  flutedGlassFragmentShader,\n  ShaderFitOptions,\n  type FlutedGlassUniforms,\n  type FlutedGlassParams,\n  defaultObjectSizing,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n  /** @deprecated use `stretch` instead */\n  edges?: number;\n  /** @deprecated use `size` instead */\n  count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1.1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.25,\n    size: 0.5,\n    angle: 0,\n    distortionShape: 'prism',\n    highlights: 0.1,\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0,\n    stretch: 0,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n  name: 'Waves',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1.2,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.9,\n    angle: 0,\n    distortionShape: 'contour',\n    highlights: 0,\n    shape: 'wave',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0.1,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0.05,\n  },\n};\n\nexport const abstractPreset: FlutedGlassPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 4,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.7,\n    angle: 30,\n    distortionShape: 'flat',\n    highlights: 0,\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 1,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0.1,\n    grainOverlay: 0.1,\n  },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n  name: 'Folds',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.4,\n    size: 0.4,\n    angle: 0,\n    distortionShape: 'cascade',\n    highlights: 0,\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0.25,\n    stretch: 0,\n    margin: 0.2,\n    marginLeft: 0.2,\n    marginRight: 0.2,\n    marginTop: 0.2,\n    marginBottom: 0.2,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorShadow = defaultPreset.params.colorShadow,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  shadows = defaultPreset.params.shadows,\n  angle = defaultPreset.params.angle,\n  distortion = defaultPreset.params.distortion,\n  distortionShape = defaultPreset.params.distortionShape,\n  highlights = defaultPreset.params.highlights,\n  shape = defaultPreset.params.shape,\n  shift = defaultPreset.params.shift,\n  blur = defaultPreset.params.blur,\n  margin,\n  marginLeft = margin ?? defaultPreset.params.marginLeft,\n  marginRight = margin ?? defaultPreset.params.marginRight,\n  marginTop = margin ?? defaultPreset.params.marginTop,\n  marginBottom = margin ?? defaultPreset.params.marginBottom,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n\n  // `edges` were renamed to `stretch`\n  edges,\n  stretch = edges === undefined ? defaultPreset.params.stretch : edges,\n\n  // integer `count` was deprecated in favor of the normalized `size` param\n  count,\n  size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\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}: FlutedGlassProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorShadow: getShaderColorFromString(colorShadow),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_shadows: shadows,\n    u_size: size,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_stretch: stretch,\n    u_distortionShape: GlassDistortionShapes[distortionShape],\n    u_highlights: highlights,\n    u_shape: GlassGridShapes[shape],\n    u_marginLeft: marginLeft,\n    u_marginRight: marginRight,\n    u_marginTop: marginTop,\n    u_marginBottom: marginBottom,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\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 FlutedGlassUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={flutedGlassFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
-  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAwNH;AA7MG,MAAM,gBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,cAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,iBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,cAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,qBAA0C,CAAC,eAAe,gBAAgB,aAAa,WAAW;AAExG,MAAM,cAA0C,KAAK,SAAS,gBAAgB;AAAA;AAAA,EAEnF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,cAAc,cAAc,OAAO;AAAA,EACnC,iBAAiB,cAAc,OAAO;AAAA,EACtC,QAAQ;AAAA,EACR,UAAU,cAAc,OAAO;AAAA,EAC/B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,kBAAkB,cAAc,OAAO;AAAA,EACvC,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA,EAC5B;AAAA,EACA,aAAa,UAAU,cAAc,OAAO;AAAA,EAC5C,cAAc,UAAU,cAAc,OAAO;AAAA,EAC7C,YAAY,UAAU,cAAc,OAAO;AAAA,EAC3C,eAAe,UAAU,cAAc,OAAO;AAAA,EAC9C,aAAa,cAAc,OAAO;AAAA,EAClC,eAAe,cAAc,OAAO;AAAA;AAAA,EAGpC;AAAA,EACA,UAAU,UAAU,SAAY,cAAc,OAAO,UAAU;AAAA;AAAA,EAG/D;AAAA,EACA,OAAO,UAAU,SAAY,cAAc,OAAO,OAAO,KAAK,IAAI,KAAK,QAAQ,MAAM,IAAI,CAAC,IAAI,MAAM;AAAA;AAAA,EAGpG,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,SAAS;AAAA,IACT,aAAa,yBAAyB,SAAS;AAAA,IAC/C,eAAe,yBAAyB,WAAW;AAAA,IACnD,kBAAkB,yBAAyB,cAAc;AAAA,IACzD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,mBAAmB,sBAAsB,eAAe;AAAA,IACxD,cAAc;AAAA,IACd,SAAS,gBAAgB,KAAK;AAAA,IAC9B,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,gBAAgB;AAAA;AAAA,IAGhB,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,SAAS,CAAC,SAAS;AAAA,MACnB;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  flutedGlassFragmentShader,\n  ShaderFitOptions,\n  type FlutedGlassUniforms,\n  type FlutedGlassParams,\n  defaultObjectSizing,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n  /** @deprecated use `size` instead */\n  count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.25,\n    size: 0.5,\n    angle: 0,\n    distortionShape: 'prism',\n    highlights: 0.1,\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0,\n    edges: 0.25,\n    stretch: 0,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n  name: 'Waves',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1.2,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.9,\n    angle: 0,\n    distortionShape: 'contour',\n    highlights: 0,\n    shape: 'wave',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0.1,\n    edges: 0.5,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0.05,\n  },\n};\n\nexport const abstractPreset: FlutedGlassPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 4,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.7,\n    angle: 30,\n    distortionShape: 'flat',\n    highlights: 0,\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 1,\n    edges: 0.5,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0.1,\n    grainOverlay: 0.1,\n  },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n  name: 'Folds',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.4,\n    size: 0.4,\n    angle: 0,\n    distortionShape: 'cascade',\n    highlights: 0,\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0.25,\n    edges: 0.5,\n    stretch: 0,\n    margin: 0.1,\n    marginLeft: 0.1,\n    marginRight: 0.1,\n    marginTop: 0.1,\n    marginBottom: 0.1,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorShadow = defaultPreset.params.colorShadow,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  shadows = defaultPreset.params.shadows,\n  angle = defaultPreset.params.angle,\n  distortion = defaultPreset.params.distortion,\n  distortionShape = defaultPreset.params.distortionShape,\n  highlights = defaultPreset.params.highlights,\n  shape = defaultPreset.params.shape,\n  shift = defaultPreset.params.shift,\n  blur = defaultPreset.params.blur,\n  edges = defaultPreset.params.edges,\n  margin,\n  marginLeft = margin ?? defaultPreset.params.marginLeft,\n  marginRight = margin ?? defaultPreset.params.marginRight,\n  marginTop = margin ?? defaultPreset.params.marginTop,\n  marginBottom = margin ?? defaultPreset.params.marginBottom,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  stretch = defaultPreset.params.stretch,\n\n  // integer `count` was deprecated in favor of the normalized `size` param\n  count,\n  size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\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}: FlutedGlassProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorShadow: getShaderColorFromString(colorShadow),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_shadows: shadows,\n    u_size: size,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_edges: edges,\n    u_stretch: stretch,\n    u_distortionShape: GlassDistortionShapes[distortionShape],\n    u_highlights: highlights,\n    u_shape: GlassGridShapes[shape],\n    u_marginLeft: marginLeft,\n    u_marginRight: marginRight,\n    u_marginTop: marginTop,\n    u_marginBottom: marginBottom,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\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 FlutedGlassUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={flutedGlassFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/gem-smoke.d.ts

@@ -0,0 +1,16 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type GemSmokeParams, type ImageShaderPreset } from '@paper-design/shaders';
+export interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {
+    /**
+     * Suspends the component when the image is being processed.
+     */
+    suspendWhenProcessingImage?: boolean;
+}
+type GemSmokePreset = ImageShaderPreset<GemSmokeParams>;
+export declare const defaultPreset: GemSmokePreset;
+export declare const fluorescentPreset: GemSmokePreset;
+export declare const firePreset: GemSmokePreset;
+export declare const infraredPreset: GemSmokePreset;
+export declare const gemSmokePresets: GemSmokePreset[];
+export declare const GemSmoke: React.FC<GemSmokeProps>;
+export {};

package/dist/shaders/gem-smoke.js

@@ -0,0 +1,208 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo, useLayoutEffect, useState } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import {
+  gemSmokeFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  toProcessedGemSmoke,
+  getShaderColorFromString,
+  GemSmokeShapes
+} from "@paper-design/shaders";
+import { transparentPixel } from "../transparent-pixel.js";
+import { suspend } from "../suspend.js";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colorBack: "#f0efea",
+    colorInner: "#fafaf5",
+    colors: ["#333333", "#e7e6df"],
+    outerGlow: 0.55,
+    innerGlow: 1,
+    innerDistortion: 0.8,
+    outerDistortion: 0.6,
+    offset: 0,
+    angle: 0,
+    size: 0.8,
+    shape: "diamond"
+  }
+};
+const fluorescentPreset = {
+  name: "Fluorescent",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colorBack: "#000000",
+    colorInner: "#000000",
+    colors: ["#2fb64c", "#cdff61", "#ffffff"],
+    outerGlow: 0,
+    innerGlow: 1,
+    innerDistortion: 1,
+    outerDistortion: 0.8,
+    offset: 0,
+    angle: 0,
+    size: 0.8,
+    shape: "diamond"
+  }
+};
+const firePreset = {
+  name: "Fire",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colorBack: "#000000",
+    colorInner: "#000000",
+    colors: ["#fe5b16", "#f7ff61", "#ffffff"],
+    outerGlow: 1,
+    innerGlow: 0.65,
+    innerDistortion: 0.6,
+    outerDistortion: 0.8,
+    offset: 0,
+    angle: 0,
+    size: 0.8,
+    shape: "diamond"
+  }
+};
+const infraredPreset = {
+  name: "Infrared",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 0.5,
+    frame: 0,
+    colorBack: "#cd28dc",
+    colorInner: "#00000000",
+    colors: ["#ff9900", "#fff67a", "#dcff52", "#00ffbb", "#0077ff"],
+    outerGlow: 1,
+    innerGlow: 1,
+    innerDistortion: 1,
+    outerDistortion: 1,
+    offset: 0.2,
+    angle: 0,
+    size: 1,
+    shape: "diamond"
+  }
+};
+const gemSmokePresets = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];
+const GemSmoke = memo(function GemSmokeImpl({
+  // Own props
+  colorBack = defaultPreset.params.colorBack,
+  colors = defaultPreset.params.colors,
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  image = "",
+  innerDistortion = defaultPreset.params.innerDistortion,
+  outerDistortion = defaultPreset.params.outerDistortion,
+  outerGlow = defaultPreset.params.outerGlow,
+  innerGlow = defaultPreset.params.innerGlow,
+  colorInner = defaultPreset.params.colorInner,
+  offset = defaultPreset.params.offset,
+  angle = defaultPreset.params.angle,
+  size = defaultPreset.params.size,
+  shape = defaultPreset.params.shape,
+  suspendWhenProcessingImage = false,
+  // 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 imageUrl = typeof image === "string" ? image : image.src;
+  const [processedStateImage, setProcessedStateImage] = useState(transparentPixel);
+  let processedImage;
+  if (suspendWhenProcessingImage && typeof window !== "undefined" && imageUrl) {
+    processedImage = suspend(
+      () => toProcessedGemSmoke(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),
+      [imageUrl, "gemSmoke"]
+    );
+  } else {
+    processedImage = processedStateImage;
+  }
+  useLayoutEffect(() => {
+    if (suspendWhenProcessingImage) {
+      return;
+    }
+    if (!imageUrl) {
+      setProcessedStateImage(transparentPixel);
+      return;
+    }
+    let url;
+    let current = true;
+    toProcessedGemSmoke(imageUrl).then((result) => {
+      if (current) {
+        url = URL.createObjectURL(result.pngBlob);
+        setProcessedStateImage(url);
+      }
+    });
+    return () => {
+      current = false;
+    };
+  }, [imageUrl, suspendWhenProcessingImage]);
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_image: processedImage,
+    u_innerDistortion: innerDistortion,
+    u_outerDistortion: outerDistortion,
+    u_outerGlow: outerGlow,
+    u_innerGlow: innerGlow,
+    u_colorInner: getShaderColorFromString(colorInner),
+    u_offset: offset,
+    u_angle: angle,
+    u_size: size,
+    u_isImage: Boolean(image),
+    u_shape: GemSmokeShapes[shape],
+    // 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: gemSmokeFragmentShader,
+      mipmaps: ["u_image"],
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  GemSmoke,
+  defaultPreset,
+  firePreset,
+  fluorescentPreset,
+  gemSmokePresets,
+  infraredPreset
+};
+//# sourceMappingURL=gem-smoke.js.map

package/dist/shaders/gem-smoke.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/gem-smoke.tsx"],
+  "sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  gemSmokeFragmentShader,\n  ShaderFitOptions,\n  defaultObjectSizing,\n  type GemSmokeUniforms,\n  type GemSmokeParams,\n  toProcessedGemSmoke,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n  GemSmokeShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {\n  /**\n   * Suspends the component when the image is being processed.\n   */\n  suspendWhenProcessingImage?: boolean;\n}\n\ntype GemSmokePreset = ImageShaderPreset<GemSmokeParams>;\n\nexport const defaultPreset: GemSmokePreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#f0efea',\n    colorInner: '#fafaf5',\n    colors: ['#333333', '#e7e6df'],\n    outerGlow: 0.55,\n    innerGlow: 1,\n    innerDistortion: 0.8,\n    outerDistortion: 0.6,\n    offset: 0,\n    angle: 0,\n    size: 0.8,\n    shape: 'diamond',\n  },\n};\n\nexport const fluorescentPreset: GemSmokePreset = {\n  name: 'Fluorescent',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorInner: '#000000',\n    colors: ['#2fb64c', '#cdff61', '#ffffff'],\n    outerGlow: 0,\n    innerGlow: 1,\n    innerDistortion: 1,\n    outerDistortion: 0.8,\n    offset: 0,\n    angle: 0,\n    size: 0.8,\n    shape: 'diamond',\n  },\n};\n\nexport const firePreset: GemSmokePreset = {\n  name: 'Fire',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorInner: '#000000',\n    colors: ['#fe5b16', '#f7ff61', '#ffffff'],\n    outerGlow: 1,\n    innerGlow: 0.65,\n    innerDistortion: 0.6,\n    outerDistortion: 0.8,\n    offset: 0,\n    angle: 0,\n    size: 0.8,\n    shape: 'diamond',\n  },\n};\n\nexport const infraredPreset: GemSmokePreset = {\n  name: 'Infrared',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 0.5,\n    frame: 0,\n    colorBack: '#cd28dc',\n    colorInner: '#00000000',\n    colors: ['#ff9900', '#fff67a', '#dcff52', '#00ffbb', '#0077ff'],\n    outerGlow: 1,\n    innerGlow: 1,\n    innerDistortion: 1,\n    outerDistortion: 1,\n    offset: 0.2,\n    angle: 0,\n    size: 1,\n    shape: 'diamond',\n  },\n};\n\nexport const gemSmokePresets: GemSmokePreset[] = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];\n\nexport const GemSmoke: React.FC<GemSmokeProps> = memo(function GemSmokeImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  innerDistortion = defaultPreset.params.innerDistortion,\n  outerDistortion = defaultPreset.params.outerDistortion,\n  outerGlow = defaultPreset.params.outerGlow,\n  innerGlow = defaultPreset.params.innerGlow,\n  colorInner = defaultPreset.params.colorInner,\n  offset = defaultPreset.params.offset,\n  angle = defaultPreset.params.angle,\n  size = defaultPreset.params.size,\n  shape = defaultPreset.params.shape,\n  suspendWhenProcessingImage = false,\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}: GemSmokeProps) {\n  const imageUrl = typeof image === 'string' ? image : image.src;\n  const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n  let processedImage: string;\n\n  if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedGemSmoke(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),\n      [imageUrl, 'gemSmoke']\n    );\n  } else {\n    processedImage = processedStateImage;\n  }\n\n  useLayoutEffect(() => {\n    if (suspendWhenProcessingImage) {\n      // Skip doing work in the effect as it's been handled by suspense.\n      return;\n    }\n\n    if (!imageUrl) {\n      setProcessedStateImage(transparentPixel);\n      return;\n    }\n\n    let url: string;\n    let current = true;\n\n    toProcessedGemSmoke(imageUrl).then((result) => {\n      if (current) {\n        url = URL.createObjectURL(result.pngBlob);\n        setProcessedStateImage(url);\n      }\n    });\n\n    return () => {\n      current = false;\n    };\n  }, [imageUrl, suspendWhenProcessingImage]);\n\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_image: processedImage,\n    u_innerDistortion: innerDistortion,\n    u_outerDistortion: outerDistortion,\n    u_outerGlow: outerGlow,\n    u_innerGlow: innerGlow,\n    u_colorInner: getShaderColorFromString(colorInner),\n    u_offset: offset,\n    u_angle: angle,\n    u_size: size,\n    u_isImage: Boolean(image),\n    u_shape: GemSmokeShapes[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 GemSmokeUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={gemSmokeFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/shaders/halftone-cmyk.d.ts

@@ -0,0 +1,12 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type HalftoneCmykParams, type ImageShaderPreset } from '@paper-design/shaders';
+export interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {
+}
+type HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;
+export declare const defaultPreset: HalftoneCmykPreset;
+export declare const dropsPreset: HalftoneCmykPreset;
+export declare const newspaper: HalftoneCmykPreset;
+export declare const vintagePreset: HalftoneCmykPreset;
+export declare const halftoneCmykPresets: HalftoneCmykPreset[];
+export declare const HalftoneCmyk: React.FC<HalftoneCmykProps>;
+export {};

package/dist/shaders/halftone-cmyk.js

@@ -0,0 +1,236 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 {
+  halftoneCmykFragmentShader,
+  getShaderColorFromString,
+  getShaderNoiseTexture,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  HalftoneCmykTypes
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1,
+    fit: "cover",
+    speed: 0,
+    frame: 0,
+    colorBack: "#fbfaf5",
+    colorC: "#00b4ff",
+    colorM: "#fc519f",
+    colorY: "#ffd800",
+    colorK: "#231f20",
+    size: 0.2,
+    contrast: 1,
+    softness: 1,
+    grainSize: 0.5,
+    grainMixer: 0,
+    grainOverlay: 0,
+    gridNoise: 0.2,
+    floodC: 0.15,
+    floodM: 0,
+    floodY: 0,
+    floodK: 0,
+    gainC: 0.3,
+    gainM: 0,
+    gainY: 0.2,
+    gainK: 0,
+    type: "ink"
+  }
+};
+const dropsPreset = {
+  name: "Drops",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1,
+    fit: "cover",
+    speed: 0,
+    frame: 0,
+    colorBack: "#eeefd7",
+    colorC: "#00b2ff",
+    colorM: "#fc4f4f",
+    colorY: "#ffd900",
+    colorK: "#231f20",
+    size: 0.88,
+    contrast: 1.15,
+    softness: 0,
+    grainSize: 0.01,
+    grainMixer: 0.05,
+    grainOverlay: 0.25,
+    gridNoise: 0.5,
+    floodC: 0.15,
+    floodM: 0,
+    floodY: 0,
+    floodK: 0,
+    gainC: 1,
+    gainM: 0.44,
+    gainY: -1,
+    gainK: 0,
+    type: "ink"
+  }
+};
+const newspaper = {
+  name: "Newspaper",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1,
+    fit: "cover",
+    speed: 0,
+    frame: 0,
+    colorBack: "#f2f1e8",
+    colorC: "#7a7a75",
+    colorM: "#7a7a75",
+    colorY: "#7a7a75",
+    colorK: "#231f20",
+    size: 0.01,
+    contrast: 2,
+    softness: 0.2,
+    grainSize: 0,
+    grainMixer: 0,
+    grainOverlay: 0.2,
+    gridNoise: 0.6,
+    floodC: 0,
+    floodM: 0,
+    floodY: 0,
+    floodK: 0.1,
+    gainC: -0.17,
+    gainM: -0.45,
+    gainY: -0.45,
+    gainK: 0,
+    type: "dots"
+  }
+};
+const vintagePreset = {
+  name: "Vintage",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1,
+    fit: "cover",
+    speed: 0,
+    frame: 0,
+    colorBack: "#fffaf0",
+    colorC: "#59afc5",
+    colorM: "#d8697c",
+    colorY: "#fad85c",
+    colorK: "#2d2824",
+    size: 0.2,
+    contrast: 1.25,
+    softness: 0.4,
+    grainSize: 0.5,
+    grainMixer: 0.15,
+    grainOverlay: 0.1,
+    gridNoise: 0.45,
+    floodC: 0.15,
+    floodM: 0,
+    floodY: 0,
+    floodK: 0,
+    gainC: 0.3,
+    gainM: 0,
+    gainY: 0.2,
+    gainK: 0,
+    type: "sharp"
+  }
+};
+const halftoneCmykPresets = [defaultPreset, dropsPreset, newspaper, vintagePreset];
+const HalftoneCmyk = memo(function HalftoneCmykImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
+  colorC = defaultPreset.params.colorC,
+  colorM = defaultPreset.params.colorM,
+  colorY = defaultPreset.params.colorY,
+  colorK = defaultPreset.params.colorK,
+  image = "",
+  size = defaultPreset.params.size,
+  contrast = defaultPreset.params.contrast,
+  softness = defaultPreset.params.softness,
+  grainSize = defaultPreset.params.grainSize,
+  grainMixer = defaultPreset.params.grainMixer,
+  grainOverlay = defaultPreset.params.grainOverlay,
+  gridNoise = defaultPreset.params.gridNoise,
+  floodC = defaultPreset.params.floodC,
+  floodM = defaultPreset.params.floodM,
+  floodY = defaultPreset.params.floodY,
+  floodK = defaultPreset.params.floodK,
+  gainC = defaultPreset.params.gainC,
+  gainM = defaultPreset.params.gainM,
+  gainY = defaultPreset.params.gainY,
+  gainK = defaultPreset.params.gainK,
+  type = defaultPreset.params.type,
+  // 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_image: image,
+    u_noiseTexture: getShaderNoiseTexture(),
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorC: getShaderColorFromString(colorC),
+    u_colorM: getShaderColorFromString(colorM),
+    u_colorY: getShaderColorFromString(colorY),
+    u_colorK: getShaderColorFromString(colorK),
+    u_size: size,
+    u_contrast: contrast,
+    u_softness: softness,
+    u_grainSize: grainSize,
+    u_grainMixer: grainMixer,
+    u_grainOverlay: grainOverlay,
+    u_gridNoise: gridNoise,
+    u_floodC: floodC,
+    u_floodM: floodM,
+    u_floodY: floodY,
+    u_floodK: floodK,
+    u_gainC: gainC,
+    u_gainM: gainM,
+    u_gainY: gainY,
+    u_gainK: gainK,
+    u_type: HalftoneCmykTypes[type],
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_rotation: rotation,
+    u_scale: scale,
+    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: halftoneCmykFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  HalftoneCmyk,
+  defaultPreset,
+  dropsPreset,
+  halftoneCmykPresets,
+  newspaper,
+  vintagePreset
+};
+//# sourceMappingURL=halftone-cmyk.js.map

package/dist/shaders/halftone-cmyk.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/halftone-cmyk.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  halftoneCmykFragmentShader,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  ShaderFitOptions,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n  HalftoneCmykTypes,\n} from '@paper-design/shaders';\n\nexport interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {}\n\ntype HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;\n\nexport const defaultPreset: HalftoneCmykPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#fbfaf5',\n    colorC: '#00b4ff',\n    colorM: '#fc519f',\n    colorY: '#ffd800',\n    colorK: '#231f20',\n    size: 0.2,\n    contrast: 1,\n    softness: 1,\n    grainSize: 0.5,\n    grainMixer: 0,\n    grainOverlay: 0,\n    gridNoise: 0.2,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 0.3,\n    gainM: 0,\n    gainY: 0.2,\n    gainK: 0,\n    type: 'ink',\n  },\n};\n\nexport const dropsPreset: HalftoneCmykPreset = {\n  name: 'Drops',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#eeefd7',\n    colorC: '#00b2ff',\n    colorM: '#fc4f4f',\n    colorY: '#ffd900',\n    colorK: '#231f20',\n    size: 0.88,\n    contrast: 1.15,\n    softness: 0,\n    grainSize: 0.01,\n    grainMixer: 0.05,\n    grainOverlay: 0.25,\n    gridNoise: 0.5,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 1.0,\n    gainM: 0.44,\n    gainY: -1.0,\n    gainK: 0,\n    type: 'ink',\n  },\n};\n\nexport const newspaper: HalftoneCmykPreset = {\n  name: 'Newspaper',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#f2f1e8',\n    colorC: '#7a7a75',\n    colorM: '#7a7a75',\n    colorY: '#7a7a75',\n    colorK: '#231f20',\n    size: 0.01,\n    contrast: 2,\n    softness: 0.2,\n    grainSize: 0,\n    grainMixer: 0,\n    grainOverlay: 0.2,\n    gridNoise: 0.6,\n    floodC: 0,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0.1,\n    gainC: -0.17,\n    gainM: -0.45,\n    gainY: -0.45,\n    gainK: 0,\n    type: 'dots',\n  },\n};\n\nexport const vintagePreset: HalftoneCmykPreset = {\n  name: 'Vintage',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#fffaf0',\n    colorC: '#59afc5',\n    colorM: '#d8697c',\n    colorY: '#fad85c',\n    colorK: '#2d2824',\n    size: 0.2,\n    contrast: 1.25,\n    softness: 0.4,\n    grainSize: 0.5,\n    grainMixer: 0.15,\n    grainOverlay: 0.1,\n    gridNoise: 0.45,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 0.3,\n    gainM: 0,\n    gainY: 0.2,\n    gainK: 0,\n    type: 'sharp',\n  },\n};\n\nexport const halftoneCmykPresets: HalftoneCmykPreset[] = [defaultPreset, dropsPreset, newspaper, vintagePreset];\n\nexport const HalftoneCmyk: React.FC<HalftoneCmykProps> = memo(function HalftoneCmykImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorC = defaultPreset.params.colorC,\n  colorM = defaultPreset.params.colorM,\n  colorY = defaultPreset.params.colorY,\n  colorK = defaultPreset.params.colorK,\n  image = '',\n  size = defaultPreset.params.size,\n  contrast = defaultPreset.params.contrast,\n  softness = defaultPreset.params.softness,\n  grainSize = defaultPreset.params.grainSize,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  gridNoise = defaultPreset.params.gridNoise,\n  floodC = defaultPreset.params.floodC,\n  floodM = defaultPreset.params.floodM,\n  floodY = defaultPreset.params.floodY,\n  floodK = defaultPreset.params.floodK,\n  gainC = defaultPreset.params.gainC,\n  gainM = defaultPreset.params.gainM,\n  gainY = defaultPreset.params.gainY,\n  gainK = defaultPreset.params.gainK,\n  type = defaultPreset.params.type,\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}: HalftoneCmykProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_noiseTexture: getShaderNoiseTexture(),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorC: getShaderColorFromString(colorC),\n    u_colorM: getShaderColorFromString(colorM),\n    u_colorY: getShaderColorFromString(colorY),\n    u_colorK: getShaderColorFromString(colorK),\n    u_size: size,\n    u_contrast: contrast,\n    u_softness: softness,\n    u_grainSize: grainSize,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_gridNoise: gridNoise,\n    u_floodC: floodC,\n    u_floodM: floodM,\n    u_floodY: floodY,\n    u_floodK: floodK,\n    u_gainC: gainC,\n    u_gainM: gainM,\n    u_gainY: gainY,\n    u_gainK: gainK,\n    u_type: HalftoneCmykTypes[type],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\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 HalftoneCmykUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={halftoneCmykFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}