@paper-design/shaders-react 0.0.47 → 0.0.50

package/dist/index.d.ts

@@ -75,6 +75,9 @@ 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 { 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';
+export { colorPanelsMeta, dotOrbitMeta, godRaysMeta, grainGradientMeta, meshGradientMeta, metaballsMeta, pulsingBorderMeta, simplexNoiseMeta, smokeRingMeta, swirlMeta, voronoiMeta, warpMeta, heatmapMeta, staticMeshGradientMeta, staticRadialGradientMeta, } from '@paper-design/shaders';

package/dist/index.js

@@ -32,6 +32,7 @@ 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 { isPaperShaderElement, getShaderColorFromString } from "@paper-design/shaders";
 import {
   colorPanelsMeta,
@@ -46,6 +47,7 @@ import {
   swirlMeta,
   voronoiMeta,
   warpMeta,
+  heatmapMeta,
   staticMeshGradientMeta,
   staticRadialGradientMeta
 } from "@paper-design/shaders";
@@ -57,6 +59,7 @@ export {
   FlutedGlass,
   GodRays,
   GrainGradient,
+  Heatmap,
   ImageDithering,
   LiquidMetal,
   MeshGradient,
@@ -88,6 +91,8 @@ export {
   godRaysPresets,
   grainGradientMeta,
   grainGradientPresets,
+  heatmapMeta,
+  heatmapPresets,
   imageDitheringPresets,
   isPaperShaderElement,
   liquidMetalPresets,

package/dist/index.js.map

@@ -1,7 +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 { 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;",
+  "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 { Heatmap, heatmapPresets } from './shaders/heatmap.js';\nexport type { HeatmapProps } from './shaders/heatmap.js';\nexport type { HeatmapUniforms, HeatmapParams } 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,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,SAAS,sBAAsB;AAIxC,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.js

@@ -98,11 +98,17 @@ const ShaderMount = forwardRef(
       };
     }, [fragmentShader, webGlContextAttributes]);
     useEffect(() => {
+      let isStale = false;
       const updateUniforms = async () => {
         const uniforms = await processUniforms(uniformsProp);
-        shaderMountRef.current?.setUniforms(uniforms);
+        if (!isStale) {
+          shaderMountRef.current?.setUniforms(uniforms);
+        }
       };
       updateUniforms();
+      return () => {
+        isStale = true;
+      };
     }, [uniformsProp, isInitialized]);
     useEffect(() => {
       shaderMountRef.current?.setSpeed(speed);

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/**\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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",
+  "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      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 <div ref={mergedRef} {...divProps} />;\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
+  "mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,OAIV;AACP,SAAS,oBAAoB;AAqLlB;AAxJX,eAAe,gBAAgB,cAAsE;AACnG,QAAM,oBAAoB,CAAC;AAC3B,QAAM,oBAAqC,CAAC;AAE5C,QAAM,aAAa,CAAC,QAAyB;AAC3C,QAAI;AAEF,UAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAEhC,UAAI,IAAI,GAAG;AACX,aAAO;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,QAAyB;AAC9C,QAAI;AACF,UAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAChC,YAAM,YAAY,IAAI,IAAI,KAAK,OAAO,SAAS,MAAM;AACrD,aAAO,UAAU,WAAW,OAAO,SAAS;AAAA,IAC9C,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,QAAQ,YAAY,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACrD,QAAI,OAAO,UAAU,UAAU;AAE7B,UAAI,CAAC,WAAW,KAAK,GAAG;AACtB,gBAAQ,KAAK,YAAY,GAAG,sBAAsB,KAAK,4BAA4B;AACnF;AAAA,MACF;AAEA,YAAM,eAAe,IAAI,QAAc,CAAC,SAAS,WAAW;AAC1D,cAAM,MAAM,IAAI,MAAM;AACtB,YAAI,cAAc,KAAK,GAAG;AACxB,cAAI,cAAc;AAAA,QACpB;AACA,YAAI,SAAS,MAAM;AACjB,4BAAkB,GAAG,IAAI;AACzB,kBAAQ;AAAA,QACV;AACA,YAAI,UAAU,MAAM;AAClB,kBAAQ,MAAM,mDAAmD,KAAK,EAAE;AACxE,iBAAO;AAAA,QACT;AACA,YAAI,MAAM;AAAA,MACZ,CAAC;AACD,wBAAkB,KAAK,YAAY;AAAA,IACrC,OAAO;AACL,wBAAkB,GAAG,IAAI;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,IAAI,iBAAiB;AACnC,SAAO;AACT;AAMO,MAAM,cAA0C;AAAA,EACrD,SAAS,gBACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,UAAM,SAAS,OAA2B,IAAI;AAC9C,UAAM,iBAA6D,OAA2B,IAAI;AAGlG,cAAU,MAAM;AACd,YAAM,aAAa,YAAY;AAC7B,cAAM,WAAW,MAAM,gBAAgB,YAAY;AAEnD,YAAI,OAAO,WAAW,CAAC,eAAe,SAAS;AAC7C,yBAAe,UAAU,IAAI;AAAA,YAC3B,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAEA,2BAAiB,IAAI;AAAA,QACvB;AAAA,MACF;AAEA,iBAAW;AAEX,aAAO,MAAM;AACX,uBAAe,SAAS,QAAQ;AAChC,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC,gBAAgB,sBAAsB,CAAC;AAG3C,cAAU,MAAM;AACd,UAAI,UAAU;AAEd,YAAM,iBAAiB,YAAY;AACjC,cAAM,WAAW,MAAM,gBAAgB,YAAY;AAEnD,YAAI,CAAC,SAAS;AAGZ,yBAAe,SAAS,YAAY,QAAQ;AAAA,QAC9C;AAAA,MACF;AAEA,qBAAe;AAEf,aAAO,MAAM;AACX,kBAAU;AAAA,MACZ;AAAA,IACF,GAAG,CAAC,cAAc,aAAa,CAAC;AAGhC,cAAU,MAAM;AACd,qBAAe,SAAS,SAAS,KAAK;AAAA,IACxC,GAAG,CAAC,OAAO,aAAa,CAAC;AAGzB,cAAU,MAAM;AACd,qBAAe,SAAS,iBAAiB,aAAa;AAAA,IACxD,GAAG,CAAC,eAAe,aAAa,CAAC;AAGjC,cAAU,MAAM;AACd,qBAAe,SAAS,iBAAiB,aAAa;AAAA,IACxD,GAAG,CAAC,eAAe,aAAa,CAAC;AAGjC,cAAU,MAAM;AACd,qBAAe,SAAS,SAAS,KAAK;AAAA,IACxC,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,UAAM,YAAY,aAAa,CAAC,QAAQ,YAAY,CAAC;AACrD,WAAO,oBAAC,SAAI,KAAK,WAAY,GAAG,UAAU;AAAA,EAC5C;AACF;AAEA,YAAY,cAAc;",
   "names": []
 }

package/dist/shaders/heatmap.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type HeatmapParams, type ShaderPreset } from '@paper-design/shaders';
+export interface HeatmapProps extends ShaderComponentProps, HeatmapParams {
+}
+export type HeatmapPreset = ShaderPreset<HeatmapParams>;
+export declare const defaultPreset: HeatmapPreset;
+export declare const sepiaPreset: HeatmapPreset;
+export declare const heatmapPresets: HeatmapPreset[];
+export declare const Heatmap: React.FC<HeatmapProps>;

package/dist/shaders/heatmap.js

@@ -0,0 +1,151 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import React, { memo, useLayoutEffect, useMemo, useState } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import {
+  getShaderColorFromString,
+  heatmapFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  toProcessedHeatmap
+} from "@paper-design/shaders";
+import { preload } from "react-dom";
+import { transparentPixel } from "../transparent-pixel.js";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.75,
+    speed: 1,
+    frame: 0,
+    image: "./heatmap-temporary/logo-pics/apple.svg",
+    contour: 0.5,
+    angle: 0,
+    noise: 0,
+    innerGlow: 0.5,
+    outerGlow: 0.5,
+    colorBack: "#000000",
+    colors: ["#11206a", "#1f3ba2", "#2f63e7", "#6bd7ff", "#ffe679", "#ff991e", "#ff4c00"]
+  }
+};
+const sepiaPreset = {
+  name: "Sepia",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.75,
+    speed: 0.5,
+    frame: 0,
+    image: "./heatmap-temporary/logo-pics/apple.svg",
+    contour: 0.5,
+    angle: 0,
+    noise: 0.75,
+    innerGlow: 0.5,
+    outerGlow: 0.5,
+    colorBack: "#000000",
+    colors: ["#997F45", "#ffffff"]
+  }
+};
+const heatmapPresets = [defaultPreset, sepiaPreset];
+const Heatmap = memo(function HeatmapImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  contour = defaultPreset.params.contour,
+  angle = defaultPreset.params.angle,
+  noise = defaultPreset.params.noise,
+  innerGlow = defaultPreset.params.innerGlow,
+  outerGlow = defaultPreset.params.outerGlow,
+  colorBack = defaultPreset.params.colorBack,
+  colors = defaultPreset.params.colors,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  image = transparentPixel,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  rotation = defaultPreset.params.rotation,
+  scale = defaultPreset.params.scale,
+  worldHeight = defaultPreset.params.worldHeight,
+  worldWidth = defaultPreset.params.worldWidth,
+  ...props
+}) {
+  const [processedImage, setProcessedImage] = useState(transparentPixel);
+  const imageUrl = typeof image === "string" ? image : image.src;
+  preload(imageUrl, { as: "image", crossOrigin: "anonymous", fetchPriority: "high" });
+  useLayoutEffect(() => {
+    if (!imageUrl) {
+      setProcessedImage(transparentPixel);
+      return;
+    }
+    let url;
+    let current = true;
+    toProcessedHeatmap(imageUrl).then((result) => {
+      if (current) {
+        url = URL.createObjectURL(result.blob);
+        setProcessedImage(url);
+      }
+    });
+    return () => {
+      current = false;
+      URL.revokeObjectURL(url);
+    };
+  }, [imageUrl]);
+  const uniforms = useMemo(
+    () => ({
+      // Own uniforms
+      u_image: processedImage,
+      u_contour: contour,
+      u_angle: angle,
+      u_noise: noise,
+      u_innerGlow: innerGlow,
+      u_outerGlow: outerGlow,
+      u_colorBack: getShaderColorFromString(colorBack),
+      u_colors: colors.map(getShaderColorFromString),
+      u_colorsCount: colors.length,
+      // Sizing uniforms
+      u_fit: ShaderFitOptions[fit],
+      u_offsetX: offsetX,
+      u_offsetY: offsetY,
+      u_originX: originX,
+      u_originY: originY,
+      u_rotation: rotation,
+      u_scale: scale,
+      u_worldHeight: worldHeight,
+      u_worldWidth: worldWidth
+    }),
+    [
+      speed,
+      frame,
+      contour,
+      angle,
+      noise,
+      innerGlow,
+      outerGlow,
+      colors,
+      colorBack,
+      processedImage,
+      fit,
+      offsetX,
+      offsetY,
+      originX,
+      originY,
+      rotation,
+      scale,
+      worldHeight,
+      worldWidth
+    ]
+  );
+  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
+});
+export {
+  Heatmap,
+  defaultPreset,
+  heatmapPresets,
+  sepiaPreset
+};
+//# sourceMappingURL=heatmap.js.map

package/dist/shaders/heatmap.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/heatmap.tsx"],
+  "sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  heatmapFragmentShader,\n  ShaderFitOptions,\n  type HeatmapUniforms,\n  type HeatmapParams,\n  type ShaderPreset,\n  defaultObjectSizing,\n  toProcessedHeatmap,\n} from '@paper-design/shaders';\n\nimport { preload } from 'react-dom';\nimport { transparentPixel } from '../transparent-pixel.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {}\n\nexport type HeatmapPreset = ShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 1,\n    frame: 0,\n    image: './heatmap-temporary/logo-pics/apple.svg',\n    contour: 0.5,\n    angle: 0,\n    noise: 0,\n    innerGlow: 0.5,\n    outerGlow: 0.5,\n    colorBack: '#000000',\n    colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n  },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n  name: 'Sepia',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 0.5,\n    frame: 0,\n    image: './heatmap-temporary/logo-pics/apple.svg',\n    contour: 0.5,\n    angle: 0,\n    noise: 0.75,\n    innerGlow: 0.5,\n    outerGlow: 0.5,\n    colorBack: '#000000',\n    colors: ['#997F45', '#ffffff'],\n  },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  contour = defaultPreset.params.contour,\n  angle = defaultPreset.params.angle,\n  noise = defaultPreset.params.noise,\n  innerGlow = defaultPreset.params.innerGlow,\n  outerGlow = defaultPreset.params.outerGlow,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  image = transparentPixel,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\n  worldHeight = defaultPreset.params.worldHeight,\n  worldWidth = defaultPreset.params.worldWidth,\n  ...props\n}: HeatmapProps) {\n  const [processedImage, setProcessedImage] = useState<string>(transparentPixel);\n\n  const imageUrl = typeof image === 'string' ? image : image.src;\n  preload(imageUrl, { as: 'image', crossOrigin: 'anonymous', fetchPriority: 'high' });\n\n  useLayoutEffect(() => {\n    if (!imageUrl) {\n      setProcessedImage(transparentPixel);\n      return;\n    }\n\n    let url: string;\n    let current = true;\n\n    toProcessedHeatmap(imageUrl).then((result) => {\n      if (current) {\n        url = URL.createObjectURL(result.blob);\n        setProcessedImage(url);\n      }\n    });\n\n    return () => {\n      current = false;\n      URL.revokeObjectURL(url);\n    };\n  }, [imageUrl]);\n\n  const uniforms = useMemo(\n    () => ({\n      // Own uniforms\n      u_image: processedImage,\n      u_contour: contour,\n      u_angle: angle,\n      u_noise: noise,\n      u_innerGlow: innerGlow,\n      u_outerGlow: outerGlow,\n      u_colorBack: getShaderColorFromString(colorBack),\n      u_colors: colors.map(getShaderColorFromString),\n      u_colorsCount: colors.length,\n\n      // Sizing uniforms\n      u_fit: ShaderFitOptions[fit],\n      u_offsetX: offsetX,\n      u_offsetY: offsetY,\n      u_originX: originX,\n      u_originY: originY,\n      u_rotation: rotation,\n      u_scale: scale,\n      u_worldHeight: worldHeight,\n      u_worldWidth: worldWidth,\n    }),\n    [\n      speed,\n      frame,\n      contour,\n      angle,\n      noise,\n      innerGlow,\n      outerGlow,\n      colors,\n      colorBack,\n      processedImage,\n      fit,\n      offsetX,\n      offsetY,\n      originX,\n      originY,\n      rotation,\n      scale,\n      worldHeight,\n      worldWidth,\n    ]\n  ) satisfies HeatmapUniforms;\n\n  return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />;\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/transparent-pixel.d.ts

@@ -0,0 +1 @@
+export declare const transparentPixel = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";

package/dist/transparent-pixel.js

@@ -0,0 +1,10 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const transparentPixel = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+export {
+  transparentPixel
+};
+//# sourceMappingURL=transparent-pixel.js.map

package/dist/transparent-pixel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/transparent-pixel.ts"],
+  "sourcesContent": ["export const transparentPixel = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n"],
+  "mappings": ";;;;;AAAO,MAAM,mBAAmB;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.47",
+  "version": "0.0.50",
   "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.47"
+    "@paper-design/shaders": "0.0.50"
   },
   "devDependencies": {
     "@types/react": "19.1.0"