shaders 2.3.73 → 2.3.75

package/dist/core/shaders/SineWave/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import { n as componentDefinition, t as SineWave_default } from "../../SineWave-t5aPlKh4.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as SineWave_default } from "../../SineWave-C_J_VMwO.js";
 export { componentDefinition, SineWave_default as default };

package/dist/core/shaders/Spherize/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../alpha-Byel9eTg.js";
-import { n as componentDefinition, t as Spherize_default } from "../../Spherize-CkHw6wfO.js";
+import "../../alpha-C4ptedXe.js";
+import { n as componentDefinition, t as Spherize_default } from "../../Spherize-QQs5j4pJ.js";
 export { componentDefinition, Spherize_default as default };

package/dist/core/shaders/Spiral/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import "../../colorMixing-jSm3tbMv.js";
-import { n as componentDefinition, t as Spiral_default } from "../../Spiral-C4xcFRWd.js";
+import "../../colorMixing-BPpDnR5I.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as Spiral_default } from "../../Spiral-eZqdB4az.js";
 export { componentDefinition, Spiral_default as default };

package/dist/core/shaders/Strands/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import { n as componentDefinition, t as Strands_default } from "../../Strands-FVw1VjAV.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as Strands_default } from "../../Strands-Dix27a_B.js";
 export { componentDefinition, Strands_default as default };

package/dist/core/shaders/Stretch/index.js

@@ -1,5 +1,5 @@
 import "../../edges-CfGcQniB.js";
 import "../../transformations-B5lM6fYX.js";
-import "../../alpha-Byel9eTg.js";
-import { n as componentDefinition, t as Stretch_default } from "../../Stretch-BmPCPWY8.js";
+import "../../alpha-C4ptedXe.js";
+import { n as componentDefinition, t as Stretch_default } from "../../Stretch-Bz3LETyz.js";
 export { componentDefinition, Stretch_default as default };

package/dist/core/shaders/Stripes/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import "../../colorMixing-jSm3tbMv.js";
-import { n as componentDefinition, t as Stripes_default } from "../../Stripes-D-fIDK48.js";
+import "../../colorMixing-BPpDnR5I.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as Stripes_default } from "../../Stripes-ClDdoKOx.js";
 export { componentDefinition, Stripes_default as default };

package/dist/core/shaders/StudioBackground/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import { n as componentDefinition, t as StudioBackground_default } from "../../StudioBackground-BqIq7k14.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as StudioBackground_default } from "../../StudioBackground-CmFJwN8P.js";
 export { componentDefinition, StudioBackground_default as default };

package/dist/core/shaders/Swirl/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import "../../colorMixing-jSm3tbMv.js";
-import { n as componentDefinition, t as Swirl_default } from "../../Swirl-C137NvM7.js";
+import "../../colorMixing-BPpDnR5I.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as Swirl_default } from "../../Swirl-Bx8HwjR-.js";
 export { componentDefinition, Swirl_default as default };

package/dist/core/shaders/TiltShift/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../alpha-Byel9eTg.js";
-import { n as componentDefinition, t as TiltShift_default } from "../../TiltShift-vr8k-bAX.js";
+import "../../alpha-C4ptedXe.js";
+import { n as componentDefinition, t as TiltShift_default } from "../../TiltShift-YwQVnxTS.js";
 export { componentDefinition, TiltShift_default as default };

package/dist/core/shaders/Tritone/index.js

@@ -1,5 +1,5 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../alpha-Byel9eTg.js";
-import "../../colorMixing-jSm3tbMv.js";
-import { n as componentDefinition, t as Tritone_default } from "../../Tritone-NDERRh_N.js";
+import "../../alpha-C4ptedXe.js";
+import "../../colorMixing-BPpDnR5I.js";
+import { n as componentDefinition, t as Tritone_default } from "../../Tritone-BouzdhuC.js";
 export { componentDefinition, Tritone_default as default };

package/dist/core/shaders/Twirl/index.js

@@ -1,5 +1,5 @@
 import "../../edges-CfGcQniB.js";
 import "../../transformations-B5lM6fYX.js";
-import "../../alpha-Byel9eTg.js";
-import { n as componentDefinition, t as Twirl_default } from "../../Twirl-BFocvCoq.js";
+import "../../alpha-C4ptedXe.js";
+import { n as componentDefinition, t as Twirl_default } from "../../Twirl-IM8zffEY.js";
 export { componentDefinition, Twirl_default as default };

package/dist/core/shaders/WaveDistortion/index.js

@@ -1,6 +1,6 @@
 import "../../edges-CfGcQniB.js";
 import "../../transformations-B5lM6fYX.js";
-import "../../time-BZqyVJXt.js";
-import "../../alpha-Byel9eTg.js";
-import { n as componentDefinition, t as WaveDistortion_default } from "../../WaveDistortion-HrmY6hF5.js";
+import "../../alpha-C4ptedXe.js";
+import "../../time-DUqSFWvT.js";
+import { n as componentDefinition, t as WaveDistortion_default } from "../../WaveDistortion-CO_2EMbJ.js";
 export { componentDefinition, WaveDistortion_default as default };

package/dist/core/shaders/ZoomBlur/index.js

@@ -1,4 +1,4 @@
 import "../../transformations-B5lM6fYX.js";
-import "../../alpha-Byel9eTg.js";
-import { n as componentDefinition, t as ZoomBlur_default } from "../../ZoomBlur-DSCQQerF.js";
+import "../../alpha-C4ptedXe.js";
+import { n as componentDefinition, t as ZoomBlur_default } from "../../ZoomBlur-DEy-f1iL.js";
 export { componentDefinition, ZoomBlur_default as default };

package/dist/pixi/createShaderSprite.d.ts

@@ -0,0 +1,54 @@
+import { PresetConfig } from '../core';
+import { Sprite, Application } from 'pixi.js';
+/**
+ * Options for creating a shader sprite
+ */
+export interface ShaderSpriteOptions {
+    width?: number;
+    height?: number;
+}
+/**
+ * A shader instance that renders to a PixiJS sprite
+ */
+export interface ShaderSprite {
+    sprite: Sprite;
+    update: () => Promise<void>;
+    updatePreset: (preset: PresetConfig) => void;
+    resize: (width: number, height: number) => void;
+    dispose: () => void;
+}
+/**
+ * Create a PixiJS sprite that renders a Shaders preset.
+ *
+ * This approach:
+ * 1. Creates a hidden canvas for Three.js/Shaders rendering
+ * 2. Shares the WebGPU device from PixiJS
+ * 3. Renders shaders to the canvas
+ * 4. Wraps the canvas as a PixiJS texture/sprite
+ *
+ * @example
+ * ```typescript
+ * import { createShaderSprite } from 'shaders-pixi'
+ *
+ * const preset = {
+ *   components: [
+ *     { type: 'LinearGradient', props: { colorA: '#ff0000', colorB: '#0000ff' } }
+ *   ]
+ * }
+ *
+ * const shaderSprite = await createShaderSprite(preset, pixiApp, {
+ *   width: 512,
+ *   height: 512
+ * })
+ *
+ * // Position in scene
+ * shaderSprite.sprite.x = 100
+ * shaderSprite.sprite.y = 100
+ * pixiApp.stage.addChild(shaderSprite.sprite)
+ *
+ * // In render loop (before PixiJS render)
+ * await shaderSprite.update()
+ * ```
+ */
+export declare function createShaderSprite(preset: PresetConfig, pixiApp: Application, options?: ShaderSpriteOptions): Promise<ShaderSprite>;
+//# sourceMappingURL=createShaderSprite.d.ts.map

package/dist/pixi/createShaderSprite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShaderSprite.d.ts","sourceRoot":"","sources":["../src/createShaderSprite.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AACxE,OAAO,EAAyB,MAAM,EAAgB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AAEvF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IAC5C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,YAAY,CAAC,CAiNvB"}

package/dist/pixi/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shaders PixiJS Integration
+ *
+ * Render WebGPU shaders as native PixiJS sprites.
+ *
+ * @example
+ * ```typescript
+ * import { createShaderSprite } from 'shaders-pixi'
+ *
+ * const shader = await createShaderSprite(preset, pixiApp, { width: 512, height: 512 })
+ * pixiApp.stage.addChild(shader.sprite)
+ *
+ * pixiApp.ticker.add(async () => {
+ *   await shader.update()
+ * })
+ * ```
+ */
+export { createShaderSprite, type ShaderSprite, type ShaderSpriteOptions } from './createShaderSprite';
+export type { PresetConfig, ComponentConfig } from '../core';
+//# sourceMappingURL=index.d.ts.map

package/dist/pixi/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAA;AAG7B,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/pixi/index.js

@@ -0,0 +1,153 @@
+import { createRendererFromJSON } from "../core/index.js";
+import { RendererType, CanvasSource, Texture, Sprite } from "pixi.js";
+async function createShaderSprite(preset, pixiApp, options = {}) {
+  const width = options.width || 512;
+  const height = options.height || 512;
+  const dpr = window.devicePixelRatio || 1;
+  if (pixiApp.renderer.type !== RendererType.WEBGPU) {
+    throw new Error('Shaders requires PixiJS to be initialized with WebGPU (preference: "webgpu")');
+  }
+  const pixiGpu = pixiApp.renderer.gpu;
+  const device = pixiGpu.device;
+  const adapter = pixiGpu.adapter;
+  if (!device || !adapter) {
+    throw new Error("Shaders could not access the WebGPU device from the PixiJS renderer");
+  }
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "absolute";
+  wrapper.style.left = "-9999px";
+  wrapper.style.top = "-9999px";
+  wrapper.style.width = `${width}px`;
+  wrapper.style.height = `${height}px`;
+  wrapper.style.overflow = "hidden";
+  wrapper.style.pointerEvents = "none";
+  document.body.appendChild(wrapper);
+  const canvas = document.createElement("canvas");
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  wrapper.appendChild(canvas);
+  const gpuContext = canvas.getContext("webgpu");
+  if (!gpuContext) {
+    throw new Error("Could not get WebGPU context from canvas");
+  }
+  gpuContext.configure({
+    device,
+    format: navigator.gpu.getPreferredCanvasFormat(),
+    alphaMode: "premultiplied",
+    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING
+  });
+  const shadersRenderer = createRendererFromJSON(preset, {
+    gpu: { device, adapter },
+    forceFullFrameRate: true
+  });
+  await shadersRenderer.initialize(canvas);
+  let canvasSource = new CanvasSource({
+    resource: canvas,
+    resolution: dpr,
+    antialias: false,
+    autoDensity: false
+  });
+  let texture = new Texture({
+    source: canvasSource
+  });
+  const sprite = new Sprite(texture);
+  sprite.width = width;
+  sprite.height = height;
+  let currentWidth = width;
+  let currentHeight = height;
+  let pendingCanvasSource = null;
+  let pendingTexture = null;
+  let resizeSeq = 0;
+  return {
+    sprite,
+    /**
+     * Update shader rendering and sync to PixiJS
+     * Call this in your render loop BEFORE rendering PixiJS
+     */
+    update: async () => {
+      await shadersRenderer.renderFrame();
+      if (!pendingCanvasSource) {
+        canvasSource.update();
+      }
+    },
+    /**
+     * Update the shader preset dynamically
+     */
+    updatePreset: (newPreset) => {
+      shadersRenderer.updatePreset(newPreset);
+    },
+    /**
+     * Resize the shader to new dimensions
+     * This updates the offscreen canvas, triggering the renderer's resize logic.
+     * The texture swap is deferred until after Three.js's resize RAF fires, so the
+     * sprite continues to show the last good frame instead of flashing blank.
+     */
+    resize: (newWidth, newHeight) => {
+      if (newWidth === currentWidth && newHeight === currentHeight) return;
+      currentWidth = newWidth;
+      currentHeight = newHeight;
+      if (pendingCanvasSource) {
+        pendingCanvasSource.destroy();
+        pendingTexture.destroy();
+        pendingCanvasSource = null;
+        pendingTexture = null;
+      }
+      const seq = ++resizeSeq;
+      wrapper.style.width = `${newWidth}px`;
+      wrapper.style.height = `${newHeight}px`;
+      canvas.width = newWidth * dpr;
+      canvas.height = newHeight * dpr;
+      canvas.style.width = `${newWidth}px`;
+      canvas.style.height = `${newHeight}px`;
+      gpuContext.configure({
+        device,
+        format: navigator.gpu.getPreferredCanvasFormat(),
+        alphaMode: "premultiplied",
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING
+      });
+      pendingCanvasSource = new CanvasSource({
+        resource: canvas,
+        resolution: dpr,
+        antialias: false,
+        autoDensity: false
+      });
+      pendingTexture = new Texture({ source: pendingCanvasSource });
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (seq !== resizeSeq) return;
+          if (pendingCanvasSource && pendingTexture) {
+            pendingCanvasSource.update();
+            const oldTexture = texture;
+            const oldCanvasSource = canvasSource;
+            canvasSource = pendingCanvasSource;
+            texture = pendingTexture;
+            sprite.texture = texture;
+            pendingCanvasSource = null;
+            pendingTexture = null;
+            oldTexture.destroy();
+            oldCanvasSource.destroy();
+          }
+        });
+      });
+    },
+    /**
+     * Clean up resources
+     */
+    dispose: () => {
+      if (pendingCanvasSource) {
+        pendingCanvasSource.destroy();
+        pendingTexture == null ? void 0 : pendingTexture.destroy();
+        pendingCanvasSource = null;
+        pendingTexture = null;
+      }
+      shadersRenderer.dispose();
+      texture.destroy(true);
+      wrapper.remove();
+    }
+  };
+}
+export {
+  createShaderSprite
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaders",
-  "version": "2.3.73",
+  "version": "2.3.75",
   "description": "Shader magic for modern frontends",
   "author": "Shader Effects Inc.",
   "homepage": "https://shaders.com/",
@@ -51,6 +51,10 @@
       "types": "./dist/solid/codegen.d.ts",
       "import": "./dist/solid/codegen.js"
     },
+    "./pixi": {
+      "types": "./dist/pixi/index.d.ts",
+      "import": "./dist/pixi/index.js"
+    },
     "./core": {
       "types": "./dist/core/index.d.ts",
       "import": "./dist/core/index.js",
@@ -458,6 +462,9 @@
       "solid/codegen": [
         "./dist/solid/codegen.d.ts"
       ],
+      "pixi": [
+        "./dist/pixi/index.d.ts"
+      ],
       "core": [
         "./dist/core/index.d.ts"
       ],
@@ -710,7 +717,8 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "svelte": "^5",
-    "solid-js": "^1.8.0"
+    "solid-js": "^1.8.0",
+    "pixi.js": "^8.0.0"
   },
   "peerDependenciesMeta": {
     "vue": {
@@ -727,6 +735,9 @@
     },
     "solid-js": {
       "optional": true
+    },
+    "pixi.js": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -742,7 +753,8 @@
     "shaders-vue": "workspace:*",
     "shaders-react": "workspace:*",
     "shaders-svelte": "workspace:*",
-    "shaders-solid": "workspace:*"
+    "shaders-solid": "workspace:*",
+    "shaders-pixi": "workspace:*"
   },
   "keywords": [
     "vue",