@paper-design/shaders-react 0.0.0-canary.156ab35

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Lost Coast Labs, Inc. (Paper Design)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# @paper-design/shaders-react
+
+## Usage
+
+```
+import { MeshGradient, DotOrbit } from '@paper-design/shaders-react';
+
+<MeshGradient
+    colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
+    distortion={1}
+    swirl={0.8}
+    speed={0.2}
+    style={{width: 200, height: 200}}
+/>
+
+<DotOrbit
+    colors={['#d2822d', '#0c3b7e', '#b31a57', '#37a066']}
+    colorBack={'#000000'}
+    scale={0.3}
+    style={{width: 200, height: 200}}
+/>
+
+
+// these settings can be configured in code or designed in Paper
+```
+
+## Release notes
+
+[View changelog →](https://github.com/paper-design/shaders/blob/main/CHANGELOG.md)

package/dist/color-props-are-equal.d.ts

@@ -0,0 +1,6 @@
+interface PropsWithColors {
+    colors?: string[];
+    [key: string]: unknown;
+}
+export declare function colorPropsAreEqual(prevProps: PropsWithColors, nextProps: PropsWithColors): boolean;
+export {};

package/dist/color-props-are-equal.js

@@ -0,0 +1,34 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+function colorPropsAreEqual(prevProps, nextProps) {
+  for (const key in prevProps) {
+    if (key === "colors") {
+      const prevIsArray = Array.isArray(prevProps.colors);
+      const nextIsArray = Array.isArray(nextProps.colors);
+      if (!prevIsArray || !nextIsArray) {
+        if (Object.is(prevProps.colors, nextProps.colors) === false) {
+          return false;
+        }
+        continue;
+      }
+      if (prevProps.colors?.length !== nextProps.colors?.length) {
+        return false;
+      }
+      if (!prevProps.colors?.every((color, index) => color === nextProps.colors?.[index])) {
+        return false;
+      }
+      continue;
+    }
+    if (Object.is(prevProps[key], nextProps[key]) === false) {
+      return false;
+    }
+  }
+  return true;
+}
+export {
+  colorPropsAreEqual
+};
+//# sourceMappingURL=color-props-are-equal.js.map

package/dist/color-props-are-equal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/color-props-are-equal.ts"],
+  "sourcesContent": ["interface PropsWithColors {\n  colors?: string[];\n  [key: string]: unknown;\n}\n\nexport function colorPropsAreEqual(prevProps: PropsWithColors, nextProps: PropsWithColors): boolean {\n  for (const key in prevProps) {\n    if (key === 'colors') {\n      const prevIsArray = Array.isArray(prevProps.colors);\n      const nextIsArray = Array.isArray(nextProps.colors);\n\n      if (!prevIsArray || !nextIsArray) {\n        if (Object.is(prevProps.colors, nextProps.colors) === false) {\n          return false;\n        }\n\n        continue;\n      }\n\n      if (prevProps.colors?.length !== nextProps.colors?.length) {\n        return false;\n      }\n\n      if (!prevProps.colors?.every((color, index) => color === nextProps.colors?.[index])) {\n        return false;\n      }\n\n      continue;\n    }\n\n    if (Object.is(prevProps[key], nextProps[key]) === false) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],
+  "mappings": ";;;;;AAKO,SAAS,mBAAmB,WAA4B,WAAqC;AAClG,aAAW,OAAO,WAAW;AAC3B,QAAI,QAAQ,UAAU;AACpB,YAAM,cAAc,MAAM,QAAQ,UAAU,MAAM;AAClD,YAAM,cAAc,MAAM,QAAQ,UAAU,MAAM;AAElD,UAAI,CAAC,eAAe,CAAC,aAAa;AAChC,YAAI,OAAO,GAAG,UAAU,QAAQ,UAAU,MAAM,MAAM,OAAO;AAC3D,iBAAO;AAAA,QACT;AAEA;AAAA,MACF;AAEA,UAAI,UAAU,QAAQ,WAAW,UAAU,QAAQ,QAAQ;AACzD,eAAO;AAAA,MACT;AAEA,UAAI,CAAC,UAAU,QAAQ,MAAM,CAAC,OAAO,UAAU,UAAU,UAAU,SAAS,KAAK,CAAC,GAAG;AACnF,eAAO;AAAA,MACT;AAEA;AAAA,IACF;AAEA,QAAI,OAAO,GAAG,UAAU,GAAG,GAAG,UAAU,GAAG,CAAC,MAAM,OAAO;AACvD,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+export { ShaderMount } from './shader-mount.js';
+export type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';
+export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';
+export type { MeshGradientProps } from './shaders/mesh-gradient.js';
+export type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';
+export { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';
+export type { SmokeRingProps } from './shaders/smoke-ring.js';
+export type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';
+export { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';
+export type { NeuroNoiseProps } from './shaders/neuro-noise.js';
+export type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';
+export { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';
+export type { DotOrbitProps } from './shaders/dot-orbit.js';
+export type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';
+export { DotGrid, dotGridPresets } from './shaders/dot-grid.js';
+export type { DotGridProps } from './shaders/dot-grid.js';
+export type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';
+export { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';
+export type { SimplexNoiseProps } from './shaders/simplex-noise.js';
+export type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';
+export { Metaballs, metaballsPresets } from './shaders/metaballs.js';
+export type { MetaballsProps } from './shaders/metaballs.js';
+export type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';
+export { Waves, wavesPresets } from './shaders/waves.js';
+export type { WavesProps } from './shaders/waves.js';
+export type { WavesUniforms, WavesParams } from '@paper-design/shaders';
+export { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';
+export type { PerlinNoiseProps } from './shaders/perlin-noise.js';
+export type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';
+export { Voronoi, voronoiPresets } from './shaders/voronoi.js';
+export type { VoronoiProps } from './shaders/voronoi.js';
+export type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';
+export { Warp, warpPresets } from './shaders/warp.js';
+export type { WarpProps } from './shaders/warp.js';
+export type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';
+export { GodRays, godRaysPresets } from './shaders/god-rays.js';
+export type { GodRaysProps } from './shaders/god-rays.js';
+export type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';
+export { Spiral, spiralPresets } from './shaders/spiral.js';
+export type { SpiralProps } from './shaders/spiral.js';
+export type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';
+export { Swirl, swirlPresets } from './shaders/swirl.js';
+export type { SwirlProps } from './shaders/swirl.js';
+export type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';
+export { Dithering, ditheringPresets } from './shaders/dithering.js';
+export type { DitheringProps } from './shaders/dithering.js';
+export type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';
+export { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';
+export type { GrainGradientProps } from './shaders/grain-gradient.js';
+export type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';
+export { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';
+export type { PulsingBorderProps } from './shaders/pulsing-border.js';
+export type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';
+export { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';
+export type { ColorPanelsProps } from './shaders/color-panels.js';
+export type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';
+export { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';
+export type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';
+export type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';
+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 { Heatmap, heatmapPresets } from './shaders/heatmap.js';
+export type { HeatmapProps } from './shaders/heatmap.js';
+export type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';
+export { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';
+export type { LiquidMetalProps } from './shaders/liquid-metal.js';
+export type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';
+export { ImageHalftoneDots, imageHalftoneDotsPresets } from './shaders/image-halftone-dots.js';
+export type { ImageHalftoneDotsProps } from './shaders/image-halftone-dots.js';
+export type { ImageHalftoneDotsUniforms, ImageHalftoneDotsParams } 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, heatmapMeta, staticMeshGradientMeta, staticRadialGradientMeta, } from '@paper-design/shaders';

package/dist/index.js

@@ -0,0 +1,129 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       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";
+import { NeuroNoise, neuroNoisePresets } from "./shaders/neuro-noise.js";
+import { DotOrbit, dotOrbitPresets } from "./shaders/dot-orbit.js";
+import { DotGrid, dotGridPresets } from "./shaders/dot-grid.js";
+import { SimplexNoise, simplexNoisePresets } from "./shaders/simplex-noise.js";
+import { Metaballs, metaballsPresets } from "./shaders/metaballs.js";
+import { Waves, wavesPresets } from "./shaders/waves.js";
+import { PerlinNoise, perlinNoisePresets } from "./shaders/perlin-noise.js";
+import { Voronoi, voronoiPresets } from "./shaders/voronoi.js";
+import { Warp, warpPresets } from "./shaders/warp.js";
+import { GodRays, godRaysPresets } from "./shaders/god-rays.js";
+import { Spiral, spiralPresets } from "./shaders/spiral.js";
+import { Swirl, swirlPresets } from "./shaders/swirl.js";
+import { Dithering, ditheringPresets } from "./shaders/dithering.js";
+import { GrainGradient, grainGradientPresets } from "./shaders/grain-gradient.js";
+import { 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 { Heatmap, heatmapPresets } from "./shaders/heatmap.js";
+import { LiquidMetal, liquidMetalPresets } from "./shaders/liquid-metal.js";
+import { ImageHalftoneDots, imageHalftoneDotsPresets } from "./shaders/image-halftone-dots.js";
+import { isPaperShaderElement, getShaderColorFromString } from "@paper-design/shaders";
+import {
+  colorPanelsMeta,
+  dotOrbitMeta,
+  godRaysMeta,
+  grainGradientMeta,
+  meshGradientMeta,
+  metaballsMeta,
+  pulsingBorderMeta,
+  simplexNoiseMeta,
+  smokeRingMeta,
+  swirlMeta,
+  voronoiMeta,
+  warpMeta,
+  heatmapMeta,
+  staticMeshGradientMeta,
+  staticRadialGradientMeta
+} from "@paper-design/shaders";
+export {
+  ColorPanels,
+  Dithering,
+  DotGrid,
+  DotOrbit,
+  FlutedGlass,
+  GodRays,
+  GrainGradient,
+  Heatmap,
+  ImageDithering,
+  ImageHalftoneDots,
+  LiquidMetal,
+  MeshGradient,
+  Metaballs,
+  NeuroNoise,
+  PaperTexture,
+  PerlinNoise,
+  PulsingBorder,
+  ShaderMount,
+  SimplexNoise,
+  SmokeRing,
+  Spiral,
+  StaticMeshGradient,
+  StaticRadialGradient,
+  Swirl,
+  Voronoi,
+  Warp,
+  Water,
+  Waves,
+  colorPanelsMeta,
+  colorPanelsPresets,
+  ditheringPresets,
+  dotGridPresets,
+  dotOrbitMeta,
+  dotOrbitPresets,
+  flutedGlassPresets,
+  getShaderColorFromString,
+  godRaysMeta,
+  godRaysPresets,
+  grainGradientMeta,
+  grainGradientPresets,
+  heatmapMeta,
+  heatmapPresets,
+  imageDitheringPresets,
+  imageHalftoneDotsPresets,
+  isPaperShaderElement,
+  liquidMetalPresets,
+  meshGradientMeta,
+  meshGradientPresets,
+  metaballsMeta,
+  metaballsPresets,
+  neuroNoisePresets,
+  paperTexturePresets,
+  perlinNoisePresets,
+  pulsingBorderMeta,
+  pulsingBorderPresets,
+  simplexNoiseMeta,
+  simplexNoisePresets,
+  smokeRingMeta,
+  smokeRingPresets,
+  spiralPresets,
+  staticMeshGradientMeta,
+  staticMeshGradientPresets,
+  staticRadialGradientMeta,
+  staticRadialGradientPresets,
+  swirlMeta,
+  swirlPresets,
+  voronoiMeta,
+  voronoiPresets,
+  warpMeta,
+  warpPresets,
+  waterPresets,
+  wavesPresets
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "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 { 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 { Heatmap, heatmapPresets } from './shaders/heatmap.js';\nexport type { HeatmapProps } from './shaders/heatmap.js';\nexport type { HeatmapUniforms, HeatmapParams } 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 { ImageHalftoneDots, imageHalftoneDotsPresets } from './shaders/image-halftone-dots.js';\nexport type { ImageHalftoneDotsProps } from './shaders/image-halftone-dots.js';\nexport type { ImageHalftoneDotsUniforms, ImageHalftoneDotsParams } 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  heatmapMeta,\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,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,SAAS,sBAAsB;AAIxC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,mBAAmB,gCAAgC;AAI5D,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,EACA;AAAA,OACK;",
+  "names": []
+}

package/dist/shader-mount.d.ts

@@ -0,0 +1,38 @@
+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
+ *
+ * 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 | undefined;
+}
+export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {
+    ref?: React.Ref<PaperShaderElement>;
+    fragmentShader: string;
+    uniforms: ShaderMountUniformsReact;
+    minPixelRatio?: number;
+    maxPixelCount?: number;
+    webGlContextAttributes?: WebGLContextAttributes;
+    /** Inline CSS width style */
+    width?: string | number;
+    /** Inline CSS height style */
+    height?: string | number;
+}
+export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {
+    ref?: React.Ref<PaperShaderElement>;
+    minPixelRatio?: number;
+    maxPixelCount?: number;
+    webGlContextAttributes?: WebGLContextAttributes;
+    /** Inline CSS width style */
+    width?: string | number;
+    /** Inline CSS height style */
+    height?: string | number;
+}
+/**
+ * A React component that mounts a shader and updates its uniforms as the component's props change
+ * 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
+ */
+export declare const ShaderMount: React.FC<ShaderMountProps>;
+export {};

package/dist/shader-mount.js

@@ -0,0 +1,149 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+"use client";
+import { useEffect, useRef, forwardRef, useState } from "react";
+import {
+  ShaderMount as ShaderMountVanilla,
+  getEmptyPixel
+} from "@paper-design/shaders";
+import { useMergeRefs } from "./use-merge-refs.js";
+import { jsx } from "react/jsx-runtime";
+async function processUniforms(uniformsProp) {
+  const processedUniforms = {};
+  const imageLoadPromises = [];
+  const isValidUrl = (url) => {
+    try {
+      if (url.startsWith("/")) return true;
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const isExternalUrl = (url) => {
+    try {
+      if (url.startsWith("/")) return false;
+      const urlObject = new URL(url, window.location.origin);
+      return urlObject.origin !== window.location.origin;
+    } catch {
+      return false;
+    }
+  };
+  Object.entries(uniformsProp).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      if (!value) {
+        processedUniforms[key] = getEmptyPixel();
+        return;
+      }
+      if (!isValidUrl(value)) {
+        console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
+        return;
+      }
+      const imagePromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        if (isExternalUrl(value)) {
+          img.crossOrigin = "anonymous";
+        }
+        img.onload = () => {
+          processedUniforms[key] = img;
+          resolve();
+        };
+        img.onerror = () => {
+          console.error(`Could not set uniforms. Failed to load image at ${value}`);
+          reject();
+        };
+        img.src = value;
+      });
+      imageLoadPromises.push(imagePromise);
+    } else {
+      processedUniforms[key] = value;
+    }
+  });
+  await Promise.all(imageLoadPromises);
+  return processedUniforms;
+}
+const ShaderMount = forwardRef(
+  function ShaderMountImpl({
+    fragmentShader,
+    uniforms: uniformsProp,
+    webGlContextAttributes,
+    speed = 0,
+    frame = 0,
+    width,
+    height,
+    minPixelRatio,
+    maxPixelCount,
+    style,
+    ...divProps
+  }, forwardedRef) {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const divRef = useRef(null);
+    const shaderMountRef = useRef(null);
+    const webGlContextAttributesRef = useRef(webGlContextAttributes);
+    useEffect(() => {
+      const initShader = async () => {
+        const uniforms = await processUniforms(uniformsProp);
+        if (divRef.current && !shaderMountRef.current) {
+          shaderMountRef.current = new ShaderMountVanilla(
+            divRef.current,
+            fragmentShader,
+            uniforms,
+            webGlContextAttributesRef.current,
+            speed,
+            frame,
+            minPixelRatio,
+            maxPixelCount
+          );
+          setIsInitialized(true);
+        }
+      };
+      initShader();
+      return () => {
+        shaderMountRef.current?.dispose();
+        shaderMountRef.current = null;
+      };
+    }, [fragmentShader]);
+    useEffect(() => {
+      let isStale = false;
+      const updateUniforms = async () => {
+        const uniforms = await processUniforms(uniformsProp);
+        if (!isStale) {
+          shaderMountRef.current?.setUniforms(uniforms);
+        }
+      };
+      updateUniforms();
+      return () => {
+        isStale = true;
+      };
+    }, [uniformsProp, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setSpeed(speed);
+    }, [speed, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setMaxPixelCount(maxPixelCount);
+    }, [maxPixelCount, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setMinPixelRatio(minPixelRatio);
+    }, [minPixelRatio, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setFrame(frame);
+    }, [frame, isInitialized]);
+    const mergedRef = useMergeRefs([divRef, forwardedRef]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergedRef,
+        style: width !== void 0 || height !== void 0 ? { width, height, ...style } : style,
+        ...divProps
+      }
+    );
+  }
+);
+ShaderMount.displayName = "ShaderMount";
+export {
+  ShaderMount
+};
+//# sourceMappingURL=shader-mount.js.map

package/dist/shader-mount.js.map

@@ -0,0 +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  getEmptyPixel,\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  /** Inline CSS width style */\n  width?: string | number;\n  /** Inline CSS height style */\n  height?: string | number;\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  /** Inline CSS width style */\n  width?: string | number;\n  /** Inline CSS height style */\n  height?: string | number;\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      // Use a transparent pixel for empty strings\n      if (!value) {\n        processedUniforms[key] = getEmptyPixel();\n        return;\n      }\n\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      width,\n      height,\n      minPixelRatio,\n      maxPixelCount,\n      style,\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    const webGlContextAttributesRef = useRef(webGlContextAttributes);\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            webGlContextAttributesRef.current,\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]);\n\n    // Uniforms\n    useEffect(() => {\n      let isStale = false;\n\n      const updateUniforms = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n\n        if (!isStale) {\n          // We only use the freshest uniforms otherwise we can get into race conditions\n          // if some uniforms (images!) take longer to load in subsequent effect runs.\n          shaderMountRef.current?.setUniforms(uniforms);\n        }\n      };\n\n      updateUniforms();\n\n      return () => {\n        isStale = true;\n      };\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 (\n      <div\n        ref={mergedRef}\n        style={width !== undefined || height !== undefined ? { width, height, ...style } : style}\n        {...divProps}\n      />\n    );\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
+  "mappings": "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",
+  "names": []
+}

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

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