@paper-design/shaders 0.0.0-canary.0d8316e

package/dist/html-in-canvas.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/html-in-canvas.ts"],
+  "sourcesContent": ["/**\n * Experimental HTML-in-canvas support (https://github.com/WICG/html-in-canvas),\n * available in Chromium behind `chrome://flags/#canvas-draw-element`. Older Chromium versions opt the canvas in with\n * `layoutsubtree` instead of `content=\"drawable\"`, so the canvas gets both.\n *\n * An HTML element passed as a texture uniform is moved into the shader canvas and drawn 1:1 where it's laid out:\n *\n * <div data-paper-shader>\n *   <canvas content=\"drawable\" layoutsubtree>\n *     <div drawable>\u2026</div>\n *   </canvas>\n * </div>\n *\n * React renders this markup itself, since it can't let its nodes be moved, and the shader adopts that canvas.\n *\n * The HTML texture always matches the canvas size, so shaders sample it like any canvas-sized texture: a resize\n * captures the HTML again right away instead of waiting for the next paint.\n */\n\nexport interface DrawableCanvasElement extends HTMLCanvasElement {\n  requestPaint(): void;\n  updateElementGeometry(element: Element, options?: { canvasTransform?: DOMMatrixInit }): void;\n}\n\ninterface DrawableCanvasWebGL2Context extends WebGL2RenderingContext {\n  texElementSubImage2D(\n    target: GLenum,\n    level: GLint,\n    xoffset: GLint,\n    yoffset: GLint,\n    element: Element,\n    config?: { width?: number; height?: number; sx?: number; sy?: number; swidth?: number; sheight?: number }\n  ): void;\n}\n\nexport function isHtmlInCanvasSupported(): boolean {\n  return (\n    typeof HTMLCanvasElement !== 'undefined' &&\n    'requestPaint' in HTMLCanvasElement.prototype &&\n    typeof WebGL2RenderingContext !== 'undefined' &&\n    'texElementSubImage2D' in WebGL2RenderingContext.prototype\n  );\n}\n\n/** `<img>` stays a static image uniform. nodeType instead of `instanceof` works across iframes */\nexport function isHtmlUniform(value: unknown): value is HTMLElement {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    (value as Element).tagName !== 'IMG'\n  );\n}\n\nexport function findReactCanvas(values: unknown[], parentElement: Element): DrawableCanvasElement | null {\n  for (const value of values) {\n    const canvas = isHtmlUniform(value) ? value.parentElement : null;\n    if (canvas?.tagName === 'CANVAS' && canvas.parentElement === parentElement) {\n      return canvas as DrawableCanvasElement;\n    }\n  }\n  return null;\n}\n\n/** Moves the element into the canvas, returns a function that puts it back */\nexport function attachHtml(canvas: DrawableCanvasElement, element: HTMLElement): () => void {\n  if (element.parentElement === canvas) {\n    return () => {};\n  }\n\n  const parent = element.parentNode;\n  const nextSibling = element.nextSibling;\n  canvas.setAttribute('content', 'drawable');\n  canvas.setAttribute('layoutsubtree', '');\n  element.setAttribute('drawable', '');\n  canvas.append(element);\n\n  return () => {\n    element.removeAttribute('drawable');\n    if (parent) {\n      parent.insertBefore(element, nextSibling?.parentNode === parent ? nextSibling : null);\n    } else {\n      element.remove();\n    }\n  };\n}\n\n/**\n * Captures the element into the bound texture, sized to the canvas drawing buffer. The texture is only reallocated\n * (and so cleared) when its size or the drawn area changes; returns that layout to pass back in next time\n */\nexport function drawHtml(\n  gl: WebGL2RenderingContext,\n  canvas: DrawableCanvasElement,\n  element: HTMLElement,\n  lastLayout?: string\n): string {\n  const width = Math.max(1, canvas.width);\n  const height = Math.max(1, canvas.height);\n  const scaleX = width / Math.max(1, canvas.clientWidth);\n  const scaleY = height / Math.max(1, canvas.clientHeight);\n\n  const left = element.offsetLeft;\n  const top = element.offsetTop;\n  const visibleLeft = Math.max(0, left);\n  const visibleTop = Math.max(0, top);\n  const visibleRight = Math.min(canvas.clientWidth, left + element.offsetWidth);\n  const visibleBottom = Math.min(canvas.clientHeight, top + element.offsetHeight);\n  const x0 = Math.round(visibleLeft * scaleX);\n  const y0 = Math.round(visibleTop * scaleY);\n  const x1 = Math.min(width, Math.round(visibleRight * scaleX));\n  const y1 = Math.min(height, Math.round(visibleBottom * scaleY));\n\n  const layout = `${width}x${height} ${x0},${y0},${x1},${y1}`;\n  if (layout !== lastLayout) {\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);\n  }\n\n  if (x1 > x0 && y1 > y0) {\n    (gl as DrawableCanvasWebGL2Context).texElementSubImage2D(gl.TEXTURE_2D, 0, x0, y0, element, {\n      sx: visibleLeft - left,\n      sy: visibleTop - top,\n      swidth: visibleRight - visibleLeft,\n      sheight: visibleBottom - visibleTop,\n      width: x1 - x0,\n      height: y1 - y0,\n    });\n  }\n\n  return layout;\n}\n"],
+  "mappings": ";;;;;AAmCO,SAAS,0BAAmC;AACjD,SACE,OAAO,sBAAsB,eAC7B,kBAAkB,kBAAkB,aACpC,OAAO,2BAA2B,eAClC,0BAA0B,uBAAuB;AAErD;AAGO,SAAS,cAAc,OAAsC;AAClE,SACE,OAAO,UAAU,YACjB,UAAU,QACT,MAAe,aAAa,KAC5B,MAAkB,YAAY;AAEnC;AAEO,SAAS,gBAAgB,QAAmB,eAAsD;AACvG,aAAW,SAAS,QAAQ;AAC1B,UAAM,SAAS,cAAc,KAAK,IAAI,MAAM,gBAAgB;AAC5D,QAAI,QAAQ,YAAY,YAAY,OAAO,kBAAkB,eAAe;AAC1E,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,QAA+B,SAAkC;AAC1F,MAAI,QAAQ,kBAAkB,QAAQ;AACpC,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAEA,QAAM,SAAS,QAAQ;AACvB,QAAM,cAAc,QAAQ;AAC5B,SAAO,aAAa,WAAW,UAAU;AACzC,SAAO,aAAa,iBAAiB,EAAE;AACvC,UAAQ,aAAa,YAAY,EAAE;AACnC,SAAO,OAAO,OAAO;AAErB,SAAO,MAAM;AACX,YAAQ,gBAAgB,UAAU;AAClC,QAAI,QAAQ;AACV,aAAO,aAAa,SAAS,aAAa,eAAe,SAAS,cAAc,IAAI;AAAA,IACtF,OAAO;AACL,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AACF;AAMO,SAAS,SACd,IACA,QACA,SACA,YACQ;AACR,QAAM,QAAQ,KAAK,IAAI,GAAG,OAAO,KAAK;AACtC,QAAM,SAAS,KAAK,IAAI,GAAG,OAAO,MAAM;AACxC,QAAM,SAAS,QAAQ,KAAK,IAAI,GAAG,OAAO,WAAW;AACrD,QAAM,SAAS,SAAS,KAAK,IAAI,GAAG,OAAO,YAAY;AAEvD,QAAM,OAAO,QAAQ;AACrB,QAAM,MAAM,QAAQ;AACpB,QAAM,cAAc,KAAK,IAAI,GAAG,IAAI;AACpC,QAAM,aAAa,KAAK,IAAI,GAAG,GAAG;AAClC,QAAM,eAAe,KAAK,IAAI,OAAO,aAAa,OAAO,QAAQ,WAAW;AAC5E,QAAM,gBAAgB,KAAK,IAAI,OAAO,cAAc,MAAM,QAAQ,YAAY;AAC9E,QAAM,KAAK,KAAK,MAAM,cAAc,MAAM;AAC1C,QAAM,KAAK,KAAK,MAAM,aAAa,MAAM;AACzC,QAAM,KAAK,KAAK,IAAI,OAAO,KAAK,MAAM,eAAe,MAAM,CAAC;AAC5D,QAAM,KAAK,KAAK,IAAI,QAAQ,KAAK,MAAM,gBAAgB,MAAM,CAAC;AAE9D,QAAM,SAAS,GAAG,KAAK,IAAI,MAAM,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AACzD,MAAI,WAAW,YAAY;AACzB,OAAG,WAAW,GAAG,YAAY,GAAG,GAAG,OAAO,OAAO,QAAQ,GAAG,GAAG,MAAM,GAAG,eAAe,IAAI;AAAA,EAC7F;AAEA,MAAI,KAAK,MAAM,KAAK,IAAI;AACtB,IAAC,GAAmC,qBAAqB,GAAG,YAAY,GAAG,IAAI,IAAI,SAAS;AAAA,MAC1F,IAAI,cAAc;AAAA,MAClB,IAAI,aAAa;AAAA,MACjB,QAAQ,eAAe;AAAA,MACvB,SAAS,gBAAgB;AAAA,MACzB,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */
+export { ShaderMount, isPaperShaderElement } from './shader-mount.js';
+export { isHtmlInCanvasSupported } from './html-in-canvas.js';
+export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset, ImageShaderPreset, } from './shader-mount.js';
+/** Shader sizing options and uniforms */
+export { defaultObjectSizing, defaultPatternSizing, ShaderFitOptions, type ShaderFit, type ShaderSizingParams, type ShaderSizingUniforms, } from './shader-sizing.js';
+/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */
+export { meshGradientFragmentShader, meshGradientMeta, type MeshGradientParams, type MeshGradientUniforms, } from './shaders/mesh-gradient.js';
+/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */
+export { smokeRingMeta, smokeRingFragmentShader, type SmokeRingParams, type SmokeRingUniforms, } from './shaders/smoke-ring.js';
+/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */
+export { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';
+/** 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 */
+export { dotOrbitMeta, dotOrbitFragmentShader, type DotOrbitParams, type DotOrbitUniforms, } from './shaders/dot-orbit.js';
+/** Static grid pattern made of circles, diamonds, squares or triangles */
+export { dotGridFragmentShader, DotGridShapes, type DotGridShape, type DotGridParams, type DotGridUniforms, } from './shaders/dot-grid.js';
+/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */
+export { simplexNoiseMeta, simplexNoiseFragmentShader, type SimplexNoiseParams, type SimplexNoiseUniforms, } from './shaders/simplex-noise.js';
+/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */
+export { metaballsMeta, metaballsFragmentShader, type MetaballsParams, type MetaballsUniforms, } from './shaders/metaballs.js';
+/** Animated 3D Perlin noise with exposed controls */
+export { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';
+/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */
+export { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';
+/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */
+export { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';
+/** 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 */
+export { warpMeta, warpFragmentShader, WarpPatterns, type WarpParams, type WarpUniforms, type WarpPattern, } from './shaders/warp.js';
+/** 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 */
+export { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';
+/** 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 */
+export { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';
+/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */
+export { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';
+/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */
+export { ditheringFragmentShader, DitheringShapes, DitheringTypes, type DitheringParams, type DitheringUniforms, type DitheringShape, type DitheringType, } from './shaders/dithering.js';
+/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */
+export { grainGradientFragmentShader, grainGradientMeta, GrainGradientShapes, type GrainGradientParams, type GrainGradientUniforms, type GrainGradientShape, } from './shaders/grain-gradient.js';
+/** Luminous trails of color merging into a glowing gradient frame */
+export { pulsingBorderMeta, pulsingBorderFragmentShader, PulsingBorderAspectRatios, type PulsingBorderParams, type PulsingBorderUniforms, type PulsingBorderAspectRatio, } from './shaders/pulsing-border.js';
+/** Glowing translucent 3D panels rotating around a central axis */
+export { colorPanelsFragmentShader, colorPanelsMeta, type ColorPanelsParams, type ColorPanelsUniforms, } from './shaders/color-panels.js';
+/** 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 */
+export { staticMeshGradientFragmentShader, staticMeshGradientMeta, type StaticMeshGradientParams, type StaticMeshGradientUniforms, } from './shaders/static-mesh-gradient.js';
+/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */
+export { staticRadialGradientFragmentShader, staticRadialGradientMeta, type StaticRadialGradientParams, type StaticRadialGradientUniforms, } from './shaders/static-radial-gradient.js';
+/** 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 */
+export { paperTextureFragmentShader, paperTextureMeta, type PaperTextureParams, type PaperTextureUniforms, } from './shaders/paper-texture.js';
+/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */
+export { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';
+/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */
+export { flutedGlassFragmentShader, GlassDistortionShapes, GlassGridShapes, type GlassDistortionShape, type GlassGridShape, type FlutedGlassParams, type FlutedGlassUniforms, } from './shaders/fluted-glass.js';
+/** 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) */
+export { imageDitheringFragmentShader, type ImageDitheringParams, type ImageDitheringUniforms, } from './shaders/image-dithering.js';
+/** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */
+export { lensDistortionFragmentShader, lensDistortionMeta, type LensDistortionParams, type LensDistortionUniforms, } from './shaders/lens-distortion.js';
+/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */
+export { heatmapMeta, heatmapFragmentShader, toProcessedHeatmap, type HeatmapParams, type HeatmapUniforms, } from './shaders/heatmap.js';
+/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */
+export { liquidMetalFragmentShader, LiquidMetalShapes, toProcessedLiquidMetal, type LiquidMetalShape, type LiquidMetalParams, type LiquidMetalUniforms, } from './shaders/liquid-metal.js';
+/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */
+export { HalftoneDotsTypes, HalftoneDotsGrids, halftoneDotsFragmentShader, type HalftoneDotsParams, type HalftoneDotsUniforms, type HalftoneDotsType, type HalftoneDotsGrid, } from './shaders/halftone-dots.js';
+/** 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, 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

@@ -0,0 +1,196 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { ShaderMount, isPaperShaderElement } from "./shader-mount.js";
+import { isHtmlInCanvasSupported } from "./html-in-canvas.js";
+import {
+  defaultObjectSizing,
+  defaultPatternSizing,
+  ShaderFitOptions
+} from "./shader-sizing.js";
+import {
+  meshGradientFragmentShader,
+  meshGradientMeta
+} from "./shaders/mesh-gradient.js";
+import {
+  smokeRingMeta,
+  smokeRingFragmentShader
+} from "./shaders/smoke-ring.js";
+import { neuroNoiseFragmentShader } from "./shaders/neuro-noise.js";
+import {
+  dotOrbitMeta,
+  dotOrbitFragmentShader
+} from "./shaders/dot-orbit.js";
+import {
+  dotGridFragmentShader,
+  DotGridShapes
+} from "./shaders/dot-grid.js";
+import {
+  simplexNoiseMeta,
+  simplexNoiseFragmentShader
+} from "./shaders/simplex-noise.js";
+import {
+  metaballsMeta,
+  metaballsFragmentShader
+} from "./shaders/metaballs.js";
+import { perlinNoiseFragmentShader } from "./shaders/perlin-noise.js";
+import { voronoiMeta, voronoiFragmentShader } from "./shaders/voronoi.js";
+import { wavesFragmentShader } from "./shaders/waves.js";
+import {
+  warpMeta,
+  warpFragmentShader,
+  WarpPatterns
+} from "./shaders/warp.js";
+import { godRaysMeta, godRaysFragmentShader } from "./shaders/god-rays.js";
+import { spiralFragmentShader } from "./shaders/spiral.js";
+import { swirlMeta, swirlFragmentShader } from "./shaders/swirl.js";
+import {
+  ditheringFragmentShader,
+  DitheringShapes,
+  DitheringTypes
+} from "./shaders/dithering.js";
+import {
+  grainGradientFragmentShader,
+  grainGradientMeta,
+  GrainGradientShapes
+} from "./shaders/grain-gradient.js";
+import {
+  pulsingBorderMeta,
+  pulsingBorderFragmentShader,
+  PulsingBorderAspectRatios
+} from "./shaders/pulsing-border.js";
+import {
+  colorPanelsFragmentShader,
+  colorPanelsMeta
+} from "./shaders/color-panels.js";
+import {
+  staticMeshGradientFragmentShader,
+  staticMeshGradientMeta
+} from "./shaders/static-mesh-gradient.js";
+import {
+  staticRadialGradientFragmentShader,
+  staticRadialGradientMeta
+} from "./shaders/static-radial-gradient.js";
+import {
+  paperTextureFragmentShader,
+  paperTextureMeta
+} from "./shaders/paper-texture.js";
+import { waterFragmentShader } from "./shaders/water.js";
+import {
+  flutedGlassFragmentShader,
+  GlassDistortionShapes,
+  GlassGridShapes
+} from "./shaders/fluted-glass.js";
+import {
+  imageDitheringFragmentShader
+} from "./shaders/image-dithering.js";
+import {
+  lensDistortionFragmentShader,
+  lensDistortionMeta
+} from "./shaders/lens-distortion.js";
+import {
+  heatmapMeta,
+  heatmapFragmentShader,
+  toProcessedHeatmap
+} from "./shaders/heatmap.js";
+import {
+  liquidMetalFragmentShader,
+  LiquidMetalShapes,
+  toProcessedLiquidMetal
+} from "./shaders/liquid-metal.js";
+import {
+  HalftoneDotsTypes,
+  HalftoneDotsGrids,
+  halftoneDotsFragmentShader
+} from "./shaders/halftone-dots.js";
+import {
+  HalftoneCmykTypes,
+  halftoneCmykFragmentShader
+} from "./shaders/halftone-cmyk.js";
+import {
+  gemSmokeMeta,
+  gemSmokeFragmentShader,
+  toProcessedGemSmoke,
+  GemSmokeShapes
+} from "./shaders/gem-smoke.js";
+import { getShaderColorFromString } from "./get-shader-color-from-string.js";
+import { getShaderNoiseTexture } from "./get-shader-noise-texture.js";
+import { emptyPixel } from "./empty-pixel.js";
+export {
+  DitheringShapes,
+  DitheringTypes,
+  DotGridShapes,
+  GemSmokeShapes,
+  GlassDistortionShapes,
+  GlassGridShapes,
+  GrainGradientShapes,
+  HalftoneCmykTypes,
+  HalftoneDotsGrids,
+  HalftoneDotsTypes,
+  LiquidMetalShapes,
+  PulsingBorderAspectRatios,
+  ShaderFitOptions,
+  ShaderMount,
+  WarpPatterns,
+  colorPanelsFragmentShader,
+  colorPanelsMeta,
+  defaultObjectSizing,
+  defaultPatternSizing,
+  ditheringFragmentShader,
+  dotGridFragmentShader,
+  dotOrbitFragmentShader,
+  dotOrbitMeta,
+  emptyPixel,
+  flutedGlassFragmentShader,
+  gemSmokeFragmentShader,
+  gemSmokeMeta,
+  getShaderColorFromString,
+  getShaderNoiseTexture,
+  godRaysFragmentShader,
+  godRaysMeta,
+  grainGradientFragmentShader,
+  grainGradientMeta,
+  halftoneCmykFragmentShader,
+  halftoneDotsFragmentShader,
+  heatmapFragmentShader,
+  heatmapMeta,
+  imageDitheringFragmentShader,
+  isHtmlInCanvasSupported,
+  isPaperShaderElement,
+  lensDistortionFragmentShader,
+  lensDistortionMeta,
+  liquidMetalFragmentShader,
+  meshGradientFragmentShader,
+  meshGradientMeta,
+  metaballsFragmentShader,
+  metaballsMeta,
+  neuroNoiseFragmentShader,
+  paperTextureFragmentShader,
+  paperTextureMeta,
+  perlinNoiseFragmentShader,
+  pulsingBorderFragmentShader,
+  pulsingBorderMeta,
+  simplexNoiseFragmentShader,
+  simplexNoiseMeta,
+  smokeRingFragmentShader,
+  smokeRingMeta,
+  spiralFragmentShader,
+  staticMeshGradientFragmentShader,
+  staticMeshGradientMeta,
+  staticRadialGradientFragmentShader,
+  staticRadialGradientMeta,
+  swirlFragmentShader,
+  swirlMeta,
+  toProcessedGemSmoke,
+  toProcessedHeatmap,
+  toProcessedLiquidMetal,
+  voronoiFragmentShader,
+  voronoiMeta,
+  warpFragmentShader,
+  warpMeta,
+  waterFragmentShader,
+  wavesFragmentShader
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 { isHtmlInCanvasSupported } from './html-in-canvas.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  paperTextureMeta,\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/** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */\nexport {\n  lensDistortionFragmentShader,\n  lensDistortionMeta,\n  type LensDistortionParams,\n  type LensDistortionUniforms,\n} from './shaders/lens-distortion.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;AAClD,SAAS,+BAA+B;AAUxC;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,EACA;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,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/shader-color-spaces.d.ts

@@ -0,0 +1,6 @@
+export declare const ShaderColorSpaces: {
+    readonly rgb: 0;
+    readonly oklch: 1;
+};
+export type ShaderColorSpace = keyof typeof ShaderColorSpaces;
+export declare const declareOklchTransforms = "\n\n// magic numbers (and magic could be better tbh)\n#define OKLCH_CHROMA_THRESHOLD .001\n#define OKLCH_HUE_NEUTRALIZER - 2.\n\nvec3 srgbToLinear(vec3 srgb) {\n  return pow(srgb, vec3(2.2));\n}\n\nvec3 linearToSrgb(vec3 linear) {\n  return pow(linear, vec3(1.0 / 2.2));\n}\n\nvec3 LrgbToOklab(vec3 rgb) {\n  float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);\n  float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);\n  float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);\n  return vec3(\n    0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,\n    1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,\n    0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S\n  );\n}\n\nvec3 OklabToLrgb(vec3 oklab) {\n  float L = oklab.x;\n  float a = oklab.y;\n  float b = oklab.z;\n\n  float l_ = L + 0.3963377774 * a + 0.2158037573 * b;\n  float m_ = L - 0.1055613458 * a - 0.0638541728 * b;\n  float s_ = L - 0.0894841775 * a - 1.291485548 * b;\n\n  float l = l_ * l_ * l_;\n  float m = m_ * m_ * m_;\n  float s = s_ * s_ * s_;\n\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s\n  );\n}\n\nvec3 oklabToOklch(vec3 oklab) {\n  float C = length(oklab.yz);\n  float H = atan(oklab.z, oklab.y);\n  if (C < OKLCH_CHROMA_THRESHOLD) {\n    H = OKLCH_HUE_NEUTRALIZER;\n  }\n  return vec3(oklab.x, C, H);\n}\n\nvec3 oklchToOklab(vec3 oklch) {\n  float a = oklch.y * cos(oklch.z);\n  float b = oklch.y * sin(oklch.z);\n  return vec3(oklch.x, a, b);\n}\n\nfloat mixHue(float h1, float h2, float mixer) {\n  float delta = mod(h2 - h1 + PI, TWO_PI) - PI;\n  return h1 + mixer * delta;\n}\n\nvec3 srgbToOklab(vec3 rgb) {\n  return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));\n}\n\nvec3 oklabToSrgb(vec3 oklab) {\n  return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));\n}\n\nvec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {\n  color1.x = mix(color1.x, color2.x, mixer);\n  color1.y = mix(color1.y, color2.y, mixer);\n  if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {\n    color1.z = mixHue(color1.z, color2.z, mixer);\n  }\n  return color1;\n}\n";

package/dist/shader-color-spaces.js

@@ -0,0 +1,96 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const ShaderColorSpaces = {
+  rgb: 0,
+  oklch: 1
+};
+const declareOklchTransforms = `
+
+// magic numbers (and magic could be better tbh)
+#define OKLCH_CHROMA_THRESHOLD .001
+#define OKLCH_HUE_NEUTRALIZER - 2.
+
+vec3 srgbToLinear(vec3 srgb) {
+  return pow(srgb, vec3(2.2));
+}
+
+vec3 linearToSrgb(vec3 linear) {
+  return pow(linear, vec3(1.0 / 2.2));
+}
+
+vec3 LrgbToOklab(vec3 rgb) {
+  float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);
+  float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);
+  float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);
+  return vec3(
+    0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,
+    1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,
+    0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S
+  );
+}
+
+vec3 OklabToLrgb(vec3 oklab) {
+  float L = oklab.x;
+  float a = oklab.y;
+  float b = oklab.z;
+
+  float l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  float m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  float s_ = L - 0.0894841775 * a - 1.291485548 * b;
+
+  float l = l_ * l_ * l_;
+  float m = m_ * m_ * m_;
+  float s = s_ * s_ * s_;
+
+  return vec3(
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  );
+}
+
+vec3 oklabToOklch(vec3 oklab) {
+  float C = length(oklab.yz);
+  float H = atan(oklab.z, oklab.y);
+  if (C < OKLCH_CHROMA_THRESHOLD) {
+    H = OKLCH_HUE_NEUTRALIZER;
+  }
+  return vec3(oklab.x, C, H);
+}
+
+vec3 oklchToOklab(vec3 oklch) {
+  float a = oklch.y * cos(oklch.z);
+  float b = oklch.y * sin(oklch.z);
+  return vec3(oklch.x, a, b);
+}
+
+float mixHue(float h1, float h2, float mixer) {
+  float delta = mod(h2 - h1 + PI, TWO_PI) - PI;
+  return h1 + mixer * delta;
+}
+
+vec3 srgbToOklab(vec3 rgb) {
+  return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));
+}
+
+vec3 oklabToSrgb(vec3 oklab) {
+  return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));
+}
+
+vec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {
+  color1.x = mix(color1.x, color2.x, mixer);
+  color1.y = mix(color1.y, color2.y, mixer);
+  if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {
+    color1.z = mixHue(color1.z, color2.z, mixer);
+  }
+  return color1;
+}
+`;
+export {
+  ShaderColorSpaces,
+  declareOklchTransforms
+};
+//# sourceMappingURL=shader-color-spaces.js.map

package/dist/shader-color-spaces.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shader-color-spaces.ts"],
+  "sourcesContent": ["export const ShaderColorSpaces = {\n  rgb: 0,\n  oklch: 1,\n} as const;\n\nexport type ShaderColorSpace = keyof typeof ShaderColorSpaces;\n\nexport const declareOklchTransforms = `\n\n// magic numbers (and magic could be better tbh)\n#define OKLCH_CHROMA_THRESHOLD .001\n#define OKLCH_HUE_NEUTRALIZER - 2.\n\nvec3 srgbToLinear(vec3 srgb) {\n  return pow(srgb, vec3(2.2));\n}\n\nvec3 linearToSrgb(vec3 linear) {\n  return pow(linear, vec3(1.0 / 2.2));\n}\n\nvec3 LrgbToOklab(vec3 rgb) {\n  float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);\n  float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);\n  float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);\n  return vec3(\n    0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,\n    1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,\n    0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S\n  );\n}\n\nvec3 OklabToLrgb(vec3 oklab) {\n  float L = oklab.x;\n  float a = oklab.y;\n  float b = oklab.z;\n\n  float l_ = L + 0.3963377774 * a + 0.2158037573 * b;\n  float m_ = L - 0.1055613458 * a - 0.0638541728 * b;\n  float s_ = L - 0.0894841775 * a - 1.291485548 * b;\n\n  float l = l_ * l_ * l_;\n  float m = m_ * m_ * m_;\n  float s = s_ * s_ * s_;\n\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s\n  );\n}\n\nvec3 oklabToOklch(vec3 oklab) {\n  float C = length(oklab.yz);\n  float H = atan(oklab.z, oklab.y);\n  if (C < OKLCH_CHROMA_THRESHOLD) {\n    H = OKLCH_HUE_NEUTRALIZER;\n  }\n  return vec3(oklab.x, C, H);\n}\n\nvec3 oklchToOklab(vec3 oklch) {\n  float a = oklch.y * cos(oklch.z);\n  float b = oklch.y * sin(oklch.z);\n  return vec3(oklch.x, a, b);\n}\n\nfloat mixHue(float h1, float h2, float mixer) {\n  float delta = mod(h2 - h1 + PI, TWO_PI) - PI;\n  return h1 + mixer * delta;\n}\n\nvec3 srgbToOklab(vec3 rgb) {\n  return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));\n}\n\nvec3 oklabToSrgb(vec3 oklab) {\n  return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));\n}\n\nvec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {\n  color1.x = mix(color1.x, color2.x, mixer);\n  color1.y = mix(color1.y, color2.y, mixer);\n  if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {\n    color1.z = mixHue(color1.z, color2.z, mixer);\n  }\n  return color1;\n}\n`;\n"],
+  "mappings": ";;;;;AAAO,MAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EACL,OAAO;AACT;AAIO,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shader-mount.d.ts

@@ -0,0 +1,151 @@
+export declare class ShaderMount {
+    parentElement: PaperShaderElement;
+    canvasElement: HTMLCanvasElement;
+    private gl;
+    private program;
+    private uniformLocations;
+    /** The fragment shader that we are using */
+    private fragmentShader;
+    /** Stores the RAF for the render loop */
+    private rafId;
+    /** Time of the last rendered frame */
+    private lastRenderTime;
+    /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
+    private currentFrame;
+    /** The speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */
+    private speed;
+    /** Actual speed used that accounts for visibility: we pause the shader if the tab is hidden or the element out of the viewport */
+    private currentSpeed;
+    /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
+    private providedUniforms;
+    /** Names of the uniforms that should have mipmaps generated for them */
+    private mipmaps;
+    /** Just a sanity check to make sure frames don't run after we're disposed */
+    private hasBeenDisposed;
+    /** If the resolution of the canvas has changed since the last render */
+    private resolutionChanged;
+    /** Store textures that are provided by the user */
+    private textures;
+    private minPixelRatio;
+    private maxPixelCount;
+    private isSafari;
+    private uniformCache;
+    private textureUnitMap;
+    private ownerDocument;
+    private htmlUniforms;
+    private isReactCanvas;
+    constructor(
+    /** The div you'd like to mount the shader to. The shader will match its size. */
+    parentElement: HTMLElement, fragmentShader: string, uniforms: ShaderMountUniforms, webGlContextAttributes?: WebGLContextAttributes, 
+    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */
+    speed?: number, 
+    /** Pass a frame to offset the starting u_time value and give deterministic results*/
+    frame?: number, 
+    /**
+     * The minimum pixel ratio to render at, defaults to 2.
+     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.
+     */
+    minPixelRatio?: number, 
+    /**
+     * The maximum amount of physical device pixels to render for the shader,
+     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.
+     * Actual DOM size of the canvas can be larger, it will just lose quality after this.
+     *
+     * May be reduced to improve performance or increased to improve quality on high-resolution screens.
+     */
+    maxPixelCount?: number, 
+    /** Names of the uniforms that should have mipmaps generated for them */
+    mipmaps?: string[]);
+    private initProgram;
+    private setupPositionAttribute;
+    private setupUniforms;
+    /**
+     * The scale that we should render at.
+     * - Used to target 2x rendering even on 1x screens for better antialiasing
+     * - Prevents the virtual resolution from going beyond the maximum resolution
+     * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels
+     */
+    private renderScale;
+    private parentWidth;
+    private parentHeight;
+    private parentDevicePixelWidth;
+    private parentDevicePixelHeight;
+    private devicePixelsSupported;
+    private intersectionObserver;
+    private isInViewport;
+    private resizeObserver;
+    private setupResizeObserver;
+    private setupIntersectionObserver;
+    private handleVisualViewportChange;
+    /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
+    private handleResize;
+    private render;
+    private requestRender;
+    /** Creates a texture from an image and sets it into a uniform value */
+    private setTextureUniform;
+    private createTexture;
+    /** Moves the element into the shader canvas and redraws it into the texture on every canvas paint */
+    private setHtmlUniform;
+    /** Captures each HTML uniform into its texture. On resize only HTML that has a snapshot already, so it can't throw */
+    private captureHtml;
+    private unsetHtmlUniform;
+    private handleCanvasPaint;
+    /** Utility: recursive equality test for all the uniforms */
+    private areUniformValuesEqual;
+    /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
+    private setUniformValues;
+    /** Gets the current total animation time from 0ms */
+    getCurrentFrame: () => number;
+    /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */
+    setFrame: (newFrame: number) => void;
+    /** Set an animation speed (or 0 to stop animation) */
+    setSpeed: (newSpeed?: number) => void;
+    /** Apply the target speed, pausing (0) while the tab is hidden or the element is out of the viewport */
+    private updateCurrentSpeed;
+    private setCurrentSpeed;
+    /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
+    setMaxPixelCount: (newMaxPixelCount?: number) => void;
+    /** Set the minimum pixel ratio for the shader */
+    setMinPixelRatio: (newMinPixelRatio?: number) => void;
+    /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
+    setUniforms: (newUniforms: ShaderMountUniforms) => void;
+    /** Render right away only when the rAF loop isn't running */
+    private renderUnlessAnimating;
+    private handleDocumentVisibilityChange;
+    /** Dispose of the shader mount, cleaning up all of the WebGL resources */
+    dispose: () => void;
+}
+/** The parent `<div>` element that has a ShaderMount available on it */
+export interface PaperShaderElement extends HTMLElement {
+    paperShaderMount: ShaderMount | undefined;
+}
+/** Check if an element is a Paper shader element */
+export declare function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement;
+/**
+ * Uniform types that we support to be auto-mapped into the fragment shader
+ *
+ * We accept undefined as a convenience for server rendering, when some things may be undefined
+ * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
+ */
+export interface ShaderMountUniforms {
+    [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | HTMLElement | undefined;
+}
+export interface ShaderMotionParams {
+    speed?: number;
+    frame?: number;
+}
+export type ShaderPreset<T> = {
+    name: string;
+    params: Required<T>;
+};
+export type ImageShaderPreset<T> = {
+    name: string;
+    /**
+     * Params for the shader excluding the image.
+     * Image is excluded as it isn't considered a preset,
+     * e.g. when switching between presets it shouldn't switch the image.
+     *
+     * While we exclude images from presets they should still be set with a default prop value so the code-first usage of shaders remains great.
+     */
+    params: Required<Omit<T, 'image'>>;
+};