@paper-design/shaders 0.0.73 → 0.0.74

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export { HalftoneDotsTypes, HalftoneDotsGrids, halftoneDotsFragmentShader, type
 /** A halftone CMYK classic algo */
 export { HalftoneCmykTypes, halftoneCmykFragmentShader, type HalftoneCmykParams, type HalftoneCmykUniforms, type HalftoneCmykType, } from './shaders/halftone-cmyk.js';
 /** Animated color fields running around a glassy logo shape */
-export { gemSmokeMeta, gemSmokeFragmentShader, toProcessedGemSmoke, type GemSmokeParams, type GemSmokeUniforms, } from './shaders/gem-smoke.js';
+export { gemSmokeMeta, gemSmokeFragmentShader, toProcessedGemSmoke, GemSmokeShapes, type GemSmokeShape, type GemSmokeParams, type GemSmokeUniforms, } from './shaders/gem-smoke.js';
 export { getShaderColorFromString } from './get-shader-color-from-string.js';
 export { getShaderNoiseTexture } from './get-shader-noise-texture.js';
 export { emptyPixel } from './empty-pixel.js';

package/dist/index.js

@@ -106,7 +106,8 @@ import {
 import {
   gemSmokeMeta,
   gemSmokeFragmentShader,
-  toProcessedGemSmoke
+  toProcessedGemSmoke,
+  GemSmokeShapes
 } from "./shaders/gem-smoke.js";
 import { getShaderColorFromString } from "./get-shader-color-from-string.js";
 import { getShaderNoiseTexture } from "./get-shader-noise-texture.js";
@@ -115,6 +116,7 @@ export {
   DitheringShapes,
   DitheringTypes,
   DotGridShapes,
+  GemSmokeShapes,
   GlassDistortionShapes,
   GlassGridShapes,
   GrainGradientShapes,

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\nexport { ShaderMount, isPaperShaderElement } from './shader-mount.js';\nexport type {\n  PaperShaderElement,\n  ShaderMotionParams,\n  ShaderMountUniforms,\n  ShaderPreset,\n  ImageShaderPreset,\n} from './shader-mount.js';\n\n/** Shader sizing options and uniforms */\nexport {\n  defaultObjectSizing,\n  defaultPatternSizing,\n  ShaderFitOptions,\n  type ShaderFit,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from './shader-sizing.js';\n\n/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient.js';\n\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring.js';\n\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\n\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\n\n/** Static grid pattern made of circles, diamonds, squares or triangles */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid.js';\n\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise.js';\n\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs.js';\n\n/** Animated 3D Perlin noise with exposed controls */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\n\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\n\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp.js';\n\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\n\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\nexport {\n  ditheringFragmentShader,\n  DitheringShapes,\n  DitheringTypes,\n  type DitheringParams,\n  type DitheringUniforms,\n  type DitheringShape,\n  type DitheringType,\n} from './shaders/dithering.js';\n\n/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient.js';\n\n/** Luminous trails of color merging into a glowing gradient frame */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  PulsingBorderAspectRatios,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n  type PulsingBorderAspectRatio,\n} from './shaders/pulsing-border.js';\n\n/** Glowing translucent 3D panels rotating around a central axis */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\nexport {\n  paperTextureFragmentShader,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\nexport {\n  flutedGlassFragmentShader,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type GlassDistortionShape,\n  type GlassGridShape,\n  type FlutedGlassParams,\n  type FlutedGlassUniforms,\n} from './shaders/fluted-glass.js';\n\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  toProcessedLiquidMetal,\n  type LiquidMetalShape,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n} from './shaders/liquid-metal.js';\n\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\nexport {\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n  halftoneDotsFragmentShader,\n  type HalftoneDotsParams,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsType,\n  type HalftoneDotsGrid,\n} from './shaders/halftone-dots.js';\n\n/** A halftone CMYK classic algo */\nexport {\n  HalftoneCmykTypes,\n  halftoneCmykFragmentShader,\n  type HalftoneCmykParams,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykType,\n} from './shaders/halftone-cmyk.js';\n\n/** Animated color fields running around a glassy logo shape */\nexport {\n  gemSmokeMeta,\n  gemSmokeFragmentShader,\n  toProcessedGemSmoke,\n  type GemSmokeParams,\n  type GemSmokeUniforms,\n} from './shaders/gem-smoke.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\nexport { emptyPixel } from './empty-pixel.js';\n"],
-  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAUlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;",
+  "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\nexport { ShaderMount, isPaperShaderElement } from './shader-mount.js';\nexport type {\n  PaperShaderElement,\n  ShaderMotionParams,\n  ShaderMountUniforms,\n  ShaderPreset,\n  ImageShaderPreset,\n} from './shader-mount.js';\n\n/** Shader sizing options and uniforms */\nexport {\n  defaultObjectSizing,\n  defaultPatternSizing,\n  ShaderFitOptions,\n  type ShaderFit,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n} from './shader-sizing.js';\n\n/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\nexport {\n  meshGradientFragmentShader,\n  meshGradientMeta,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n} from './shaders/mesh-gradient.js';\n\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\nexport {\n  smokeRingMeta,\n  smokeRingFragmentShader,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from './shaders/smoke-ring.js';\n\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\n\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\nexport {\n  dotOrbitMeta,\n  dotOrbitFragmentShader,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n} from './shaders/dot-orbit.js';\n\n/** Static grid pattern made of circles, diamonds, squares or triangles */\nexport {\n  dotGridFragmentShader,\n  DotGridShapes,\n  type DotGridShape,\n  type DotGridParams,\n  type DotGridUniforms,\n} from './shaders/dot-grid.js';\n\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\nexport {\n  simplexNoiseMeta,\n  simplexNoiseFragmentShader,\n  type SimplexNoiseParams,\n  type SimplexNoiseUniforms,\n} from './shaders/simplex-noise.js';\n\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\nexport {\n  metaballsMeta,\n  metaballsFragmentShader,\n  type MetaballsParams,\n  type MetaballsUniforms,\n} from './shaders/metaballs.js';\n\n/** Animated 3D Perlin noise with exposed controls */\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\n\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\n\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\n\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\nexport {\n  warpMeta,\n  warpFragmentShader,\n  WarpPatterns,\n  type WarpParams,\n  type WarpUniforms,\n  type WarpPattern,\n} from './shaders/warp.js';\n\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\n\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\n\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\n\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\nexport {\n  ditheringFragmentShader,\n  DitheringShapes,\n  DitheringTypes,\n  type DitheringParams,\n  type DitheringUniforms,\n  type DitheringShape,\n  type DitheringType,\n} from './shaders/dithering.js';\n\n/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\nexport {\n  grainGradientFragmentShader,\n  grainGradientMeta,\n  GrainGradientShapes,\n  type GrainGradientParams,\n  type GrainGradientUniforms,\n  type GrainGradientShape,\n} from './shaders/grain-gradient.js';\n\n/** Luminous trails of color merging into a glowing gradient frame */\nexport {\n  pulsingBorderMeta,\n  pulsingBorderFragmentShader,\n  PulsingBorderAspectRatios,\n  type PulsingBorderParams,\n  type PulsingBorderUniforms,\n  type PulsingBorderAspectRatio,\n} from './shaders/pulsing-border.js';\n\n/** Glowing translucent 3D panels rotating around a central axis */\nexport {\n  colorPanelsFragmentShader,\n  colorPanelsMeta,\n  type ColorPanelsParams,\n  type ColorPanelsUniforms,\n} from './shaders/color-panels.js';\n\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\nexport {\n  staticMeshGradientFragmentShader,\n  staticMeshGradientMeta,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n} from './shaders/static-mesh-gradient.js';\n\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\nexport {\n  staticRadialGradientFragmentShader,\n  staticRadialGradientMeta,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n} from './shaders/static-radial-gradient.js';\n\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\nexport {\n  paperTextureFragmentShader,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from './shaders/paper-texture.js';\n\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\n\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\nexport {\n  flutedGlassFragmentShader,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type GlassDistortionShape,\n  type GlassGridShape,\n  type FlutedGlassParams,\n  type FlutedGlassUniforms,\n} from './shaders/fluted-glass.js';\n\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\nexport {\n  imageDitheringFragmentShader,\n  type ImageDitheringParams,\n  type ImageDitheringUniforms,\n} from './shaders/image-dithering.js';\n\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\nexport {\n  heatmapMeta,\n  heatmapFragmentShader,\n  toProcessedHeatmap,\n  type HeatmapParams,\n  type HeatmapUniforms,\n} from './shaders/heatmap.js';\n\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\nexport {\n  liquidMetalFragmentShader,\n  LiquidMetalShapes,\n  toProcessedLiquidMetal,\n  type LiquidMetalShape,\n  type LiquidMetalParams,\n  type LiquidMetalUniforms,\n} from './shaders/liquid-metal.js';\n\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\nexport {\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n  halftoneDotsFragmentShader,\n  type HalftoneDotsParams,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsType,\n  type HalftoneDotsGrid,\n} from './shaders/halftone-dots.js';\n\n/** A halftone CMYK classic algo */\nexport {\n  HalftoneCmykTypes,\n  halftoneCmykFragmentShader,\n  type HalftoneCmykParams,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykType,\n} from './shaders/halftone-cmyk.js';\n\n/** Animated color fields running around a glassy logo shape */\nexport {\n  gemSmokeMeta,\n  gemSmokeFragmentShader,\n  toProcessedGemSmoke,\n  GemSmokeShapes,\n  type GemSmokeShape,\n  type GemSmokeParams,\n  type GemSmokeUniforms,\n} from './shaders/gem-smoke.js';\n\n// ----- Utils ----- //\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\nexport { emptyPixel } from './empty-pixel.js';\n"],
+  "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAUlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;",
   "names": []
 }

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

@@ -67,6 +67,8 @@ export interface GemSmokeUniforms extends ShaderSizingUniforms {
     u_offset: number;
     u_angle: number;
     u_size: number;
+    u_shape: (typeof GemSmokeShapes)[GemSmokeShape];
+    u_isImage: boolean;
 }
 export interface GemSmokeParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];
@@ -80,4 +82,13 @@ export interface GemSmokeParams extends ShaderSizingParams, ShaderMotionParams {
     offset?: number;
     angle?: number;
     size?: number;
+    shape?: GemSmokeShape;
 }
+export declare const GemSmokeShapes: {
+    readonly none: 0;
+    readonly circle: 1;
+    readonly daisy: 2;
+    readonly diamond: 3;
+    readonly metaballs: 4;
+};
+export type GemSmokeShape = keyof typeof GemSmokeShapes;

package/dist/shaders/gem-smoke.js

@@ -12,6 +12,8 @@ precision mediump float;
 
 in mediump vec2 v_imageUV;
 in mediump vec2 v_objectUV;
+in mediump vec2 v_responsiveUV;
+in mediump vec2 v_responsiveBoxGivenSize;
 out vec4 fragColor;
 
 // Image
@@ -37,6 +39,10 @@ uniform float u_offset;
 uniform float u_angle;
 uniform float u_size;
 
+// Shape controls
+uniform float u_shape;
+uniform bool u_isImage;
+
 ${declarePI}
 ${rotation2}
 
@@ -67,27 +73,96 @@ float sst(float a, float b, float x) {
 void main() {
   float time = u_time;
 
-  // Image sampling (UV scaled inward to account for padding)
-  vec2 imageUV = v_imageUV;
-  imageUV -= .5;
-  imageUV *= .95;
-  imageUV += .5;
-
-  vec2 dudx = dFdx(v_imageUV);
-  vec2 dudy = dFdy(v_imageUV);
-
-  // Blurred image: x = roundness, y = alpha
-  vec2 blurred = gaussBlur9x9RG(u_image, imageUV, dudx, dudy, 10.);
-  float roundness = 1. - blurred.x;
-  vec2 texelA = 1.0 / vec2(textureSize(u_image, 0));
-  float imgAlpha = 0.0;
-  const float k3[3] = float[3](1.0, 2.0, 1.0);
-  for (int j = -1; j <= 1; ++j) {
-    for (int i = -1; i <= 1; ++i) {
-      imgAlpha += k3[i + 1] * k3[j + 1] * texture(u_image, imageUV + vec2(float(i) * texelA.x, float(j) * texelA.y)).g;
+  float roundness = 0.;
+  float imgAlpha = 0.;
+
+  if (u_isImage == true) {
+    // Image sampling (UV scaled inward to account for padding)
+    vec2 imageUV = v_imageUV;
+    imageUV -= .5;
+    imageUV *= .95;
+    imageUV += .5;
+
+    vec2 dudx = dFdx(v_imageUV);
+    vec2 dudy = dFdy(v_imageUV);
+
+    // Blurred image: x = roundness, y = alpha
+    vec2 blurred = gaussBlur9x9RG(u_image, imageUV, dudx, dudy, 10.);
+    roundness = 1. - blurred.x;
+    vec2 texelA = 1.0 / vec2(textureSize(u_image, 0));
+    const float k3[3] = float[3](1.0, 2.0, 1.0);
+    for (int j = -1; j <= 1; ++j) {
+      for (int i = -1; i <= 1; ++i) {
+        imgAlpha += k3[i + 1] * k3[j + 1] * texture(u_image, imageUV + vec2(float(i) * texelA.x, float(j) * texelA.y)).g;
+      }
+    }
+    imgAlpha /= 16.0;
+  } else {
+    vec2 uv = v_objectUV + .5;
+    uv.y = 1. - uv.y;
+    float edge = 0.;
+
+    if (u_shape < 1.) {
+      // full-fill on canvas
+      vec2 borderUV = v_responsiveUV + .5;
+      vec2 mask = min(borderUV, 1. - borderUV);
+      vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5));
+      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
+      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
+      maskX = pow(maskX, .25);
+      maskY = pow(maskY, .25);
+      edge = clamp(1. - maskX * maskY, 0., 1.);
+    } else if (u_shape < 2.) {
+      // circle
+      vec2 shapeUV = uv - .5;
+      shapeUV *= .67;
+      edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
+    } else if (u_shape < 3.) {
+      // daisy
+      vec2 shapeUV = uv - .5;
+      shapeUV *= 1.68;
+
+      float r = length(shapeUV) * 2.;
+      float a = atan(shapeUV.y, shapeUV.x) + .2;
+      r *= (1. + .05 * sin(3. * a + 2. * time));
+      float f = abs(cos(a * 3.));
+      edge = smoothstep(f, f + .7, r);
+      edge *= edge;
+    } else if (u_shape < 4.) {
+      // diamond
+      vec2 shapeUV = uv - .5;
+      shapeUV = rotate(shapeUV, .25 * PI);
+      shapeUV *= 1.42;
+      shapeUV += .5;
+      vec2 mask = min(shapeUV, 1. - shapeUV);
+      vec2 pixel_thickness = vec2(.15);
+      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
+      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
+      maskX = pow(maskX, .25);
+      maskY = pow(maskY, .25);
+      edge = clamp(1. - maskX * maskY, 0., 1.);
+    } else if (u_shape < 5.) {
+      // metaballs
+      vec2 shapeUV = uv - .5;
+      shapeUV *= 1.3;
+      edge = 0.;
+      for (int i = 0; i < 5; i++) {
+        float fi = float(i);
+        float speed = 1.5 + 2./3. * sin(fi * 12.345);
+        float angle = -fi * 1.5;
+        vec2 dir1 = vec2(cos(angle), sin(angle));
+        vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));
+        vec2 traj = .4 * (dir1 * sin(time * speed + fi * 1.23) + dir2 * cos(time * (speed * 0.7) + fi * 2.17));
+        float d = length(shapeUV + traj);
+        edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
+      }
+      edge = 1. - smoothstep(.65, .9, edge);
+      edge = pow(edge, 4.);
     }
+
+    imgAlpha = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);
+    roundness = 1. - edge;
   }
-  imgAlpha /= 16.0;
 
 // Smoke UV setup
   vec2 smokeUV = v_objectUV;
@@ -493,7 +568,15 @@ function solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height)
   }
   return u;
 }
+const GemSmokeShapes = {
+  none: 0,
+  circle: 1,
+  daisy: 2,
+  diamond: 3,
+  metaballs: 4
+};
 export {
+  GemSmokeShapes,
   POISSON_CONFIG_OPTIMIZED,
   gemSmokeFragmentShader,
   gemSmokeMeta,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/gem-smoke.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI } from '../shader-utils.js';\n\nexport const gemSmokeMeta = {\n  maxColorCount: 6,\n} as const;\n\n/**\n * Animated color fields placed over uploaded logo shape; gives the illusion of smoky noise\n * behind the glassy shape.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_image (sampler2D): Pre-processed source image texture (R = edge gradient, G = alpha)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colors (vec4[]): Up to 6 smoke colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_colorBack (vec4): Background color in RGBA\n * - u_innerDistortion (float): Power of smoke distortion inside the input shape (0 to 1)\n * - u_outerDistortion (float): Power of smoke distortion outside the input shape (0 to 1)\n * - u_outerGlow (float): Visibility of smoke shape outside the input shape (0 to 1)\n * - u_innerGlow (float): Visibility of smoke shape inside the input shape (0 to 1)\n * - u_colorInner (vec4): Additional color inside the input shape, mixing with smoke (RGBA)\n * - u_offset (float): Vertical offset of smoke inside the shape (-1 to 1)\n * - u_angle (float): Smoke direction in degrees (0 to 360)\n * - u_size (float): Size of smoke shape relative to the image box (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n * - v_objectUV (vec2): Normalized UV coordinates with scale, rotation, and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n *\n */\n\n// language=GLSL\nexport const gemSmokeFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nin mediump vec2 v_imageUV;\nin mediump vec2 v_objectUV;\nout vec4 fragColor;\n\n// Image\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\n// Canvas\nuniform vec2 u_resolution;\nuniform float u_time;\n\n// Colors\nuniform vec4 u_colors[${gemSmokeMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\n\n// Effect controls\nuniform float u_innerDistortion;\nuniform float u_outerDistortion;\nuniform float u_outerGlow;\nuniform float u_innerGlow;\nuniform float u_offset;\nuniform float u_angle;\nuniform float u_size;\n\n${ declarePI }\n${ rotation2 }\n\n// 9x9 Gaussian blur on R and G channels\nvec2 gaussBlur9x9RG(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius) {\n  vec2 texel = 1.0 / vec2(textureSize(tex, 0));\n  vec2 r = max(radius, 0.0) * texel;\n  // Pascal's row 8: sum = 256, 2D norm = 65536\n  const float k[9] = float[9](1.0, 8.0, 28.0, 56.0, 70.0, 56.0, 28.0, 8.0, 1.0);\n  vec2 sum = vec2(0.0);\n\n  for (int j = -4; j <= 4; ++j) {\n    float wy = k[j + 4];\n    for (int i = -4; i <= 4; ++i) {\n      float w = k[i + 4] * wy;\n      vec2 off = vec2(float(i) * r.x, float(j) * r.y);\n      sum += w * texture(tex, uv + off).rg;\n    }\n  }\n\n  return sum / 65536.0;\n}\n\nfloat sst(float a, float b, float x) {\n  return smoothstep(a, b, x);\n}\n\nvoid main() {\n  float time = u_time;\n\n  // Image sampling (UV scaled inward to account for padding)\n  vec2 imageUV = v_imageUV;\n  imageUV -= .5;\n  imageUV *= .95;\n  imageUV += .5;\n\n  vec2 dudx = dFdx(v_imageUV);\n  vec2 dudy = dFdy(v_imageUV);\n\n  // Blurred image: x = roundness, y = alpha\n  vec2 blurred = gaussBlur9x9RG(u_image, imageUV, dudx, dudy, 10.);\n  float roundness = 1. - blurred.x;\n  vec2 texelA = 1.0 / vec2(textureSize(u_image, 0));\n  float imgAlpha = 0.0;\n  const float k3[3] = float[3](1.0, 2.0, 1.0);\n  for (int j = -1; j <= 1; ++j) {\n    for (int i = -1; i <= 1; ++i) {\n      imgAlpha += k3[i + 1] * k3[j + 1] * texture(u_image, imageUV + vec2(float(i) * texelA.x, float(j) * texelA.y)).g;\n    }\n  }\n  imgAlpha /= 16.0;\n\n// Smoke UV setup\n  vec2 smokeUV = v_objectUV;\n  smokeUV = rotate(smokeUV, u_angle * PI / 180.);\n  smokeUV *= mix(4., 1., u_size);\n\n  // Two swirl paths: inner (shape-masked) and outer (free), each with independent distortion\n  vec2 innerUV = smokeUV;\n  vec2 outerUV = smokeUV;\n\n  // Vertical displacement \u2014 applied independently to inner and outer\n  innerUV.y += u_innerDistortion * (1. - sst(0., 1., length(.4 * innerUV)));\n  innerUV.y -= .4 * u_innerDistortion;\n  innerUV.y += .7 * u_offset * roundness;\n\n  outerUV.y += u_outerDistortion * (1. - sst(0., 1., length(.4 * outerUV)));\n  outerUV.y -= .4 * u_outerDistortion;\n\n  float innerSwirl = u_innerDistortion * roundness;\n  float outerSwirl = u_outerDistortion;\n\n  for (int i = 1; i < 5; i++) {\n    float fi = float(i);\n\n    float stretchIn = max(length(dFdx(innerUV)), length(dFdy(innerUV)));\n    float dampenIn = 1. / (1. + stretchIn * 8.);\n    float sIn = innerSwirl * dampenIn;\n    innerUV.x += sIn / fi * cos(time + fi * 2.9 * innerUV.y);\n    innerUV.y += sIn / fi * cos(time + fi * 1.5 * innerUV.x);\n\n    float stretchOut = max(length(dFdx(outerUV)), length(dFdy(outerUV)));\n    float dampenOut = 1. / (1. + stretchOut * 8.);\n    float sOut = outerSwirl * dampenOut;\n    outerUV.x += sOut / fi * cos(time + fi * 2.9 * outerUV.y);\n    outerUV.y += sOut / fi * cos(time + fi * 1.5 * outerUV.x);\n  }\n\n  // Smoke shapes from swirl fields\n  float innerShape = exp(-1.5 * dot(innerUV, innerUV));\n  float outerShape = exp(-1.5 * dot(outerUV, outerUV));\n\n  // Visibility masks\n  float outerMask = pow(u_outerGlow, 2.) * (1. - imgAlpha);\n  float innerMask = (.01 + .99 * u_innerGlow) * imgAlpha;\n\n  innerShape *= innerMask;\n  outerShape *= outerMask;\n\n  // Color gradient\n  float mixer = (innerShape + outerShape) * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float smokeMask = 0.;\n  for (int i = 1; i < ${gemSmokeMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = sst(0., 1., clamp(mixer - float(i - 1), 0., 1.));\n    if (i == 1) smokeMask = m;\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  // Compositing (premultiplied alpha, front-to-back)\n  vec3 color = gradient.rgb * smokeMask;\n  float opacity = gradient.a * smokeMask;\n\n  float innerOpacity = u_colorInner.a * imgAlpha;\n  vec3 innerColor = u_colorInner.rgb * innerOpacity;\n  color += innerColor * (1.0 - opacity);\n  opacity += innerOpacity * (1.0 - opacity);\n\n  vec3 backColor = u_colorBack.rgb * u_colorBack.a;\n  color += backColor * (1.0 - opacity);\n  opacity += u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\n// Configuration for Poisson solver\nexport const POISSON_CONFIG_OPTIMIZED = {\n  measurePerformance: false, // Set to true to see performance metrics\n  workingSize: 512, // Size to solve Poisson at (will upscale to original size)\n  iterations: 32, // SOR converges ~2-20x faster than standard Gauss-Seidel\n};\n\n// Precomputed pixel data for sparse processing\ninterface SparsePixelData {\n  interiorPixels: Uint32Array; // Indices of interior pixels\n  boundaryPixels: Uint32Array; // Indices of boundary pixels\n  pixelCount: number;\n  // Neighbor indices for each interior pixel (4 neighbors per pixel)\n  // Layout: [east, west, north, south] for each pixel\n  neighborIndices: Int32Array;\n}\n\nexport function toProcessedGemSmoke(file: File | string): Promise<{ imageData: ImageData; pngBlob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  const isBlob = typeof file === 'string' && file.startsWith('blob:');\n\n  return new Promise((resolve, reject) => {\n    if (!file || !ctx) {\n      reject(new Error('Invalid file or canvas context'));\n      return;\n    }\n\n    const blobContentTypePromise = isBlob && fetch(file).then((res) => res.headers.get('Content-Type'));\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    const totalStartTime = performance.now();\n\n    img.onload = async () => {\n      // Force SVG to load at a high fidelity size if it's an SVG\n      let isSVG;\n\n      const blobContentType = await blobContentTypePromise;\n\n      if (blobContentType) {\n        isSVG = blobContentType === 'image/svg+xml';\n      } else if (typeof file === 'string') {\n        isSVG = file.endsWith('.svg') || file.startsWith('data:image/svg+xml');\n      } else {\n        isSVG = file.type === 'image/svg+xml';\n      }\n\n      let originalWidth = img.width || img.naturalWidth;\n      let originalHeight = img.height || img.naturalHeight;\n\n      if (isSVG) {\n        // Scale SVG to max dimension while preserving aspect ratio\n        const svgMaxSize = 4096;\n        const aspectRatio = originalWidth / originalHeight;\n\n        if (originalWidth > originalHeight) {\n          originalWidth = svgMaxSize;\n          originalHeight = svgMaxSize / aspectRatio;\n        } else {\n          originalHeight = svgMaxSize;\n          originalWidth = svgMaxSize * aspectRatio;\n        }\n\n        img.width = originalWidth;\n        img.height = originalHeight;\n      }\n\n      // Always scale to working resolution for consistency\n      const minDimension = Math.min(originalWidth, originalHeight);\n      const targetSize = POISSON_CONFIG_OPTIMIZED.workingSize;\n\n      // Calculate scale to fit within workingSize\n      const scaleFactor = targetSize / minDimension;\n      const width = Math.round(originalWidth * scaleFactor);\n      const height = Math.round(originalHeight * scaleFactor);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Processing Mode]`);\n        console.log(`  Original: ${originalWidth}\u00D7${originalHeight}`);\n        console.log(`  Working: ${width}\u00D7${height} (${(scaleFactor * 100).toFixed(1)}% scale)`);\n        if (scaleFactor < 1) {\n          console.log(`  Speedup: ~${Math.round(1 / (scaleFactor * scaleFactor))}\u00D7`);\n        }\n      }\n\n      canvas.width = originalWidth;\n      canvas.height = originalHeight;\n\n      const paddingSize = 0.025;\n      const padX = Math.ceil(width * paddingSize);\n      const padY = Math.ceil(height * paddingSize);\n      const imgW = width - 2 * padX;\n      const imgH = height - 2 * padY;\n\n      // \u2500\u2500 1. Shape canvas (working res): image centered with padding \u2500\u2500\n      const shapeCanvas = document.createElement('canvas');\n      shapeCanvas.width = width;\n      shapeCanvas.height = height;\n\n      const shapeCtx = shapeCanvas.getContext('2d')!;\n      shapeCtx.drawImage(img, padX, padY, imgW, imgH);\n\n      // 1) Build optimized masks using TypedArrays\n      const startMask = performance.now();\n\n      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);\n      const data = shapeImageData.data;\n\n      // Use Uint8Array for masks (1 byte per pixel vs 8+ bytes for boolean array)\n      const shapeMask = new Uint8Array(width * height);\n      const boundaryMask = new Uint8Array(width * height);\n\n      // First pass: identify shape pixels\n      let shapePixelCount = 0;\n      for (let i = 0, idx = 0; i < data.length; i += 4, idx++) {\n        const a = data[i + 3];\n        const isShape = a === 0 ? 0 : 1;\n        shapeMask[idx] = isShape;\n        shapePixelCount += isShape;\n      }\n\n      // 2) Optimized boundary detection using sparse approach\n      // Only check shape pixels, not all pixels\n      const boundaryIndices: number[] = [];\n      const interiorIndices: number[] = [];\n\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          if (!shapeMask[idx]) continue;\n\n          // Check if pixel is on boundary (optimized: early exit)\n          let isBoundary = false;\n\n          // Check 4-connected neighbors first (most common case)\n          if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {\n            isBoundary = true;\n          } else {\n            // Check all 8 neighbors (including diagonals) for comprehensive boundary detection\n            isBoundary =\n              !shapeMask[idx - 1] || // left\n              !shapeMask[idx + 1] || // right\n              !shapeMask[idx - width] || // top\n              !shapeMask[idx + width] || // bottom\n              !shapeMask[idx - width - 1] || // top-left\n              !shapeMask[idx - width + 1] || // top-right\n              !shapeMask[idx + width - 1] || // bottom-left\n              !shapeMask[idx + width + 1]; // bottom-right\n          }\n\n          if (isBoundary) {\n            boundaryMask[idx] = 1;\n            boundaryIndices.push(idx);\n          } else {\n            interiorIndices.push(idx);\n          }\n        }\n      }\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Mask Building] Time: ${(performance.now() - startMask).toFixed(2)}ms`);\n        console.log(\n          `  Shape pixels: ${shapePixelCount} / ${width * height} (${((shapePixelCount / (width * height)) * 100).toFixed(1)}%)`\n        );\n        console.log(`  Interior pixels: ${interiorIndices.length}`);\n        console.log(`  Boundary pixels: ${boundaryIndices.length}`);\n      }\n\n      // 3) Precompute sparse data structure for solver\n      const sparseData = buildSparseData(\n        shapeMask,\n        boundaryMask,\n        new Uint32Array(interiorIndices),\n        new Uint32Array(boundaryIndices),\n        width,\n        height\n      );\n\n      // 4) Solve Poisson equation with optimized sparse solver\n      const startSolve = performance.now();\n      const u = solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Poisson Solve] Time: ${(performance.now() - startSolve).toFixed(2)}ms`);\n      }\n\n      // 5) Generate output image\n      let maxVal = 0;\n      let finalImageData: ImageData;\n\n      // Only check shape pixels for max value\n      for (let i = 0; i < interiorIndices.length; i++) {\n        const idx = interiorIndices[i]!;\n        if (u[idx]! > maxVal) maxVal = u[idx]!;\n      }\n\n      // Create roundness image at working resolution\n      const tempCanvas = document.createElement('canvas');\n      tempCanvas.width = width;\n      tempCanvas.height = height;\n      const tempCtx = tempCanvas.getContext('2d')!;\n\n      const tempImg = tempCtx.createImageData(width, height);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          const px = idx * 4;\n\n          if (!shapeMask[idx]) {\n            tempImg.data[px] = 255;\n            tempImg.data[px + 1] = 255;\n            tempImg.data[px + 2] = 255;\n            tempImg.data[px + 3] = 0; // Alpha = 0 for background\n          } else {\n            const poissonRatio = u[idx]! / maxVal;\n            let gray = 255 * (1 - poissonRatio);\n            tempImg.data[px] = gray;\n            tempImg.data[px + 1] = gray;\n            tempImg.data[px + 2] = gray;\n            tempImg.data[px + 3] = 255; // Alpha = 255 for shape\n          }\n        }\n      }\n      tempCtx.putImageData(tempImg, 0, 0);\n\n      // Upscale to original resolution with smooth interpolation\n      ctx.imageSmoothingEnabled = true;\n      ctx.imageSmoothingQuality = 'high';\n      ctx.drawImage(tempCanvas, 0, 0, width, height, 0, 0, originalWidth, originalHeight);\n\n      // Now get the upscaled image data for final output\n      const outImg = ctx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Re-apply edges from original resolution with anti-aliasing\n      // This ensures edges are pixel-perfect while roundness is smooth\n      const origPadX = Math.ceil(originalWidth * paddingSize);\n      const origPadY = Math.ceil(originalHeight * paddingSize);\n      const originalCanvas = document.createElement('canvas');\n      originalCanvas.width = originalWidth;\n      originalCanvas.height = originalHeight;\n      const originalCtx = originalCanvas.getContext('2d')!;\n      originalCtx.drawImage(img, origPadX, origPadY, originalWidth - 2 * origPadX, originalHeight - 2 * origPadY);\n      const originalData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Process each pixel: Red channel = roundness, Alpha channel = original alpha\n      for (let i = 0; i < outImg.data.length; i += 4) {\n        const a = originalData.data[i + 3]!;\n        // Use only alpha to determine background vs shape\n        const upscaledAlpha = outImg.data[i + 3]!;\n        if (a === 0) {\n          // Background pixel\n          outImg.data[i] = 255;\n          outImg.data[i + 1] = 0;\n        } else {\n          // Red channel carries the roundness\n          // Check if upscale missed this pixel by looking at alpha channel\n          // If upscaled alpha is 0, the low-res version thought this was background\n          outImg.data[i] = upscaledAlpha === 0 ? 0 : outImg.data[i]!; // roundness or 0\n          outImg.data[i + 1] = a; // original alpha\n        }\n\n        // Unused channels fixed\n        outImg.data[i + 2] = 255;\n        outImg.data[i + 3] = 255;\n      }\n\n      ctx.putImageData(outImg, 0, 0);\n      finalImageData = outImg;\n      canvas.toBlob((blob) => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n\n        if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n          const totalTime = performance.now() - totalStartTime;\n          console.log(`[Total Processing Time] ${totalTime.toFixed(2)}ms`);\n          if (scaleFactor < 1) {\n            const estimatedFullResTime = totalTime * Math.pow((originalWidth * originalHeight) / (width * height), 1.5);\n            console.log(`[Estimated time at full resolution] ~${estimatedFullResTime.toFixed(0)}ms`);\n            console.log(\n              `[Time saved] ~${(estimatedFullResTime - totalTime).toFixed(0)}ms (${Math.round(estimatedFullResTime / totalTime)}\u00D7 faster)`\n            );\n          }\n        }\n\n        resolve({\n          imageData: finalImageData,\n          pngBlob: blob,\n        });\n      }, 'image/png');\n    };\n\n    img.onerror = () => reject(new Error('Failed to load image'));\n    img.src = typeof file === 'string' ? file : URL.createObjectURL(file);\n  });\n}\n\nfunction buildSparseData(\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  interiorPixels: Uint32Array,\n  boundaryPixels: Uint32Array,\n  width: number,\n  height: number\n): SparsePixelData {\n  const pixelCount = interiorPixels.length;\n\n  // Build neighbor indices for sparse processing\n  // For each interior pixel, store indices of its 4 neighbors\n  // Use -1 for out-of-bounds or non-shape neighbors\n  const neighborIndices = new Int32Array(pixelCount * 4);\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    // East neighbor\n    neighborIndices[i * 4 + 0] = x < width - 1 && shapeMask[idx + 1] ? idx + 1 : -1;\n    // West neighbor\n    neighborIndices[i * 4 + 1] = x > 0 && shapeMask[idx - 1] ? idx - 1 : -1;\n    // North neighbor\n    neighborIndices[i * 4 + 2] = y > 0 && shapeMask[idx - width] ? idx - width : -1;\n    // South neighbor\n    neighborIndices[i * 4 + 3] = y < height - 1 && shapeMask[idx + width] ? idx + width : -1;\n  }\n\n  return {\n    interiorPixels,\n    boundaryPixels,\n    pixelCount,\n    neighborIndices,\n  };\n}\n\nfunction solvePoissonSparse(\n  sparseData: SparsePixelData,\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  width: number,\n  height: number\n): Float32Array {\n  // This controls how smooth the falloff roundness will be and extend into the shape\n  const ITERATIONS = POISSON_CONFIG_OPTIMIZED.iterations;\n\n  // Keep C constant - only iterations control roundness spread\n  const C = 0.01;\n\n  const u = new Float32Array(width * height);\n  const { interiorPixels, neighborIndices, pixelCount } = sparseData;\n\n  // Performance tracking\n  const startTime = performance.now();\n\n  // Red-Black SOR for better symmetry with fewer iterations\n  // omega between 1.8-1.95 typically gives best convergence for Poisson\n  const omega = 1.9;\n\n  // Pre-classify pixels as red or black for efficient processing\n  const redPixels: number[] = [];\n  const blackPixels: number[] = [];\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    if ((x + y) % 2 === 0) {\n      redPixels.push(i);\n    } else {\n      blackPixels.push(i);\n    }\n  }\n\n  for (let iter = 0; iter < ITERATIONS; iter++) {\n    // Red pass: update red pixels\n    for (const i of redPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n\n    // Black pass: update black pixels\n    for (const i of blackPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n  }\n\n  // Jacobi smoothing passes to remove Red-Black checkerboard artifacts\n  const tmp = new Float32Array(width * height);\n  for (let smooth = 0; smooth < 3; smooth++) {\n    tmp.set(u);\n    for (let i = 0; i < pixelCount; i++) {\n      const idx = interiorPixels[i]!;\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      let sum = 0;\n      let count = 0;\n      if (eastIdx >= 0) { sum += tmp[eastIdx]!; count++; }\n      if (westIdx >= 0) { sum += tmp[westIdx]!; count++; }\n      if (northIdx >= 0) { sum += tmp[northIdx]!; count++; }\n      if (southIdx >= 0) { sum += tmp[southIdx]!; count++; }\n\n      u[idx] = count > 0 ? (tmp[idx]! + sum / count) * 0.5 : tmp[idx]!;\n    }\n  }\n\n  if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n    const elapsed = performance.now() - startTime;\n\n    console.log(`[Optimized Poisson Solver (SOR \u03C9=${omega})]`);\n    console.log(`  Working size: ${width}\u00D7${height}`);\n    console.log(`  Iterations: ${ITERATIONS}`);\n    console.log(`  Time: ${elapsed.toFixed(2)}ms`);\n    console.log(`  Interior pixels processed: ${pixelCount}`);\n    console.log(`  Speed: ${((ITERATIONS * pixelCount) / (elapsed * 1000)).toFixed(2)} Mpixels/sec`);\n  }\n\n  return u;\n}\n\nexport interface GemSmokeUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_image: HTMLImageElement | string | undefined;\n  u_innerDistortion: number;\n  u_outerDistortion: number;\n  u_outerGlow: number;\n  u_innerGlow: number;\n  u_colorInner: [number, number, number, number];\n  u_offset: number;\n  u_angle: number;\n  u_size: number;\n}\n\nexport interface GemSmokeParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  image?: HTMLImageElement | string | undefined;\n  innerDistortion?: number;\n  outerDistortion?: number;\n  outerGlow?: number;\n  innerGlow?: number;\n  colorInner?: string;\n  offset?: number;\n  angle?: number;\n  size?: number;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport type { ShaderSizingParams, ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI } from '../shader-utils.js';\n\nexport const gemSmokeMeta = {\n  maxColorCount: 6,\n} as const;\n\n/**\n * Animated color fields placed over uploaded logo shape; gives the illusion of smoky noise\n * behind the glassy shape.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_image (sampler2D): Pre-processed source image texture (R = edge gradient, G = alpha)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colors (vec4[]): Up to 6 smoke colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_colorBack (vec4): Background color in RGBA\n * - u_innerDistortion (float): Power of smoke distortion inside the input shape (0 to 1)\n * - u_outerDistortion (float): Power of smoke distortion outside the input shape (0 to 1)\n * - u_outerGlow (float): Visibility of smoke shape outside the input shape (0 to 1)\n * - u_innerGlow (float): Visibility of smoke shape inside the input shape (0 to 1)\n * - u_colorInner (vec4): Additional color inside the input shape, mixing with smoke (RGBA)\n * - u_offset (float): Vertical offset of smoke inside the shape (-1 to 1)\n * - u_angle (float): Smoke direction in degrees (0 to 360)\n * - u_size (float): Size of smoke shape relative to the image box (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n * - v_objectUV (vec2): Normalized UV coordinates with scale, rotation, and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n *\n */\n\n// language=GLSL\nexport const gemSmokeFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nin mediump vec2 v_imageUV;\nin mediump vec2 v_objectUV;\nin mediump vec2 v_responsiveUV;\nin mediump vec2 v_responsiveBoxGivenSize;\nout vec4 fragColor;\n\n// Image\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\n// Canvas\nuniform vec2 u_resolution;\nuniform float u_time;\n\n// Colors\nuniform vec4 u_colors[${gemSmokeMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\n\n// Effect controls\nuniform float u_innerDistortion;\nuniform float u_outerDistortion;\nuniform float u_outerGlow;\nuniform float u_innerGlow;\nuniform float u_offset;\nuniform float u_angle;\nuniform float u_size;\n\n// Shape controls\nuniform float u_shape;\nuniform bool u_isImage;\n\n${ declarePI }\n${ rotation2 }\n\n// 9x9 Gaussian blur on R and G channels\nvec2 gaussBlur9x9RG(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius) {\n  vec2 texel = 1.0 / vec2(textureSize(tex, 0));\n  vec2 r = max(radius, 0.0) * texel;\n  // Pascal's row 8: sum = 256, 2D norm = 65536\n  const float k[9] = float[9](1.0, 8.0, 28.0, 56.0, 70.0, 56.0, 28.0, 8.0, 1.0);\n  vec2 sum = vec2(0.0);\n\n  for (int j = -4; j <= 4; ++j) {\n    float wy = k[j + 4];\n    for (int i = -4; i <= 4; ++i) {\n      float w = k[i + 4] * wy;\n      vec2 off = vec2(float(i) * r.x, float(j) * r.y);\n      sum += w * texture(tex, uv + off).rg;\n    }\n  }\n\n  return sum / 65536.0;\n}\n\nfloat sst(float a, float b, float x) {\n  return smoothstep(a, b, x);\n}\n\nvoid main() {\n  float time = u_time;\n\n  float roundness = 0.;\n  float imgAlpha = 0.;\n\n  if (u_isImage == true) {\n    // Image sampling (UV scaled inward to account for padding)\n    vec2 imageUV = v_imageUV;\n    imageUV -= .5;\n    imageUV *= .95;\n    imageUV += .5;\n\n    vec2 dudx = dFdx(v_imageUV);\n    vec2 dudy = dFdy(v_imageUV);\n\n    // Blurred image: x = roundness, y = alpha\n    vec2 blurred = gaussBlur9x9RG(u_image, imageUV, dudx, dudy, 10.);\n    roundness = 1. - blurred.x;\n    vec2 texelA = 1.0 / vec2(textureSize(u_image, 0));\n    const float k3[3] = float[3](1.0, 2.0, 1.0);\n    for (int j = -1; j <= 1; ++j) {\n      for (int i = -1; i <= 1; ++i) {\n        imgAlpha += k3[i + 1] * k3[j + 1] * texture(u_image, imageUV + vec2(float(i) * texelA.x, float(j) * texelA.y)).g;\n      }\n    }\n    imgAlpha /= 16.0;\n  } else {\n    vec2 uv = v_objectUV + .5;\n    uv.y = 1. - uv.y;\n    float edge = 0.;\n\n    if (u_shape < 1.) {\n      // full-fill on canvas\n      vec2 borderUV = v_responsiveUV + .5;\n      vec2 mask = min(borderUV, 1. - borderUV);\n      vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5));\n      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);\n      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);\n      maskX = pow(maskX, .25);\n      maskY = pow(maskY, .25);\n      edge = clamp(1. - maskX * maskY, 0., 1.);\n    } else if (u_shape < 2.) {\n      // circle\n      vec2 shapeUV = uv - .5;\n      shapeUV *= .67;\n      edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n    } else if (u_shape < 3.) {\n      // daisy\n      vec2 shapeUV = uv - .5;\n      shapeUV *= 1.68;\n\n      float r = length(shapeUV) * 2.;\n      float a = atan(shapeUV.y, shapeUV.x) + .2;\n      r *= (1. + .05 * sin(3. * a + 2. * time));\n      float f = abs(cos(a * 3.));\n      edge = smoothstep(f, f + .7, r);\n      edge *= edge;\n    } else if (u_shape < 4.) {\n      // diamond\n      vec2 shapeUV = uv - .5;\n      shapeUV = rotate(shapeUV, .25 * PI);\n      shapeUV *= 1.42;\n      shapeUV += .5;\n      vec2 mask = min(shapeUV, 1. - shapeUV);\n      vec2 pixel_thickness = vec2(.15);\n      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);\n      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);\n      maskX = pow(maskX, .25);\n      maskY = pow(maskY, .25);\n      edge = clamp(1. - maskX * maskY, 0., 1.);\n    } else if (u_shape < 5.) {\n      // metaballs\n      vec2 shapeUV = uv - .5;\n      shapeUV *= 1.3;\n      edge = 0.;\n      for (int i = 0; i < 5; i++) {\n        float fi = float(i);\n        float speed = 1.5 + 2./3. * sin(fi * 12.345);\n        float angle = -fi * 1.5;\n        vec2 dir1 = vec2(cos(angle), sin(angle));\n        vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n        vec2 traj = .4 * (dir1 * sin(time * speed + fi * 1.23) + dir2 * cos(time * (speed * 0.7) + fi * 2.17));\n        float d = length(shapeUV + traj);\n        edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n      }\n      edge = 1. - smoothstep(.65, .9, edge);\n      edge = pow(edge, 4.);\n    }\n\n    imgAlpha = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);\n    roundness = 1. - edge;\n  }\n\n// Smoke UV setup\n  vec2 smokeUV = v_objectUV;\n  smokeUV = rotate(smokeUV, u_angle * PI / 180.);\n  smokeUV *= mix(4., 1., u_size);\n\n  // Two swirl paths: inner (shape-masked) and outer (free), each with independent distortion\n  vec2 innerUV = smokeUV;\n  vec2 outerUV = smokeUV;\n\n  // Vertical displacement \u2014 applied independently to inner and outer\n  innerUV.y += u_innerDistortion * (1. - sst(0., 1., length(.4 * innerUV)));\n  innerUV.y -= .4 * u_innerDistortion;\n  innerUV.y += .7 * u_offset * roundness;\n\n  outerUV.y += u_outerDistortion * (1. - sst(0., 1., length(.4 * outerUV)));\n  outerUV.y -= .4 * u_outerDistortion;\n\n  float innerSwirl = u_innerDistortion * roundness;\n  float outerSwirl = u_outerDistortion;\n\n  for (int i = 1; i < 5; i++) {\n    float fi = float(i);\n\n    float stretchIn = max(length(dFdx(innerUV)), length(dFdy(innerUV)));\n    float dampenIn = 1. / (1. + stretchIn * 8.);\n    float sIn = innerSwirl * dampenIn;\n    innerUV.x += sIn / fi * cos(time + fi * 2.9 * innerUV.y);\n    innerUV.y += sIn / fi * cos(time + fi * 1.5 * innerUV.x);\n\n    float stretchOut = max(length(dFdx(outerUV)), length(dFdy(outerUV)));\n    float dampenOut = 1. / (1. + stretchOut * 8.);\n    float sOut = outerSwirl * dampenOut;\n    outerUV.x += sOut / fi * cos(time + fi * 2.9 * outerUV.y);\n    outerUV.y += sOut / fi * cos(time + fi * 1.5 * outerUV.x);\n  }\n\n  // Smoke shapes from swirl fields\n  float innerShape = exp(-1.5 * dot(innerUV, innerUV));\n  float outerShape = exp(-1.5 * dot(outerUV, outerUV));\n\n  // Visibility masks\n  float outerMask = pow(u_outerGlow, 2.) * (1. - imgAlpha);\n  float innerMask = (.01 + .99 * u_innerGlow) * imgAlpha;\n\n  innerShape *= innerMask;\n  outerShape *= outerMask;\n\n  // Color gradient\n  float mixer = (innerShape + outerShape) * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float smokeMask = 0.;\n  for (int i = 1; i < ${gemSmokeMeta.maxColorCount + 1}; i++) {\n    if (i > int(u_colorsCount)) break;\n\n    float m = sst(0., 1., clamp(mixer - float(i - 1), 0., 1.));\n    if (i == 1) smokeMask = m;\n\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  // Compositing (premultiplied alpha, front-to-back)\n  vec3 color = gradient.rgb * smokeMask;\n  float opacity = gradient.a * smokeMask;\n\n  float innerOpacity = u_colorInner.a * imgAlpha;\n  vec3 innerColor = u_colorInner.rgb * innerOpacity;\n  color += innerColor * (1.0 - opacity);\n  opacity += innerOpacity * (1.0 - opacity);\n\n  vec3 backColor = u_colorBack.rgb * u_colorBack.a;\n  color += backColor * (1.0 - opacity);\n  opacity += u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\n// Configuration for Poisson solver\nexport const POISSON_CONFIG_OPTIMIZED = {\n  measurePerformance: false, // Set to true to see performance metrics\n  workingSize: 512, // Size to solve Poisson at (will upscale to original size)\n  iterations: 32, // SOR converges ~2-20x faster than standard Gauss-Seidel\n};\n\n// Precomputed pixel data for sparse processing\ninterface SparsePixelData {\n  interiorPixels: Uint32Array; // Indices of interior pixels\n  boundaryPixels: Uint32Array; // Indices of boundary pixels\n  pixelCount: number;\n  // Neighbor indices for each interior pixel (4 neighbors per pixel)\n  // Layout: [east, west, north, south] for each pixel\n  neighborIndices: Int32Array;\n}\n\nexport function toProcessedGemSmoke(file: File | string): Promise<{ imageData: ImageData; pngBlob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  const isBlob = typeof file === 'string' && file.startsWith('blob:');\n\n  return new Promise((resolve, reject) => {\n    if (!file || !ctx) {\n      reject(new Error('Invalid file or canvas context'));\n      return;\n    }\n\n    const blobContentTypePromise = isBlob && fetch(file).then((res) => res.headers.get('Content-Type'));\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    const totalStartTime = performance.now();\n\n    img.onload = async () => {\n      // Force SVG to load at a high fidelity size if it's an SVG\n      let isSVG;\n\n      const blobContentType = await blobContentTypePromise;\n\n      if (blobContentType) {\n        isSVG = blobContentType === 'image/svg+xml';\n      } else if (typeof file === 'string') {\n        isSVG = file.endsWith('.svg') || file.startsWith('data:image/svg+xml');\n      } else {\n        isSVG = file.type === 'image/svg+xml';\n      }\n\n      let originalWidth = img.width || img.naturalWidth;\n      let originalHeight = img.height || img.naturalHeight;\n\n      if (isSVG) {\n        // Scale SVG to max dimension while preserving aspect ratio\n        const svgMaxSize = 4096;\n        const aspectRatio = originalWidth / originalHeight;\n\n        if (originalWidth > originalHeight) {\n          originalWidth = svgMaxSize;\n          originalHeight = svgMaxSize / aspectRatio;\n        } else {\n          originalHeight = svgMaxSize;\n          originalWidth = svgMaxSize * aspectRatio;\n        }\n\n        img.width = originalWidth;\n        img.height = originalHeight;\n      }\n\n      // Always scale to working resolution for consistency\n      const minDimension = Math.min(originalWidth, originalHeight);\n      const targetSize = POISSON_CONFIG_OPTIMIZED.workingSize;\n\n      // Calculate scale to fit within workingSize\n      const scaleFactor = targetSize / minDimension;\n      const width = Math.round(originalWidth * scaleFactor);\n      const height = Math.round(originalHeight * scaleFactor);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Processing Mode]`);\n        console.log(`  Original: ${originalWidth}\u00D7${originalHeight}`);\n        console.log(`  Working: ${width}\u00D7${height} (${(scaleFactor * 100).toFixed(1)}% scale)`);\n        if (scaleFactor < 1) {\n          console.log(`  Speedup: ~${Math.round(1 / (scaleFactor * scaleFactor))}\u00D7`);\n        }\n      }\n\n      canvas.width = originalWidth;\n      canvas.height = originalHeight;\n\n      const paddingSize = 0.025;\n      const padX = Math.ceil(width * paddingSize);\n      const padY = Math.ceil(height * paddingSize);\n      const imgW = width - 2 * padX;\n      const imgH = height - 2 * padY;\n\n      // \u2500\u2500 1. Shape canvas (working res): image centered with padding \u2500\u2500\n      const shapeCanvas = document.createElement('canvas');\n      shapeCanvas.width = width;\n      shapeCanvas.height = height;\n\n      const shapeCtx = shapeCanvas.getContext('2d')!;\n      shapeCtx.drawImage(img, padX, padY, imgW, imgH);\n\n      // 1) Build optimized masks using TypedArrays\n      const startMask = performance.now();\n\n      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);\n      const data = shapeImageData.data;\n\n      // Use Uint8Array for masks (1 byte per pixel vs 8+ bytes for boolean array)\n      const shapeMask = new Uint8Array(width * height);\n      const boundaryMask = new Uint8Array(width * height);\n\n      // First pass: identify shape pixels\n      let shapePixelCount = 0;\n      for (let i = 0, idx = 0; i < data.length; i += 4, idx++) {\n        const a = data[i + 3];\n        const isShape = a === 0 ? 0 : 1;\n        shapeMask[idx] = isShape;\n        shapePixelCount += isShape;\n      }\n\n      // 2) Optimized boundary detection using sparse approach\n      // Only check shape pixels, not all pixels\n      const boundaryIndices: number[] = [];\n      const interiorIndices: number[] = [];\n\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          if (!shapeMask[idx]) continue;\n\n          // Check if pixel is on boundary (optimized: early exit)\n          let isBoundary = false;\n\n          // Check 4-connected neighbors first (most common case)\n          if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {\n            isBoundary = true;\n          } else {\n            // Check all 8 neighbors (including diagonals) for comprehensive boundary detection\n            isBoundary =\n              !shapeMask[idx - 1] || // left\n              !shapeMask[idx + 1] || // right\n              !shapeMask[idx - width] || // top\n              !shapeMask[idx + width] || // bottom\n              !shapeMask[idx - width - 1] || // top-left\n              !shapeMask[idx - width + 1] || // top-right\n              !shapeMask[idx + width - 1] || // bottom-left\n              !shapeMask[idx + width + 1]; // bottom-right\n          }\n\n          if (isBoundary) {\n            boundaryMask[idx] = 1;\n            boundaryIndices.push(idx);\n          } else {\n            interiorIndices.push(idx);\n          }\n        }\n      }\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Mask Building] Time: ${(performance.now() - startMask).toFixed(2)}ms`);\n        console.log(\n          `  Shape pixels: ${shapePixelCount} / ${width * height} (${((shapePixelCount / (width * height)) * 100).toFixed(1)}%)`\n        );\n        console.log(`  Interior pixels: ${interiorIndices.length}`);\n        console.log(`  Boundary pixels: ${boundaryIndices.length}`);\n      }\n\n      // 3) Precompute sparse data structure for solver\n      const sparseData = buildSparseData(\n        shapeMask,\n        boundaryMask,\n        new Uint32Array(interiorIndices),\n        new Uint32Array(boundaryIndices),\n        width,\n        height\n      );\n\n      // 4) Solve Poisson equation with optimized sparse solver\n      const startSolve = performance.now();\n      const u = solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Poisson Solve] Time: ${(performance.now() - startSolve).toFixed(2)}ms`);\n      }\n\n      // 5) Generate output image\n      let maxVal = 0;\n      let finalImageData: ImageData;\n\n      // Only check shape pixels for max value\n      for (let i = 0; i < interiorIndices.length; i++) {\n        const idx = interiorIndices[i]!;\n        if (u[idx]! > maxVal) maxVal = u[idx]!;\n      }\n\n      // Create roundness image at working resolution\n      const tempCanvas = document.createElement('canvas');\n      tempCanvas.width = width;\n      tempCanvas.height = height;\n      const tempCtx = tempCanvas.getContext('2d')!;\n\n      const tempImg = tempCtx.createImageData(width, height);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          const px = idx * 4;\n\n          if (!shapeMask[idx]) {\n            tempImg.data[px] = 255;\n            tempImg.data[px + 1] = 255;\n            tempImg.data[px + 2] = 255;\n            tempImg.data[px + 3] = 0; // Alpha = 0 for background\n          } else {\n            const poissonRatio = u[idx]! / maxVal;\n            let gray = 255 * (1 - poissonRatio);\n            tempImg.data[px] = gray;\n            tempImg.data[px + 1] = gray;\n            tempImg.data[px + 2] = gray;\n            tempImg.data[px + 3] = 255; // Alpha = 255 for shape\n          }\n        }\n      }\n      tempCtx.putImageData(tempImg, 0, 0);\n\n      // Upscale to original resolution with smooth interpolation\n      ctx.imageSmoothingEnabled = true;\n      ctx.imageSmoothingQuality = 'high';\n      ctx.drawImage(tempCanvas, 0, 0, width, height, 0, 0, originalWidth, originalHeight);\n\n      // Now get the upscaled image data for final output\n      const outImg = ctx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Re-apply edges from original resolution with anti-aliasing\n      // This ensures edges are pixel-perfect while roundness is smooth\n      const origPadX = Math.ceil(originalWidth * paddingSize);\n      const origPadY = Math.ceil(originalHeight * paddingSize);\n      const originalCanvas = document.createElement('canvas');\n      originalCanvas.width = originalWidth;\n      originalCanvas.height = originalHeight;\n      const originalCtx = originalCanvas.getContext('2d')!;\n      originalCtx.drawImage(img, origPadX, origPadY, originalWidth - 2 * origPadX, originalHeight - 2 * origPadY);\n      const originalData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Process each pixel: Red channel = roundness, Alpha channel = original alpha\n      for (let i = 0; i < outImg.data.length; i += 4) {\n        const a = originalData.data[i + 3]!;\n        // Use only alpha to determine background vs shape\n        const upscaledAlpha = outImg.data[i + 3]!;\n        if (a === 0) {\n          // Background pixel\n          outImg.data[i] = 255;\n          outImg.data[i + 1] = 0;\n        } else {\n          // Red channel carries the roundness\n          // Check if upscale missed this pixel by looking at alpha channel\n          // If upscaled alpha is 0, the low-res version thought this was background\n          outImg.data[i] = upscaledAlpha === 0 ? 0 : outImg.data[i]!; // roundness or 0\n          outImg.data[i + 1] = a; // original alpha\n        }\n\n        // Unused channels fixed\n        outImg.data[i + 2] = 255;\n        outImg.data[i + 3] = 255;\n      }\n\n      ctx.putImageData(outImg, 0, 0);\n      finalImageData = outImg;\n      canvas.toBlob((blob) => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n\n        if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n          const totalTime = performance.now() - totalStartTime;\n          console.log(`[Total Processing Time] ${totalTime.toFixed(2)}ms`);\n          if (scaleFactor < 1) {\n            const estimatedFullResTime = totalTime * Math.pow((originalWidth * originalHeight) / (width * height), 1.5);\n            console.log(`[Estimated time at full resolution] ~${estimatedFullResTime.toFixed(0)}ms`);\n            console.log(\n              `[Time saved] ~${(estimatedFullResTime - totalTime).toFixed(0)}ms (${Math.round(estimatedFullResTime / totalTime)}\u00D7 faster)`\n            );\n          }\n        }\n\n        resolve({\n          imageData: finalImageData,\n          pngBlob: blob,\n        });\n      }, 'image/png');\n    };\n\n    img.onerror = () => reject(new Error('Failed to load image'));\n    img.src = typeof file === 'string' ? file : URL.createObjectURL(file);\n  });\n}\n\nfunction buildSparseData(\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  interiorPixels: Uint32Array,\n  boundaryPixels: Uint32Array,\n  width: number,\n  height: number\n): SparsePixelData {\n  const pixelCount = interiorPixels.length;\n\n  // Build neighbor indices for sparse processing\n  // For each interior pixel, store indices of its 4 neighbors\n  // Use -1 for out-of-bounds or non-shape neighbors\n  const neighborIndices = new Int32Array(pixelCount * 4);\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    // East neighbor\n    neighborIndices[i * 4 + 0] = x < width - 1 && shapeMask[idx + 1] ? idx + 1 : -1;\n    // West neighbor\n    neighborIndices[i * 4 + 1] = x > 0 && shapeMask[idx - 1] ? idx - 1 : -1;\n    // North neighbor\n    neighborIndices[i * 4 + 2] = y > 0 && shapeMask[idx - width] ? idx - width : -1;\n    // South neighbor\n    neighborIndices[i * 4 + 3] = y < height - 1 && shapeMask[idx + width] ? idx + width : -1;\n  }\n\n  return {\n    interiorPixels,\n    boundaryPixels,\n    pixelCount,\n    neighborIndices,\n  };\n}\n\nfunction solvePoissonSparse(\n  sparseData: SparsePixelData,\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  width: number,\n  height: number\n): Float32Array {\n  // This controls how smooth the falloff roundness will be and extend into the shape\n  const ITERATIONS = POISSON_CONFIG_OPTIMIZED.iterations;\n\n  // Keep C constant - only iterations control roundness spread\n  const C = 0.01;\n\n  const u = new Float32Array(width * height);\n  const { interiorPixels, neighborIndices, pixelCount } = sparseData;\n\n  // Performance tracking\n  const startTime = performance.now();\n\n  // Red-Black SOR for better symmetry with fewer iterations\n  // omega between 1.8-1.95 typically gives best convergence for Poisson\n  const omega = 1.9;\n\n  // Pre-classify pixels as red or black for efficient processing\n  const redPixels: number[] = [];\n  const blackPixels: number[] = [];\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    if ((x + y) % 2 === 0) {\n      redPixels.push(i);\n    } else {\n      blackPixels.push(i);\n    }\n  }\n\n  for (let iter = 0; iter < ITERATIONS; iter++) {\n    // Red pass: update red pixels\n    for (const i of redPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n\n    // Black pass: update black pixels\n    for (const i of blackPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n  }\n\n  // Jacobi smoothing passes to remove Red-Black checkerboard artifacts\n  const tmp = new Float32Array(width * height);\n  for (let smooth = 0; smooth < 3; smooth++) {\n    tmp.set(u);\n    for (let i = 0; i < pixelCount; i++) {\n      const idx = interiorPixels[i]!;\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      let sum = 0;\n      let count = 0;\n      if (eastIdx >= 0) { sum += tmp[eastIdx]!; count++; }\n      if (westIdx >= 0) { sum += tmp[westIdx]!; count++; }\n      if (northIdx >= 0) { sum += tmp[northIdx]!; count++; }\n      if (southIdx >= 0) { sum += tmp[southIdx]!; count++; }\n\n      u[idx] = count > 0 ? (tmp[idx]! + sum / count) * 0.5 : tmp[idx]!;\n    }\n  }\n\n  if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n    const elapsed = performance.now() - startTime;\n\n    console.log(`[Optimized Poisson Solver (SOR \u03C9=${omega})]`);\n    console.log(`  Working size: ${width}\u00D7${height}`);\n    console.log(`  Iterations: ${ITERATIONS}`);\n    console.log(`  Time: ${elapsed.toFixed(2)}ms`);\n    console.log(`  Interior pixels processed: ${pixelCount}`);\n    console.log(`  Speed: ${((ITERATIONS * pixelCount) / (elapsed * 1000)).toFixed(2)} Mpixels/sec`);\n  }\n\n  return u;\n}\n\nexport interface GemSmokeUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_image: HTMLImageElement | string | undefined;\n  u_innerDistortion: number;\n  u_outerDistortion: number;\n  u_outerGlow: number;\n  u_innerGlow: number;\n  u_colorInner: [number, number, number, number];\n  u_offset: number;\n  u_angle: number;\n  u_size: number;\n  u_shape: (typeof GemSmokeShapes)[GemSmokeShape];\n  u_isImage: boolean;\n}\n\nexport interface GemSmokeParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  colorBack?: string;\n  image?: HTMLImageElement | string | undefined;\n  innerDistortion?: number;\n  outerDistortion?: number;\n  outerGlow?: number;\n  innerGlow?: number;\n  colorInner?: string;\n  offset?: number;\n  angle?: number;\n  size?: number;\n  shape?: GemSmokeShape;\n}\n\nexport const GemSmokeShapes = {\n  none: 0,\n  circle: 1,\n  daisy: 2,\n  diamond: 3,\n  metaballs: 4,\n} as const;\n\nexport type GemSmokeShape = keyof typeof GemSmokeShapes;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/liquid-metal.js

@@ -140,7 +140,7 @@ void main() {
       vec2 borderUV = v_responsiveUV + .5;
       float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
       vec2 mask = min(borderUV, 1. - borderUV);
-      vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;
+      vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5));
       float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);
       float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);
       maskX = pow(maskX, .25);

package/dist/shaders/liquid-metal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/liquid-metal.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise, colorBandingFix } from '../shader-utils.js';\n\n/**\n * Futuristic liquid metal material applied to uploaded logo or abstract shape.\n * Fluid motion imitation applied over user image with animated stripe pattern\n * getting distorted along shape edges.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_image (sampler2D): Pre-processed source image texture (R = edge gradient, G = opacity)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorTint (vec4): Overlay color in RGBA (color burn blending used)\n * - u_repetition (float): Density of pattern stripes (1 to 10)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_shiftRed (float): R-channel dispersion (-1 to 1)\n * - u_shiftBlue (float): B-channel dispersion (-1 to 1)\n * - u_distortion (float): Noise distortion over the stripes pattern (0 to 1)\n * - u_contour (float): Strength of the distortion on the shape edges (0 to 1)\n * - u_angle (float): Direction of pattern animation in degrees (0 to 360)\n * - u_shape (float): Predefined shape when no image provided (0 = none, 1 = circle, 2 = daisy, 3 = diamond, 4 = metaballs)\n * - u_isImage (bool): Whether an image is being used as the effect mask\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied (used when no image)\n * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio (used for canvas-fill mode)\n * - v_responsiveBoxGivenSize (vec2): TBD\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n *\n */\n\n// language=GLSL\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorTint;\n\nuniform float u_softness;\nuniform float u_repetition;\nuniform float u_shiftRed;\nuniform float u_shiftBlue;\nuniform float u_distortion;\nuniform float u_contour;\nuniform float u_angle;\n\nuniform float u_shape;\nuniform bool u_isImage;\n\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_imageUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ simplexNoise }\n\nfloat getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {\n\n  float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p));\n\n  float border = w[0];\n  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));\n\n  if (u_isImage == true) {\n    bump = smoothstep(.2, .8, bump);\n  }\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));\n\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));\n\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));\n\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p));\n\n  // Tint color is applied with color burn blending\n  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);\n  return ch;\n}\n\nfloat getImgFrame(vec2 uv, float th) {\n  float frame = 1.;\n  frame *= smoothstep(0., th, uv.y);\n  frame *= 1.0 - smoothstep(1. - th, 1., uv.y);\n  frame *= smoothstep(0., th, uv.x);\n  frame *= 1.0 - smoothstep(1. - th, 1., uv.x);\n  return frame;\n}\n\nfloat blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) {\n  vec2 texel = 1.0 / vec2(textureSize(tex, 0));\n  vec2 r = radius * texel;\n\n  float w1 = 1.0, w2 = 2.0, w4 = 4.0;\n  float norm = 16.0;\n  float sum = w4 * centerSample;\n\n  sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).r;\n  sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).r;\n  sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).r;\n  sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).r;\n\n  sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).r;\n  sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).r;\n  sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).r;\n  sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).r;\n\n  return sum / norm;\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 2.8;\n  float t = .3 * (u_time + firstFrameOffset);\n\n  vec2 uv = v_imageUV;\n  vec2 dudx = dFdx(v_imageUV);\n  vec2 dudy = dFdy(v_imageUV);\n  vec4 img = textureGrad(u_image, uv, dudx, dudy);\n\n  if (u_isImage == false) {\n    uv = v_objectUV + .5;\n    uv.y = 1. - uv.y;\n  }\n\n  float cycleWidth = u_repetition;\n  float edge = 0.;\n  float contOffset = 1.;\n\n  vec2 rotatedUV = uv - vec2(.5);\n  float angle = (-u_angle + 70.) * PI / 180.;\n  float cosA = cos(angle);\n  float sinA = sin(angle);\n  rotatedUV = vec2(\n  rotatedUV.x * cosA - rotatedUV.y * sinA,\n  rotatedUV.x * sinA + rotatedUV.y * cosA\n  ) + vec2(.5);\n\n  if (u_isImage == true) {\n    float edgeRaw = img.r;\n    edge = blurEdge3x3(u_image, uv, dudx, dudy, 6., edgeRaw);\n    edge = pow(edge, 1.6);\n    edge *= mix(0.0, 1.0, smoothstep(0.0, 0.4, u_contour));\n  } else {\n    if (u_shape < 1.) {\n      // full-fill on canvas\n      vec2 borderUV = v_responsiveUV + .5;\n      float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n      vec2 mask = min(borderUV, 1. - borderUV);\n      vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;\n      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);\n      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);\n      maskX = pow(maskX, .25);\n      maskY = pow(maskY, .25);\n      edge = clamp(1. - maskX * maskY, 0., 1.);\n\n      uv = v_responsiveUV;\n      if (ratio > 1.) {\n        uv.y /= ratio;\n      } else {\n        uv.x *= ratio;\n      }\n      uv += .5;\n      uv.y = 1. - uv.y;\n\n      cycleWidth *= 2.;\n      contOffset = 1.5;\n\n    } else if (u_shape < 2.) {\n      // circle\n      vec2 shapeUV = uv - .5;\n      shapeUV *= .67;\n      edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n    } else if (u_shape < 3.) {\n      // daisy\n      vec2 shapeUV = uv - .5;\n      shapeUV *= 1.68;\n\n      float r = length(shapeUV) * 2.;\n      float a = atan(shapeUV.y, shapeUV.x) + .2;\n      r *= (1. + .05 * sin(3. * a + 2. * t));\n      float f = abs(cos(a * 3.));\n      edge = smoothstep(f, f + .7, r);\n      edge *= edge;\n\n      uv *= .8;\n      cycleWidth *= 1.6;\n\n    } else if (u_shape < 4.) {\n      // diamond\n      vec2 shapeUV = uv - .5;\n      shapeUV = rotate(shapeUV, .25 * PI);\n      shapeUV *= 1.42;\n      shapeUV += .5;\n      vec2 mask = min(shapeUV, 1. - shapeUV);\n      vec2 pixel_thickness = vec2(.15);\n      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);\n      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);\n      maskX = pow(maskX, .25);\n      maskY = pow(maskY, .25);\n      edge = clamp(1. - maskX * maskY, 0., 1.);\n    } else if (u_shape < 5.) {\n      // metaballs\n      vec2 shapeUV = uv - .5;\n      shapeUV *= 1.3;\n      edge = 0.;\n      for (int i = 0; i < 5; i++) {\n        float fi = float(i);\n        float speed = 1.5 + 2./3. * sin(fi * 12.345);\n        float angle = -fi * 1.5;\n        vec2 dir1 = vec2(cos(angle), sin(angle));\n        vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n        vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n        float d = length(shapeUV + traj);\n        edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n      }\n      edge = 1. - smoothstep(.65, .9, edge);\n      edge = pow(edge, 4.);\n    }\n\n    edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour));\n\n  }\n\n  float opacity = 0.;\n  if (u_isImage == true) {\n    opacity = img.g;\n    float frame = getImgFrame(v_imageUV, 0.);\n    opacity *= frame;\n  } else {\n    opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);\n    if (u_shape < 2.) {\n      edge = 1.2 * edge;\n    } else if (u_shape < 5.) {\n      edge = 1.8 * pow(edge, 1.5);\n    }\n  }\n\n  float diagBLtoTR = rotatedUV.x - rotatedUV.y;\n  float diagTLtoBR = rotatedUV.x + rotatedUV.y;\n\n  vec3 color = vec3(0.);\n  vec3 color1 = vec3(.98, 0.98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n  vec2 grad_uv = uv - .5;\n\n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n\n\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n  float noise = snoise(uv - t);\n\n  edge += (1. - edge) * u_distortion * noise;\n\n  direction += diagBLtoTR;\n  float contour = 0.;\n  direction -= 2. * noise * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge)));\n  direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour));\n  direction -= 1.7 * edge * smoothstep(.5, 1., u_contour);\n  direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge));\n\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - edge) * bump);\n\n  direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge)));\n  direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y)));\n  direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y)));\n\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n  direction *= cycleWidth;\n  direction -= t;\n\n\n  float colorDispersion = (1. - bump);\n  colorDispersion = clamp(colorDispersion, 0., 1.);\n  float dispersionRed = colorDispersion;\n  dispersionRed += .03 * bump * noise;\n  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump)));\n  dispersionRed -= diagBLtoTR;\n\n  float dispersionBlue = colorDispersion;\n  dispersionBlue *= 1.3;\n  dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump)));\n  dispersionBlue -= .2 * edge;\n\n  dispersionRed *= (u_shiftRed / 20.);\n  dispersionBlue *= (u_shiftBlue / 20.);\n\n  float blur = 0.;\n  float rExtraBlur = 0.;\n  float gExtraBlur = 0.;\n  if (u_isImage == true) {\n    float softness = 0.05 * u_softness;\n    blur = softness + .5 * smoothstep(1., 10., u_repetition) * smoothstep(.0, 1., edge);\n    float smallCanvasT = 1.0 - smoothstep(100., 500., min(u_resolution.x, u_resolution.y));\n    blur += smallCanvasT * smoothstep(.0, 1., edge);\n    rExtraBlur = softness * (0.05 + .1 * (u_shiftRed / 20.) * bump);\n    gExtraBlur = softness * 0.05 / max(0.001, abs(1. - diagBLtoTR));\n  } else {\n    blur = u_softness / 15. + .3 * contour;\n  }\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., edge + bump);\n  float stripe_r = fract(direction + dispersionRed);\n  float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r) + rExtraBlur, bump, u_colorTint.r);\n  float stripe_g = fract(direction);\n  float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g) + gExtraBlur, bump, u_colorTint.g);\n  float stripe_b = fract(direction - dispersionBlue);\n  float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b);\n\n  color = vec3(r, g, b);\n  color *= opacity;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\n// Configuration for Poisson solver\nexport const POISSON_CONFIG_OPTIMIZED = {\n  measurePerformance: false, // Set to true to see performance metrics\n  workingSize: 512, // Size to solve Poisson at (will upscale to original size)\n  iterations: 40, // SOR converges ~2-20x faster than standard Gauss-Seidel\n};\n\n// Precomputed pixel data for sparse processing\ninterface SparsePixelData {\n  interiorPixels: Uint32Array; // Indices of interior pixels\n  boundaryPixels: Uint32Array; // Indices of boundary pixels\n  pixelCount: number;\n  // Neighbor indices for each interior pixel (4 neighbors per pixel)\n  // Layout: [east, west, north, south] for each pixel\n  neighborIndices: Int32Array;\n}\n\nexport function toProcessedLiquidMetal(file: File | string): Promise<{ imageData: ImageData; pngBlob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  const isBlob = typeof file === 'string' && file.startsWith('blob:');\n\n  return new Promise((resolve, reject) => {\n    if (!file || !ctx) {\n      reject(new Error('Invalid file or canvas context'));\n      return;\n    }\n\n    const blobContentTypePromise = isBlob && fetch(file).then((res) => res.headers.get('Content-Type'));\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    const totalStartTime = performance.now();\n\n    img.onload = async () => {\n      // Force SVG to load at a high fidelity size if it's an SVG\n      let isSVG;\n\n      const blobContentType = await blobContentTypePromise;\n\n      if (blobContentType) {\n        isSVG = blobContentType === 'image/svg+xml';\n      } else if (typeof file === 'string') {\n        isSVG = file.endsWith('.svg') || file.startsWith('data:image/svg+xml');\n      } else {\n        isSVG = file.type === 'image/svg+xml';\n      }\n\n      let originalWidth = img.width || img.naturalWidth;\n      let originalHeight = img.height || img.naturalHeight;\n\n      if (isSVG) {\n        // Scale SVG to max dimension while preserving aspect ratio\n        const svgMaxSize = 4096;\n        const aspectRatio = originalWidth / originalHeight;\n\n        if (originalWidth > originalHeight) {\n          originalWidth = svgMaxSize;\n          originalHeight = svgMaxSize / aspectRatio;\n        } else {\n          originalHeight = svgMaxSize;\n          originalWidth = svgMaxSize * aspectRatio;\n        }\n\n        img.width = originalWidth;\n        img.height = originalHeight;\n      }\n\n      // Always scale to working resolution for consistency\n      const minDimension = Math.min(originalWidth, originalHeight);\n      const targetSize = POISSON_CONFIG_OPTIMIZED.workingSize;\n\n      // Calculate scale to fit within workingSize\n      const scaleFactor = targetSize / minDimension;\n      const width = Math.round(originalWidth * scaleFactor);\n      const height = Math.round(originalHeight * scaleFactor);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Processing Mode]`);\n        console.log(`  Original: ${originalWidth}\u00D7${originalHeight}`);\n        console.log(`  Working: ${width}\u00D7${height} (${(scaleFactor * 100).toFixed(1)}% scale)`);\n        if (scaleFactor < 1) {\n          console.log(`  Speedup: ~${Math.round(1 / (scaleFactor * scaleFactor))}\u00D7`);\n        }\n      }\n\n      canvas.width = originalWidth;\n      canvas.height = originalHeight;\n\n      // Use a smaller canvas for shape detection and Poisson solving\n      const shapeCanvas = document.createElement('canvas');\n      shapeCanvas.width = width;\n      shapeCanvas.height = height;\n\n      const shapeCtx = shapeCanvas.getContext('2d')!;\n      shapeCtx.drawImage(img, 0, 0, width, height);\n\n      // 1) Build optimized masks using TypedArrays\n      const startMask = performance.now();\n\n      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);\n      const data = shapeImageData.data;\n\n      // Use Uint8Array for masks (1 byte per pixel vs 8+ bytes for boolean array)\n      const shapeMask = new Uint8Array(width * height);\n      const boundaryMask = new Uint8Array(width * height);\n\n      // First pass: identify shape pixels\n      let shapePixelCount = 0;\n      for (let i = 0, idx = 0; i < data.length; i += 4, idx++) {\n        const a = data[i + 3];\n        const isShape = a === 0 ? 0 : 1;\n        shapeMask[idx] = isShape;\n        shapePixelCount += isShape;\n      }\n\n      // 2) Optimized boundary detection using sparse approach\n      // Only check shape pixels, not all pixels\n      const boundaryIndices: number[] = [];\n      const interiorIndices: number[] = [];\n\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          if (!shapeMask[idx]) continue;\n\n          // Check if pixel is on boundary (optimized: early exit)\n          let isBoundary = false;\n\n          // Check 4-connected neighbors first (most common case)\n          if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {\n            isBoundary = true;\n          } else {\n            // Check all 8 neighbors (including diagonals) for comprehensive boundary detection\n            isBoundary =\n              !shapeMask[idx - 1] || // left\n              !shapeMask[idx + 1] || // right\n              !shapeMask[idx - width] || // top\n              !shapeMask[idx + width] || // bottom\n              !shapeMask[idx - width - 1] || // top-left\n              !shapeMask[idx - width + 1] || // top-right\n              !shapeMask[idx + width - 1] || // bottom-left\n              !shapeMask[idx + width + 1]; // bottom-right\n          }\n\n          if (isBoundary) {\n            boundaryMask[idx] = 1;\n            boundaryIndices.push(idx);\n          } else {\n            interiorIndices.push(idx);\n          }\n        }\n      }\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Mask Building] Time: ${(performance.now() - startMask).toFixed(2)}ms`);\n        console.log(\n          `  Shape pixels: ${shapePixelCount} / ${width * height} (${((shapePixelCount / (width * height)) * 100).toFixed(1)}%)`\n        );\n        console.log(`  Interior pixels: ${interiorIndices.length}`);\n        console.log(`  Boundary pixels: ${boundaryIndices.length}`);\n      }\n\n      // 3) Precompute sparse data structure for solver\n      const sparseData = buildSparseData(\n        shapeMask,\n        boundaryMask,\n        new Uint32Array(interiorIndices),\n        new Uint32Array(boundaryIndices),\n        width,\n        height\n      );\n\n      // 4) Solve Poisson equation with optimized sparse solver\n      const startSolve = performance.now();\n      const u = solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Poisson Solve] Time: ${(performance.now() - startSolve).toFixed(2)}ms`);\n      }\n\n      // 5) Generate output image\n      let maxVal = 0;\n      let finalImageData: ImageData;\n\n      // Only check shape pixels for max value\n      for (let i = 0; i < interiorIndices.length; i++) {\n        const idx = interiorIndices[i]!;\n        if (u[idx]! > maxVal) maxVal = u[idx]!;\n      }\n\n      // Create gradient image at working resolution\n      const tempCanvas = document.createElement('canvas');\n      tempCanvas.width = width;\n      tempCanvas.height = height;\n      const tempCtx = tempCanvas.getContext('2d')!;\n\n      const tempImg = tempCtx.createImageData(width, height);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          const px = idx * 4;\n\n          if (!shapeMask[idx]) {\n            tempImg.data[px] = 255;\n            tempImg.data[px + 1] = 255;\n            tempImg.data[px + 2] = 255;\n            tempImg.data[px + 3] = 0; // Alpha = 0 for background\n          } else {\n            const poissonRatio = u[idx]! / maxVal;\n            const gray = 255 * (1 - poissonRatio);\n            tempImg.data[px] = gray;\n            tempImg.data[px + 1] = gray;\n            tempImg.data[px + 2] = gray;\n            tempImg.data[px + 3] = 255; // Alpha = 255 for shape\n          }\n        }\n      }\n      tempCtx.putImageData(tempImg, 0, 0);\n\n      // Upscale to original resolution with smooth interpolation\n      ctx.imageSmoothingEnabled = true;\n      ctx.imageSmoothingQuality = 'high';\n      ctx.drawImage(tempCanvas, 0, 0, width, height, 0, 0, originalWidth, originalHeight);\n\n      // Now get the upscaled image data for final output\n      const outImg = ctx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Re-apply edges from original resolution with anti-aliasing\n      // This ensures edges are pixel-perfect while gradient is smooth\n      const originalCanvas = document.createElement('canvas');\n      originalCanvas.width = originalWidth;\n      originalCanvas.height = originalHeight;\n      const originalCtx = originalCanvas.getContext('2d')!;\n      // originalCtx.fillStyle = \"white\";\n      // originalCtx.fillRect(0, 0, originalWidth, originalHeight);\n      originalCtx.drawImage(img, 0, 0, originalWidth, originalHeight);\n      const originalData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Process each pixel: Red channel = gradient, Alpha channel = original alpha\n      for (let i = 0; i < outImg.data.length; i += 4) {\n        const a = originalData.data[i + 3]!;\n        // Use only alpha to determine background vs shape\n        const upscaledAlpha = outImg.data[i + 3]!;\n        if (a === 0) {\n          // Background pixel\n          outImg.data[i] = 255;\n          outImg.data[i + 1] = 0;\n        } else {\n          // Red channel carries the gradient\n          // Check if upscale missed this pixel by looking at alpha channel\n          // If upscaled alpha is 0, the low-res version thought this was background\n          outImg.data[i] = upscaledAlpha === 0 ? 0 : outImg.data[i]!; // gradient or 0\n          outImg.data[i + 1] = a; // original alpha\n        }\n\n        // Unused channels fixed\n        outImg.data[i + 2] = 255;\n        outImg.data[i + 3] = 255;\n      }\n\n      ctx.putImageData(outImg, 0, 0);\n      finalImageData = outImg;\n      canvas.toBlob((blob) => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n\n        if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n          const totalTime = performance.now() - totalStartTime;\n          console.log(`[Total Processing Time] ${totalTime.toFixed(2)}ms`);\n          if (scaleFactor < 1) {\n            const estimatedFullResTime = totalTime * Math.pow((originalWidth * originalHeight) / (width * height), 1.5);\n            console.log(`[Estimated time at full resolution] ~${estimatedFullResTime.toFixed(0)}ms`);\n            console.log(\n              `[Time saved] ~${(estimatedFullResTime - totalTime).toFixed(0)}ms (${Math.round(estimatedFullResTime / totalTime)}\u00D7 faster)`\n            );\n          }\n        }\n\n        resolve({\n          imageData: finalImageData,\n          pngBlob: blob,\n        });\n      }, 'image/png');\n    };\n\n    img.onerror = () => reject(new Error('Failed to load image'));\n    img.src = typeof file === 'string' ? file : URL.createObjectURL(file);\n  });\n}\n\nfunction buildSparseData(\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  interiorPixels: Uint32Array,\n  boundaryPixels: Uint32Array,\n  width: number,\n  height: number\n): SparsePixelData {\n  const pixelCount = interiorPixels.length;\n\n  // Build neighbor indices for sparse processing\n  // For each interior pixel, store indices of its 4 neighbors\n  // Use -1 for out-of-bounds or non-shape neighbors\n  const neighborIndices = new Int32Array(pixelCount * 4);\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    // East neighbor\n    neighborIndices[i * 4 + 0] = x < width - 1 && shapeMask[idx + 1] ? idx + 1 : -1;\n    // West neighbor\n    neighborIndices[i * 4 + 1] = x > 0 && shapeMask[idx - 1] ? idx - 1 : -1;\n    // North neighbor\n    neighborIndices[i * 4 + 2] = y > 0 && shapeMask[idx - width] ? idx - width : -1;\n    // South neighbor\n    neighborIndices[i * 4 + 3] = y < height - 1 && shapeMask[idx + width] ? idx + width : -1;\n  }\n\n  return {\n    interiorPixels,\n    boundaryPixels,\n    pixelCount,\n    neighborIndices,\n  };\n}\n\nfunction solvePoissonSparse(\n  sparseData: SparsePixelData,\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  width: number,\n  height: number\n): Float32Array {\n  // This controls how smooth the falloff gradient will be and extend into the shape\n  const ITERATIONS = POISSON_CONFIG_OPTIMIZED.iterations;\n\n  // Keep C constant - only iterations control gradient spread\n  const C = 0.01;\n\n  const u = new Float32Array(width * height);\n  const { interiorPixels, neighborIndices, pixelCount } = sparseData;\n\n  // Performance tracking\n  const startTime = performance.now();\n\n  // Red-Black SOR for better symmetry with fewer iterations\n  // omega between 1.8-1.95 typically gives best convergence for Poisson\n  const omega = 1.9;\n\n  // Pre-classify pixels as red or black for efficient processing\n  const redPixels: number[] = [];\n  const blackPixels: number[] = [];\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    if ((x + y) % 2 === 0) {\n      redPixels.push(i);\n    } else {\n      blackPixels.push(i);\n    }\n  }\n\n  for (let iter = 0; iter < ITERATIONS; iter++) {\n    // Red pass: update red pixels\n    for (const i of redPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n\n    // Black pass: update black pixels\n    for (const i of blackPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n  }\n\n  if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n    const elapsed = performance.now() - startTime;\n\n    console.log(`[Optimized Poisson Solver (SOR \u03C9=${omega})]`);\n    console.log(`  Working size: ${width}\u00D7${height}`);\n    console.log(`  Iterations: ${ITERATIONS}`);\n    console.log(`  Time: ${elapsed.toFixed(2)}ms`);\n    console.log(`  Interior pixels processed: ${pixelCount}`);\n    console.log(`  Speed: ${((ITERATIONS * pixelCount) / (elapsed * 1000)).toFixed(2)} Mpixels/sec`);\n  }\n\n  return u;\n}\n\nexport interface LiquidMetalUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorTint: [number, number, number, number];\n  u_image: HTMLImageElement | string | undefined;\n  u_repetition: number;\n  u_shiftRed: number;\n  u_shiftBlue: number;\n  u_contour: number;\n  u_softness: number;\n  u_distortion: number;\n  u_angle: number;\n  u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];\n  u_isImage: boolean;\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorTint?: string;\n  image?: HTMLImageElement | string | undefined;\n  repetition?: number;\n  shiftRed?: number;\n  shiftBlue?: number;\n  contour?: number;\n  softness?: number;\n  distortion?: number;\n  angle?: number;\n  shape?: LiquidMetalShape;\n}\n\nexport const LiquidMetalShapes = {\n  none: 0,\n  circle: 1,\n  daisy: 2,\n  diamond: 3,\n  metaballs: 4,\n} as const;\n\nexport type LiquidMetalShape = keyof typeof LiquidMetalShapes;\n"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise, colorBandingFix } from '../shader-utils.js';\n\n/**\n * Futuristic liquid metal material applied to uploaded logo or abstract shape.\n * Fluid motion imitation applied over user image with animated stripe pattern\n * getting distorted along shape edges.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_image (sampler2D): Pre-processed source image texture (R = edge gradient, G = opacity)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colorTint (vec4): Overlay color in RGBA (color burn blending used)\n * - u_repetition (float): Density of pattern stripes (1 to 10)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_shiftRed (float): R-channel dispersion (-1 to 1)\n * - u_shiftBlue (float): B-channel dispersion (-1 to 1)\n * - u_distortion (float): Noise distortion over the stripes pattern (0 to 1)\n * - u_contour (float): Strength of the distortion on the shape edges (0 to 1)\n * - u_angle (float): Direction of pattern animation in degrees (0 to 360)\n * - u_shape (float): Predefined shape when no image provided (0 = none, 1 = circle, 2 = daisy, 3 = diamond, 4 = metaballs)\n * - u_isImage (bool): Whether an image is being used as the effect mask\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied (used when no image)\n * - v_responsiveUV (vec2): Responsive UV coordinates that adapt to canvas aspect ratio (used for canvas-fill mode)\n * - v_responsiveBoxGivenSize (vec2): TBD\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n *\n */\n\n// language=GLSL\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorTint;\n\nuniform float u_softness;\nuniform float u_repetition;\nuniform float u_shiftRed;\nuniform float u_shiftBlue;\nuniform float u_distortion;\nuniform float u_contour;\nuniform float u_angle;\n\nuniform float u_shape;\nuniform bool u_isImage;\n\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_imageUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ rotation2 }\n${ simplexNoise }\n\nfloat getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {\n\n  float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p));\n\n  float border = w[0];\n  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));\n\n  if (u_isImage == true) {\n    bump = smoothstep(.2, .8, bump);\n  }\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));\n\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p));\n\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p));\n\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p));\n\n  // Tint color is applied with color burn blending\n  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);\n  return ch;\n}\n\nfloat getImgFrame(vec2 uv, float th) {\n  float frame = 1.;\n  frame *= smoothstep(0., th, uv.y);\n  frame *= 1.0 - smoothstep(1. - th, 1., uv.y);\n  frame *= smoothstep(0., th, uv.x);\n  frame *= 1.0 - smoothstep(1. - th, 1., uv.x);\n  return frame;\n}\n\nfloat blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) {\n  vec2 texel = 1.0 / vec2(textureSize(tex, 0));\n  vec2 r = radius * texel;\n\n  float w1 = 1.0, w2 = 2.0, w4 = 4.0;\n  float norm = 16.0;\n  float sum = w4 * centerSample;\n\n  sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).r;\n  sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).r;\n  sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).r;\n  sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).r;\n\n  sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).r;\n  sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).r;\n  sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).r;\n  sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).r;\n\n  return sum / norm;\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  const float firstFrameOffset = 2.8;\n  float t = .3 * (u_time + firstFrameOffset);\n\n  vec2 uv = v_imageUV;\n  vec2 dudx = dFdx(v_imageUV);\n  vec2 dudy = dFdy(v_imageUV);\n  vec4 img = textureGrad(u_image, uv, dudx, dudy);\n\n  if (u_isImage == false) {\n    uv = v_objectUV + .5;\n    uv.y = 1. - uv.y;\n  }\n\n  float cycleWidth = u_repetition;\n  float edge = 0.;\n  float contOffset = 1.;\n\n  vec2 rotatedUV = uv - vec2(.5);\n  float angle = (-u_angle + 70.) * PI / 180.;\n  float cosA = cos(angle);\n  float sinA = sin(angle);\n  rotatedUV = vec2(\n  rotatedUV.x * cosA - rotatedUV.y * sinA,\n  rotatedUV.x * sinA + rotatedUV.y * cosA\n  ) + vec2(.5);\n\n  if (u_isImage == true) {\n    float edgeRaw = img.r;\n    edge = blurEdge3x3(u_image, uv, dudx, dudy, 6., edgeRaw);\n    edge = pow(edge, 1.6);\n    edge *= mix(0.0, 1.0, smoothstep(0.0, 0.4, u_contour));\n  } else {\n    if (u_shape < 1.) {\n      // full-fill on canvas\n      vec2 borderUV = v_responsiveUV + .5;\n      float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n      vec2 mask = min(borderUV, 1. - borderUV);\n      vec2 pixel_thickness = min(250. / v_responsiveBoxGivenSize, vec2(.5));\n      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);\n      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);\n      maskX = pow(maskX, .25);\n      maskY = pow(maskY, .25);\n      edge = clamp(1. - maskX * maskY, 0., 1.);\n\n      uv = v_responsiveUV;\n      if (ratio > 1.) {\n        uv.y /= ratio;\n      } else {\n        uv.x *= ratio;\n      }\n      uv += .5;\n      uv.y = 1. - uv.y;\n\n      cycleWidth *= 2.;\n      contOffset = 1.5;\n\n    } else if (u_shape < 2.) {\n      // circle\n      vec2 shapeUV = uv - .5;\n      shapeUV *= .67;\n      edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n    } else if (u_shape < 3.) {\n      // daisy\n      vec2 shapeUV = uv - .5;\n      shapeUV *= 1.68;\n\n      float r = length(shapeUV) * 2.;\n      float a = atan(shapeUV.y, shapeUV.x) + .2;\n      r *= (1. + .05 * sin(3. * a + 2. * t));\n      float f = abs(cos(a * 3.));\n      edge = smoothstep(f, f + .7, r);\n      edge *= edge;\n\n      uv *= .8;\n      cycleWidth *= 1.6;\n\n    } else if (u_shape < 4.) {\n      // diamond\n      vec2 shapeUV = uv - .5;\n      shapeUV = rotate(shapeUV, .25 * PI);\n      shapeUV *= 1.42;\n      shapeUV += .5;\n      vec2 mask = min(shapeUV, 1. - shapeUV);\n      vec2 pixel_thickness = vec2(.15);\n      float maskX = smoothstep(0.0, pixel_thickness.x, mask.x);\n      float maskY = smoothstep(0.0, pixel_thickness.y, mask.y);\n      maskX = pow(maskX, .25);\n      maskY = pow(maskY, .25);\n      edge = clamp(1. - maskX * maskY, 0., 1.);\n    } else if (u_shape < 5.) {\n      // metaballs\n      vec2 shapeUV = uv - .5;\n      shapeUV *= 1.3;\n      edge = 0.;\n      for (int i = 0; i < 5; i++) {\n        float fi = float(i);\n        float speed = 1.5 + 2./3. * sin(fi * 12.345);\n        float angle = -fi * 1.5;\n        vec2 dir1 = vec2(cos(angle), sin(angle));\n        vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n        vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n        float d = length(shapeUV + traj);\n        edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n      }\n      edge = 1. - smoothstep(.65, .9, edge);\n      edge = pow(edge, 4.);\n    }\n\n    edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour));\n\n  }\n\n  float opacity = 0.;\n  if (u_isImage == true) {\n    opacity = img.g;\n    float frame = getImgFrame(v_imageUV, 0.);\n    opacity *= frame;\n  } else {\n    opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);\n    if (u_shape < 2.) {\n      edge = 1.2 * edge;\n    } else if (u_shape < 5.) {\n      edge = 1.8 * pow(edge, 1.5);\n    }\n  }\n\n  float diagBLtoTR = rotatedUV.x - rotatedUV.y;\n  float diagTLtoBR = rotatedUV.x + rotatedUV.y;\n\n  vec3 color = vec3(0.);\n  vec3 color1 = vec3(.98, 0.98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n  vec2 grad_uv = uv - .5;\n\n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n\n\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n  float noise = snoise(uv - t);\n\n  edge += (1. - edge) * u_distortion * noise;\n\n  direction += diagBLtoTR;\n  float contour = 0.;\n  direction -= 2. * noise * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge)));\n  direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour));\n  direction -= 1.7 * edge * smoothstep(.5, 1., u_contour);\n  direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge));\n\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - edge) * bump);\n\n  direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge)));\n  direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y)));\n  direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y)));\n\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n  direction *= cycleWidth;\n  direction -= t;\n\n\n  float colorDispersion = (1. - bump);\n  colorDispersion = clamp(colorDispersion, 0., 1.);\n  float dispersionRed = colorDispersion;\n  dispersionRed += .03 * bump * noise;\n  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump)));\n  dispersionRed -= diagBLtoTR;\n\n  float dispersionBlue = colorDispersion;\n  dispersionBlue *= 1.3;\n  dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump)));\n  dispersionBlue -= .2 * edge;\n\n  dispersionRed *= (u_shiftRed / 20.);\n  dispersionBlue *= (u_shiftBlue / 20.);\n\n  float blur = 0.;\n  float rExtraBlur = 0.;\n  float gExtraBlur = 0.;\n  if (u_isImage == true) {\n    float softness = 0.05 * u_softness;\n    blur = softness + .5 * smoothstep(1., 10., u_repetition) * smoothstep(.0, 1., edge);\n    float smallCanvasT = 1.0 - smoothstep(100., 500., min(u_resolution.x, u_resolution.y));\n    blur += smallCanvasT * smoothstep(.0, 1., edge);\n    rExtraBlur = softness * (0.05 + .1 * (u_shiftRed / 20.) * bump);\n    gExtraBlur = softness * 0.05 / max(0.001, abs(1. - diagBLtoTR));\n  } else {\n    blur = u_softness / 15. + .3 * contour;\n  }\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., edge + bump);\n  float stripe_r = fract(direction + dispersionRed);\n  float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r) + rExtraBlur, bump, u_colorTint.r);\n  float stripe_g = fract(direction);\n  float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g) + gExtraBlur, bump, u_colorTint.g);\n  float stripe_b = fract(direction - dispersionBlue);\n  float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b);\n\n  color = vec3(r, g, b);\n  color *= opacity;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\n// Configuration for Poisson solver\nexport const POISSON_CONFIG_OPTIMIZED = {\n  measurePerformance: false, // Set to true to see performance metrics\n  workingSize: 512, // Size to solve Poisson at (will upscale to original size)\n  iterations: 40, // SOR converges ~2-20x faster than standard Gauss-Seidel\n};\n\n// Precomputed pixel data for sparse processing\ninterface SparsePixelData {\n  interiorPixels: Uint32Array; // Indices of interior pixels\n  boundaryPixels: Uint32Array; // Indices of boundary pixels\n  pixelCount: number;\n  // Neighbor indices for each interior pixel (4 neighbors per pixel)\n  // Layout: [east, west, north, south] for each pixel\n  neighborIndices: Int32Array;\n}\n\nexport function toProcessedLiquidMetal(file: File | string): Promise<{ imageData: ImageData; pngBlob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  const isBlob = typeof file === 'string' && file.startsWith('blob:');\n\n  return new Promise((resolve, reject) => {\n    if (!file || !ctx) {\n      reject(new Error('Invalid file or canvas context'));\n      return;\n    }\n\n    const blobContentTypePromise = isBlob && fetch(file).then((res) => res.headers.get('Content-Type'));\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    const totalStartTime = performance.now();\n\n    img.onload = async () => {\n      // Force SVG to load at a high fidelity size if it's an SVG\n      let isSVG;\n\n      const blobContentType = await blobContentTypePromise;\n\n      if (blobContentType) {\n        isSVG = blobContentType === 'image/svg+xml';\n      } else if (typeof file === 'string') {\n        isSVG = file.endsWith('.svg') || file.startsWith('data:image/svg+xml');\n      } else {\n        isSVG = file.type === 'image/svg+xml';\n      }\n\n      let originalWidth = img.width || img.naturalWidth;\n      let originalHeight = img.height || img.naturalHeight;\n\n      if (isSVG) {\n        // Scale SVG to max dimension while preserving aspect ratio\n        const svgMaxSize = 4096;\n        const aspectRatio = originalWidth / originalHeight;\n\n        if (originalWidth > originalHeight) {\n          originalWidth = svgMaxSize;\n          originalHeight = svgMaxSize / aspectRatio;\n        } else {\n          originalHeight = svgMaxSize;\n          originalWidth = svgMaxSize * aspectRatio;\n        }\n\n        img.width = originalWidth;\n        img.height = originalHeight;\n      }\n\n      // Always scale to working resolution for consistency\n      const minDimension = Math.min(originalWidth, originalHeight);\n      const targetSize = POISSON_CONFIG_OPTIMIZED.workingSize;\n\n      // Calculate scale to fit within workingSize\n      const scaleFactor = targetSize / minDimension;\n      const width = Math.round(originalWidth * scaleFactor);\n      const height = Math.round(originalHeight * scaleFactor);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Processing Mode]`);\n        console.log(`  Original: ${originalWidth}\u00D7${originalHeight}`);\n        console.log(`  Working: ${width}\u00D7${height} (${(scaleFactor * 100).toFixed(1)}% scale)`);\n        if (scaleFactor < 1) {\n          console.log(`  Speedup: ~${Math.round(1 / (scaleFactor * scaleFactor))}\u00D7`);\n        }\n      }\n\n      canvas.width = originalWidth;\n      canvas.height = originalHeight;\n\n      // Use a smaller canvas for shape detection and Poisson solving\n      const shapeCanvas = document.createElement('canvas');\n      shapeCanvas.width = width;\n      shapeCanvas.height = height;\n\n      const shapeCtx = shapeCanvas.getContext('2d')!;\n      shapeCtx.drawImage(img, 0, 0, width, height);\n\n      // 1) Build optimized masks using TypedArrays\n      const startMask = performance.now();\n\n      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);\n      const data = shapeImageData.data;\n\n      // Use Uint8Array for masks (1 byte per pixel vs 8+ bytes for boolean array)\n      const shapeMask = new Uint8Array(width * height);\n      const boundaryMask = new Uint8Array(width * height);\n\n      // First pass: identify shape pixels\n      let shapePixelCount = 0;\n      for (let i = 0, idx = 0; i < data.length; i += 4, idx++) {\n        const a = data[i + 3];\n        const isShape = a === 0 ? 0 : 1;\n        shapeMask[idx] = isShape;\n        shapePixelCount += isShape;\n      }\n\n      // 2) Optimized boundary detection using sparse approach\n      // Only check shape pixels, not all pixels\n      const boundaryIndices: number[] = [];\n      const interiorIndices: number[] = [];\n\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          if (!shapeMask[idx]) continue;\n\n          // Check if pixel is on boundary (optimized: early exit)\n          let isBoundary = false;\n\n          // Check 4-connected neighbors first (most common case)\n          if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {\n            isBoundary = true;\n          } else {\n            // Check all 8 neighbors (including diagonals) for comprehensive boundary detection\n            isBoundary =\n              !shapeMask[idx - 1] || // left\n              !shapeMask[idx + 1] || // right\n              !shapeMask[idx - width] || // top\n              !shapeMask[idx + width] || // bottom\n              !shapeMask[idx - width - 1] || // top-left\n              !shapeMask[idx - width + 1] || // top-right\n              !shapeMask[idx + width - 1] || // bottom-left\n              !shapeMask[idx + width + 1]; // bottom-right\n          }\n\n          if (isBoundary) {\n            boundaryMask[idx] = 1;\n            boundaryIndices.push(idx);\n          } else {\n            interiorIndices.push(idx);\n          }\n        }\n      }\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Mask Building] Time: ${(performance.now() - startMask).toFixed(2)}ms`);\n        console.log(\n          `  Shape pixels: ${shapePixelCount} / ${width * height} (${((shapePixelCount / (width * height)) * 100).toFixed(1)}%)`\n        );\n        console.log(`  Interior pixels: ${interiorIndices.length}`);\n        console.log(`  Boundary pixels: ${boundaryIndices.length}`);\n      }\n\n      // 3) Precompute sparse data structure for solver\n      const sparseData = buildSparseData(\n        shapeMask,\n        boundaryMask,\n        new Uint32Array(interiorIndices),\n        new Uint32Array(boundaryIndices),\n        width,\n        height\n      );\n\n      // 4) Solve Poisson equation with optimized sparse solver\n      const startSolve = performance.now();\n      const u = solvePoissonSparse(sparseData, shapeMask, boundaryMask, width, height);\n\n      if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n        console.log(`[Poisson Solve] Time: ${(performance.now() - startSolve).toFixed(2)}ms`);\n      }\n\n      // 5) Generate output image\n      let maxVal = 0;\n      let finalImageData: ImageData;\n\n      // Only check shape pixels for max value\n      for (let i = 0; i < interiorIndices.length; i++) {\n        const idx = interiorIndices[i]!;\n        if (u[idx]! > maxVal) maxVal = u[idx]!;\n      }\n\n      // Create gradient image at working resolution\n      const tempCanvas = document.createElement('canvas');\n      tempCanvas.width = width;\n      tempCanvas.height = height;\n      const tempCtx = tempCanvas.getContext('2d')!;\n\n      const tempImg = tempCtx.createImageData(width, height);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          const px = idx * 4;\n\n          if (!shapeMask[idx]) {\n            tempImg.data[px] = 255;\n            tempImg.data[px + 1] = 255;\n            tempImg.data[px + 2] = 255;\n            tempImg.data[px + 3] = 0; // Alpha = 0 for background\n          } else {\n            const poissonRatio = u[idx]! / maxVal;\n            const gray = 255 * (1 - poissonRatio);\n            tempImg.data[px] = gray;\n            tempImg.data[px + 1] = gray;\n            tempImg.data[px + 2] = gray;\n            tempImg.data[px + 3] = 255; // Alpha = 255 for shape\n          }\n        }\n      }\n      tempCtx.putImageData(tempImg, 0, 0);\n\n      // Upscale to original resolution with smooth interpolation\n      ctx.imageSmoothingEnabled = true;\n      ctx.imageSmoothingQuality = 'high';\n      ctx.drawImage(tempCanvas, 0, 0, width, height, 0, 0, originalWidth, originalHeight);\n\n      // Now get the upscaled image data for final output\n      const outImg = ctx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Re-apply edges from original resolution with anti-aliasing\n      // This ensures edges are pixel-perfect while gradient is smooth\n      const originalCanvas = document.createElement('canvas');\n      originalCanvas.width = originalWidth;\n      originalCanvas.height = originalHeight;\n      const originalCtx = originalCanvas.getContext('2d')!;\n      // originalCtx.fillStyle = \"white\";\n      // originalCtx.fillRect(0, 0, originalWidth, originalHeight);\n      originalCtx.drawImage(img, 0, 0, originalWidth, originalHeight);\n      const originalData = originalCtx.getImageData(0, 0, originalWidth, originalHeight);\n\n      // Process each pixel: Red channel = gradient, Alpha channel = original alpha\n      for (let i = 0; i < outImg.data.length; i += 4) {\n        const a = originalData.data[i + 3]!;\n        // Use only alpha to determine background vs shape\n        const upscaledAlpha = outImg.data[i + 3]!;\n        if (a === 0) {\n          // Background pixel\n          outImg.data[i] = 255;\n          outImg.data[i + 1] = 0;\n        } else {\n          // Red channel carries the gradient\n          // Check if upscale missed this pixel by looking at alpha channel\n          // If upscaled alpha is 0, the low-res version thought this was background\n          outImg.data[i] = upscaledAlpha === 0 ? 0 : outImg.data[i]!; // gradient or 0\n          outImg.data[i + 1] = a; // original alpha\n        }\n\n        // Unused channels fixed\n        outImg.data[i + 2] = 255;\n        outImg.data[i + 3] = 255;\n      }\n\n      ctx.putImageData(outImg, 0, 0);\n      finalImageData = outImg;\n      canvas.toBlob((blob) => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n\n        if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n          const totalTime = performance.now() - totalStartTime;\n          console.log(`[Total Processing Time] ${totalTime.toFixed(2)}ms`);\n          if (scaleFactor < 1) {\n            const estimatedFullResTime = totalTime * Math.pow((originalWidth * originalHeight) / (width * height), 1.5);\n            console.log(`[Estimated time at full resolution] ~${estimatedFullResTime.toFixed(0)}ms`);\n            console.log(\n              `[Time saved] ~${(estimatedFullResTime - totalTime).toFixed(0)}ms (${Math.round(estimatedFullResTime / totalTime)}\u00D7 faster)`\n            );\n          }\n        }\n\n        resolve({\n          imageData: finalImageData,\n          pngBlob: blob,\n        });\n      }, 'image/png');\n    };\n\n    img.onerror = () => reject(new Error('Failed to load image'));\n    img.src = typeof file === 'string' ? file : URL.createObjectURL(file);\n  });\n}\n\nfunction buildSparseData(\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  interiorPixels: Uint32Array,\n  boundaryPixels: Uint32Array,\n  width: number,\n  height: number\n): SparsePixelData {\n  const pixelCount = interiorPixels.length;\n\n  // Build neighbor indices for sparse processing\n  // For each interior pixel, store indices of its 4 neighbors\n  // Use -1 for out-of-bounds or non-shape neighbors\n  const neighborIndices = new Int32Array(pixelCount * 4);\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    // East neighbor\n    neighborIndices[i * 4 + 0] = x < width - 1 && shapeMask[idx + 1] ? idx + 1 : -1;\n    // West neighbor\n    neighborIndices[i * 4 + 1] = x > 0 && shapeMask[idx - 1] ? idx - 1 : -1;\n    // North neighbor\n    neighborIndices[i * 4 + 2] = y > 0 && shapeMask[idx - width] ? idx - width : -1;\n    // South neighbor\n    neighborIndices[i * 4 + 3] = y < height - 1 && shapeMask[idx + width] ? idx + width : -1;\n  }\n\n  return {\n    interiorPixels,\n    boundaryPixels,\n    pixelCount,\n    neighborIndices,\n  };\n}\n\nfunction solvePoissonSparse(\n  sparseData: SparsePixelData,\n  shapeMask: Uint8Array,\n  boundaryMask: Uint8Array,\n  width: number,\n  height: number\n): Float32Array {\n  // This controls how smooth the falloff gradient will be and extend into the shape\n  const ITERATIONS = POISSON_CONFIG_OPTIMIZED.iterations;\n\n  // Keep C constant - only iterations control gradient spread\n  const C = 0.01;\n\n  const u = new Float32Array(width * height);\n  const { interiorPixels, neighborIndices, pixelCount } = sparseData;\n\n  // Performance tracking\n  const startTime = performance.now();\n\n  // Red-Black SOR for better symmetry with fewer iterations\n  // omega between 1.8-1.95 typically gives best convergence for Poisson\n  const omega = 1.9;\n\n  // Pre-classify pixels as red or black for efficient processing\n  const redPixels: number[] = [];\n  const blackPixels: number[] = [];\n\n  for (let i = 0; i < pixelCount; i++) {\n    const idx = interiorPixels[i]!;\n    const x = idx % width;\n    const y = Math.floor(idx / width);\n\n    if ((x + y) % 2 === 0) {\n      redPixels.push(i);\n    } else {\n      blackPixels.push(i);\n    }\n  }\n\n  for (let iter = 0; iter < ITERATIONS; iter++) {\n    // Red pass: update red pixels\n    for (const i of redPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n\n    // Black pass: update black pixels\n    for (const i of blackPixels) {\n      const idx = interiorPixels[i]!;\n\n      // Get precomputed neighbor indices\n      const eastIdx = neighborIndices[i * 4 + 0]!;\n      const westIdx = neighborIndices[i * 4 + 1]!;\n      const northIdx = neighborIndices[i * 4 + 2]!;\n      const southIdx = neighborIndices[i * 4 + 3]!;\n\n      // Sum neighbors (use 0 for out-of-bounds)\n      let sumN = 0;\n      if (eastIdx >= 0) sumN += u[eastIdx]!;\n      if (westIdx >= 0) sumN += u[westIdx]!;\n      if (northIdx >= 0) sumN += u[northIdx]!;\n      if (southIdx >= 0) sumN += u[southIdx]!;\n\n      // SOR update: blend new value with old value\n      const newValue = (C + sumN) / 4;\n      u[idx] = omega * newValue + (1 - omega) * u[idx]!;\n    }\n  }\n\n  if (POISSON_CONFIG_OPTIMIZED.measurePerformance) {\n    const elapsed = performance.now() - startTime;\n\n    console.log(`[Optimized Poisson Solver (SOR \u03C9=${omega})]`);\n    console.log(`  Working size: ${width}\u00D7${height}`);\n    console.log(`  Iterations: ${ITERATIONS}`);\n    console.log(`  Time: ${elapsed.toFixed(2)}ms`);\n    console.log(`  Interior pixels processed: ${pixelCount}`);\n    console.log(`  Speed: ${((ITERATIONS * pixelCount) / (elapsed * 1000)).toFixed(2)} Mpixels/sec`);\n  }\n\n  return u;\n}\n\nexport interface LiquidMetalUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorTint: [number, number, number, number];\n  u_image: HTMLImageElement | string | undefined;\n  u_repetition: number;\n  u_shiftRed: number;\n  u_shiftBlue: number;\n  u_contour: number;\n  u_softness: number;\n  u_distortion: number;\n  u_angle: number;\n  u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];\n  u_isImage: boolean;\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorTint?: string;\n  image?: HTMLImageElement | string | undefined;\n  repetition?: number;\n  shiftRed?: number;\n  shiftBlue?: number;\n  contour?: number;\n  softness?: number;\n  distortion?: number;\n  angle?: number;\n  shape?: LiquidMetalShape;\n}\n\nexport const LiquidMetalShapes = {\n  none: 0,\n  circle: 1,\n  daisy: 2,\n  diamond: 3,\n  metaballs: 4,\n} as const;\n\nexport type LiquidMetalShape = keyof typeof LiquidMetalShapes;\n"],
   "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
   "type": "module",
   "sideEffects": false,