@paper-design/shaders 0.0.0-canary.55a3ef1 → 0.0.0-canary.5bfd3e7

package/dist/html-in-canvas.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Experimental HTML-in-canvas support (https://github.com/WICG/html-in-canvas),
+ * available in Chromium behind `chrome://flags/#canvas-draw-element`. Older Chromium versions opt the canvas in with
+ * `layoutsubtree` instead of `content="drawable"`, so the canvas gets both.
+ *
+ * An HTML element passed as a texture uniform is moved into the shader canvas and drawn 1:1 where it's laid out:
+ *
+ * <div data-paper-shader>
+ *   <canvas content="drawable" layoutsubtree>
+ *     <div drawable>…</div>
+ *   </canvas>
+ * </div>
+ *
+ * React renders this markup itself, since it can't let its nodes be moved, and the shader adopts that canvas.
+ *
+ * The HTML texture always matches the canvas size, so shaders sample it like any canvas-sized texture: a resize
+ * captures the HTML again right away instead of waiting for the next paint.
+ */
+export interface DrawableCanvasElement extends HTMLCanvasElement {
+    requestPaint(): void;
+    updateElementGeometry(element: Element, options?: {
+        canvasTransform?: DOMMatrixInit;
+    }): void;
+}
+export declare function isHtmlInCanvasSupported(): boolean;
+/** `<img>` stays a static image uniform. nodeType instead of `instanceof` works across iframes */
+export declare function isHtmlUniform(value: unknown): value is HTMLElement;
+export declare function findReactCanvas(values: unknown[], parentElement: Element): DrawableCanvasElement | null;
+/** Moves the element into the canvas, returns a function that puts it back */
+export declare function attachHtml(canvas: DrawableCanvasElement, element: HTMLElement): () => void;
+/**
+ * Captures the element into the bound texture, sized to the canvas drawing buffer. The texture is only reallocated
+ * (and so cleared) when its size or the drawn area changes; returns that layout to pass back in next time
+ */
+export declare function drawHtml(gl: WebGL2RenderingContext, canvas: DrawableCanvasElement, element: HTMLElement, lastLayout?: string): string;

package/dist/html-in-canvas.js

@@ -0,0 +1,79 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+function isHtmlInCanvasSupported() {
+  return typeof HTMLCanvasElement !== "undefined" && "requestPaint" in HTMLCanvasElement.prototype && typeof WebGL2RenderingContext !== "undefined" && "texElementSubImage2D" in WebGL2RenderingContext.prototype;
+}
+function isHtmlUniform(value) {
+  return typeof value === "object" && value !== null && value.nodeType === 1 && value.tagName !== "IMG";
+}
+function findReactCanvas(values, parentElement) {
+  for (const value of values) {
+    const canvas = isHtmlUniform(value) ? value.parentElement : null;
+    if (canvas?.tagName === "CANVAS" && canvas.parentElement === parentElement) {
+      return canvas;
+    }
+  }
+  return null;
+}
+function attachHtml(canvas, element) {
+  if (element.parentElement === canvas) {
+    return () => {
+    };
+  }
+  const parent = element.parentNode;
+  const nextSibling = element.nextSibling;
+  canvas.setAttribute("content", "drawable");
+  canvas.setAttribute("layoutsubtree", "");
+  element.setAttribute("drawable", "");
+  canvas.append(element);
+  return () => {
+    element.removeAttribute("drawable");
+    if (parent) {
+      parent.insertBefore(element, nextSibling?.parentNode === parent ? nextSibling : null);
+    } else {
+      element.remove();
+    }
+  };
+}
+function drawHtml(gl, canvas, element, lastLayout) {
+  const width = Math.max(1, canvas.width);
+  const height = Math.max(1, canvas.height);
+  const scaleX = width / Math.max(1, canvas.clientWidth);
+  const scaleY = height / Math.max(1, canvas.clientHeight);
+  const left = element.offsetLeft;
+  const top = element.offsetTop;
+  const visibleLeft = Math.max(0, left);
+  const visibleTop = Math.max(0, top);
+  const visibleRight = Math.min(canvas.clientWidth, left + element.offsetWidth);
+  const visibleBottom = Math.min(canvas.clientHeight, top + element.offsetHeight);
+  const x0 = Math.round(visibleLeft * scaleX);
+  const y0 = Math.round(visibleTop * scaleY);
+  const x1 = Math.min(width, Math.round(visibleRight * scaleX));
+  const y1 = Math.min(height, Math.round(visibleBottom * scaleY));
+  const layout = `${width}x${height} ${x0},${y0},${x1},${y1}`;
+  if (layout !== lastLayout) {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  }
+  if (x1 > x0 && y1 > y0) {
+    gl.texElementSubImage2D(gl.TEXTURE_2D, 0, x0, y0, element, {
+      sx: visibleLeft - left,
+      sy: visibleTop - top,
+      swidth: visibleRight - visibleLeft,
+      sheight: visibleBottom - visibleTop,
+      width: x1 - x0,
+      height: y1 - y0
+    });
+  }
+  return layout;
+}
+export {
+  attachHtml,
+  drawHtml,
+  findReactCanvas,
+  isHtmlInCanvasSupported,
+  isHtmlUniform
+};
+//# sourceMappingURL=html-in-canvas.js.map

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

@@ -1,5 +1,6 @@
 /** 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';

package/dist/index.js

@@ -4,6 +4,7 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { ShaderMount, isPaperShaderElement } from "./shader-mount.js";
+import { isHtmlInCanvasSupported } from "./html-in-canvas.js";
 import {
   defaultObjectSizing,
   defaultPatternSizing,
@@ -156,6 +157,7 @@ export {
   heatmapFragmentShader,
   heatmapMeta,
   imageDitheringFragmentShader,
+  isHtmlInCanvasSupported,
   isPaperShaderElement,
   lensDistortionFragmentShader,
   lensDistortionMeta,

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  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;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,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;",
+  "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-mount.d.ts

@@ -32,6 +32,8 @@ export declare class ShaderMount {
     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, 
@@ -81,6 +83,13 @@ export declare class ShaderMount {
     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 */
@@ -100,6 +109,8 @@ export declare class ShaderMount {
     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;
@@ -117,7 +128,7 @@ export declare function isPaperShaderElement(element: HTMLElement): element is P
  * 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 | undefined;
+    [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | HTMLElement | undefined;
 }
 export interface ShaderMotionParams {
     speed?: number;

package/dist/shader-mount.js

@@ -4,6 +4,13 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { vertexShaderSource } from "./vertex-shader.js";
+import {
+  attachHtml,
+  drawHtml,
+  findReactCanvas,
+  isHtmlInCanvasSupported,
+  isHtmlUniform
+} from "./html-in-canvas.js";
 const DEFAULT_MAX_PIXEL_COUNT = 1920 * 1080 * 4;
 class ShaderMount {
   parentElement;
@@ -39,6 +46,8 @@ class ShaderMount {
   uniformCache = {};
   textureUnitMap = /* @__PURE__ */ new Map();
   ownerDocument;
+  htmlUniforms = /* @__PURE__ */ new Map();
+  isReactCanvas = false;
   constructor(parentElement, fragmentShader, uniforms, webGlContextAttributes, speed = 0, frame = 0, minPixelRatio = 2, maxPixelCount = DEFAULT_MAX_PIXEL_COUNT, mipmaps = []) {
     if (parentElement?.nodeType === 1) {
       this.parentElement = parentElement;
@@ -52,20 +61,31 @@ class ShaderMount {
       styleElement.setAttribute("data-paper-shader", "");
       this.ownerDocument.head.prepend(styleElement);
     }
-    const canvasElement = this.ownerDocument.createElement("canvas");
+    const reactCanvas = findReactCanvas(Object.values(uniforms), this.parentElement);
+    const canvasElement = reactCanvas ?? this.ownerDocument.createElement("canvas");
     this.canvasElement = canvasElement;
-    this.parentElement.prepend(canvasElement);
+    this.isReactCanvas = reactCanvas !== null;
+    if (!reactCanvas) {
+      this.parentElement.prepend(canvasElement);
+    }
+    canvasElement.addEventListener("paint", this.handleCanvasPaint);
     this.fragmentShader = fragmentShader;
     this.providedUniforms = uniforms;
     this.mipmaps = mipmaps;
     this.currentFrame = frame;
     this.minPixelRatio = minPixelRatio;
     this.maxPixelCount = maxPixelCount;
-    const gl = canvasElement.getContext("webgl2", webGlContextAttributes);
+    const gl = canvasElement.getContext("webgl2", {
+      antialias: false,
+      depth: false,
+      stencil: false,
+      ...webGlContextAttributes
+    });
     if (!gl) {
       throw new Error("Paper Shaders: WebGL is not supported in this browser");
     }
     this.gl = gl;
+    this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
     this.initProgram();
     this.setupPositionAttribute();
     this.setupUniforms();
@@ -82,6 +102,7 @@ class ShaderMount {
     const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);
     if (!program) return;
     this.program = program;
+    this.gl.useProgram(program);
   };
   setupPositionAttribute = () => {
     const positionAttributeLocation = this.gl.getAttribLocation(this.program, "a_position");
@@ -100,9 +121,10 @@ class ShaderMount {
     };
     Object.entries(this.providedUniforms).forEach(([key, value]) => {
       uniformLocations[key] = this.gl.getUniformLocation(this.program, key);
-      if (value instanceof HTMLImageElement) {
+      if (value instanceof HTMLImageElement || isHtmlUniform(value)) {
         const aspectRatioUniformName = `${key}AspectRatio`;
         uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program, aspectRatioUniformName);
+        uniformLocations[`${key}IsHtml`] = this.gl.getUniformLocation(this.program, `${key}IsHtml`);
       }
     });
     this.uniformLocations = uniformLocations;
@@ -187,6 +209,10 @@ class ShaderMount {
       this.canvasElement.height = newHeight;
       this.resolutionChanged = true;
       this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+      this.captureHtml(true);
+      if (this.htmlUniforms.size > 0) {
+        this.canvasElement.requestPaint();
+      }
       this.render(performance.now());
     }
   };
@@ -202,7 +228,6 @@ class ShaderMount {
       this.currentFrame += dt * this.currentSpeed;
     }
     this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    this.gl.useProgram(this.program);
     this.gl.uniform1f(this.uniformLocations.u_time, this.currentFrame * 1e-3);
     if (this.resolutionChanged) {
       this.gl.uniform2f(this.uniformLocations.u_resolution, this.gl.canvas.width, this.gl.canvas.height);
@@ -227,21 +252,8 @@ class ShaderMount {
     if (!image.complete || image.naturalWidth === 0) {
       throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);
     }
-    const existingTexture = this.textures.get(uniformName);
-    if (existingTexture) {
-      this.gl.deleteTexture(existingTexture);
-    }
-    if (!this.textureUnitMap.has(uniformName)) {
-      this.textureUnitMap.set(uniformName, this.textureUnitMap.size);
-    }
-    const textureUnit = this.textureUnitMap.get(uniformName);
-    this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
-    const texture = this.gl.createTexture();
-    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+    this.unsetHtmlUniform(uniformName);
+    const { texture, textureUnit } = this.createTexture(uniformName);
     this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);
     if (this.mipmaps.includes(uniformName)) {
       this.gl.generateMipmap(this.gl.TEXTURE_2D);
@@ -262,8 +274,71 @@ class ShaderMount {
         const aspectRatio = image.naturalWidth / image.naturalHeight;
         this.gl.uniform1f(aspectRatioLocation, aspectRatio);
       }
+      this.gl.uniform1f(this.uniformLocations[`${uniformName}IsHtml`] ?? null, 0);
     }
   };
+  createTexture = (uniformName) => {
+    const existingTexture = this.textures.get(uniformName);
+    if (existingTexture) {
+      this.gl.deleteTexture(existingTexture);
+    }
+    if (!this.textureUnitMap.has(uniformName)) {
+      this.textureUnitMap.set(uniformName, this.textureUnitMap.size);
+    }
+    const textureUnit = this.textureUnitMap.get(uniformName);
+    this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
+    const texture = this.gl.createTexture();
+    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+    return { texture, textureUnit };
+  };
+  /** Moves the element into the shader canvas and redraws it into the texture on every canvas paint */
+  setHtmlUniform = (uniformName, element) => {
+    this.unsetHtmlUniform(uniformName);
+    const { texture, textureUnit } = this.createTexture(uniformName);
+    if (texture === null) return;
+    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, 1, 1, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
+    this.textures.set(uniformName, texture);
+    this.gl.uniform1i(this.uniformLocations[uniformName] ?? null, textureUnit);
+    this.gl.uniform1f(this.uniformLocations[`${uniformName}IsHtml`] ?? null, 1);
+    if (!isHtmlInCanvasSupported()) {
+      console.warn(
+        `Paper Shaders: HTML for ${uniformName} needs HTML in canvas support (chrome://flags/#canvas-draw-element)`
+      );
+      return;
+    }
+    const canvas = this.canvasElement;
+    this.htmlUniforms.set(uniformName, { element, detach: attachHtml(canvas, element), hasGeometry: false });
+    canvas.requestPaint();
+  };
+  /** Captures each HTML uniform into its texture. On resize only HTML that has a snapshot already, so it can't throw */
+  captureHtml = (isResize) => {
+    const canvas = this.canvasElement;
+    this.htmlUniforms.forEach((html, uniformName) => {
+      if (isResize && html.layout === void 0) return;
+      this.gl.activeTexture(this.gl.TEXTURE0 + this.textureUnitMap.get(uniformName));
+      this.gl.bindTexture(this.gl.TEXTURE_2D, this.textures.get(uniformName));
+      html.layout = drawHtml(this.gl, canvas, html.element, html.layout);
+    });
+  };
+  unsetHtmlUniform = (uniformName) => {
+    this.htmlUniforms.get(uniformName)?.detach();
+    this.htmlUniforms.delete(uniformName);
+  };
+  handleCanvasPaint = () => {
+    const canvas = this.canvasElement;
+    this.captureHtml(false);
+    this.htmlUniforms.forEach((html) => {
+      if (!html.hasGeometry) {
+        canvas.updateElementGeometry(html.element, { canvasTransform: new DOMMatrix() });
+        html.hasGeometry = true;
+      }
+    });
+    this.renderUnlessAnimating();
+  };
   /** Utility: recursive equality test for all the uniforms */
   areUniformValuesEqual = (a, b) => {
     if (a === b) return true;
@@ -274,7 +349,6 @@ class ShaderMount {
   };
   /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
   setUniformValues = (updatedUniforms) => {
-    this.gl.useProgram(this.program);
     Object.entries(updatedUniforms).forEach(([key, value]) => {
       let cacheValue = value;
       if (value instanceof HTMLImageElement) {
@@ -289,6 +363,8 @@ class ShaderMount {
       }
       if (value instanceof HTMLImageElement) {
         this.setTextureUniform(key, value);
+      } else if (isHtmlUniform(value)) {
+        this.setHtmlUniform(key, value);
       } else if (Array.isArray(value)) {
         let flatArray = null;
         let valueLength = null;
@@ -341,7 +417,7 @@ class ShaderMount {
   setFrame = (newFrame) => {
     this.currentFrame = newFrame;
     this.lastRenderTime = performance.now();
-    this.render(performance.now());
+    this.renderUnlessAnimating();
   };
   /** Set an animation speed (or 0 to stop animation) */
   setSpeed = (newSpeed = 1) => {
@@ -377,7 +453,13 @@ class ShaderMount {
   setUniforms = (newUniforms) => {
     this.setUniformValues(newUniforms);
     this.providedUniforms = { ...this.providedUniforms, ...newUniforms };
-    this.render(performance.now());
+    this.renderUnlessAnimating();
+  };
+  /** Render right away only when the rAF loop isn't running */
+  renderUnlessAnimating = () => {
+    if (this.rafId === null) {
+      this.render(performance.now());
+    }
   };
   handleDocumentVisibilityChange = () => {
     this.updateCurrentSpeed();
@@ -389,6 +471,9 @@ class ShaderMount {
       cancelAnimationFrame(this.rafId);
       this.rafId = null;
     }
+    this.canvasElement.removeEventListener("paint", this.handleCanvasPaint);
+    this.htmlUniforms.forEach(({ detach }) => detach());
+    this.htmlUniforms.clear();
     if (this.gl && this.program) {
       this.textures.forEach((texture) => {
         this.gl.deleteTexture(texture);
@@ -413,7 +498,9 @@ class ShaderMount {
     visualViewport?.removeEventListener("resize", this.handleVisualViewportChange);
     this.ownerDocument.removeEventListener("visibilitychange", this.handleDocumentVisibilityChange);
     this.uniformLocations = {};
-    this.canvasElement.remove();
+    if (!this.isReactCanvas) {
+      this.canvasElement.remove();
+    }
     delete this.parentElement.paperShaderMount;
   };
 }
@@ -462,7 +549,7 @@ const defaultStyle = `@layer paper-shaders {
     isolation: isolate;
     position: relative;
 
-    & canvas {
+    & > canvas {
       contain: strict;
       display: block;
       position: absolute;
@@ -473,6 +560,13 @@ const defaultStyle = `@layer paper-shaders {
       border-radius: inherit;
       corner-shape: inherit;
     }
+
+    & > canvas > [drawable],
+    & > [drawable] {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+    }
   }
 }`;
 function isPaperShaderElement(element) {