shaders 2.5.81 → 2.5.82

package/dist/registry.js

@@ -6913,6 +6913,248 @@ export const shaderRegistry = [
       }
     }
   },
+  {
+    "name": "FlowingGradient",
+    "category": "Textures",
+    "description": "Liquid silk gradient with organic flowing color bands",
+    "fileName": "FlowingGradient",
+    "definition": {
+      "name": "FlowingGradient",
+      "category": "Textures",
+      "description": "Liquid silk gradient with organic flowing color bands",
+      "props": {
+        "colorA": {
+          "default": "#0a0015",
+          "description": "Deep background color",
+          "ui": {
+            "type": "color",
+            "label": "Color A",
+            "group": "Colors"
+          }
+        },
+        "colorB": {
+          "default": "#6b17e6",
+          "description": "Primary accent color",
+          "ui": {
+            "type": "color",
+            "label": "Color B",
+            "group": "Colors"
+          }
+        },
+        "colorC": {
+          "default": "#ff4d6a",
+          "description": "Secondary accent color",
+          "ui": {
+            "type": "color",
+            "label": "Color C",
+            "group": "Colors"
+          }
+        },
+        "colorD": {
+          "default": "#ff6b35",
+          "description": "Tertiary accent color",
+          "ui": {
+            "type": "color",
+            "label": "Color D",
+            "group": "Colors"
+          }
+        },
+        "colorSpace": {
+          "default": "oklch",
+          "compileTime": true,
+          "description": "Color space for color interpolation",
+          "ui": {
+            "type": "select",
+            "options": [
+              {
+                "label": "Linear RGB",
+                "value": "linear"
+              },
+              {
+                "label": "OKLCh",
+                "value": "oklch"
+              },
+              {
+                "label": "OKLAB",
+                "value": "oklab"
+              },
+              {
+                "label": "HSL",
+                "value": "hsl"
+              },
+              {
+                "label": "HSV",
+                "value": "hsv"
+              },
+              {
+                "label": "LCH",
+                "value": "lch"
+              }
+            ],
+            "label": "Color Space",
+            "group": "Colors"
+          }
+        },
+        "speed": {
+          "default": 1,
+          "description": "Animation speed",
+          "ui": {
+            "type": "range",
+            "min": 0,
+            "max": 10,
+            "step": 0.1,
+            "label": "Speed",
+            "group": "Effect"
+          }
+        },
+        "distortion": {
+          "default": 0.5,
+          "description": "Organic distortion intensity",
+          "ui": {
+            "type": [
+              "range",
+              "map"
+            ],
+            "min": 0,
+            "max": 2,
+            "step": 0.1,
+            "label": "Distortion",
+            "group": "Effect"
+          }
+        },
+        "seed": {
+          "default": 0,
+          "description": "Random seed for variation",
+          "ui": {
+            "type": [
+              "range",
+              "map"
+            ],
+            "min": 0,
+            "max": 100,
+            "step": 1,
+            "label": "Seed",
+            "group": "Effect"
+          }
+        }
+      }
+    },
+    "propsMetadata": {
+      "colorA": {
+        "ui": {
+          "type": "color",
+          "label": "Color A",
+          "group": "Colors"
+        },
+        "default": "#0a0015",
+        "description": "Deep background color"
+      },
+      "colorB": {
+        "ui": {
+          "type": "color",
+          "label": "Color B",
+          "group": "Colors"
+        },
+        "default": "#6b17e6",
+        "description": "Primary accent color"
+      },
+      "colorC": {
+        "ui": {
+          "type": "color",
+          "label": "Color C",
+          "group": "Colors"
+        },
+        "default": "#ff4d6a",
+        "description": "Secondary accent color"
+      },
+      "colorD": {
+        "ui": {
+          "type": "color",
+          "label": "Color D",
+          "group": "Colors"
+        },
+        "default": "#ff6b35",
+        "description": "Tertiary accent color"
+      },
+      "colorSpace": {
+        "ui": {
+          "type": "select",
+          "options": [
+            {
+              "label": "Linear RGB",
+              "value": "linear"
+            },
+            {
+              "label": "OKLCh",
+              "value": "oklch"
+            },
+            {
+              "label": "OKLAB",
+              "value": "oklab"
+            },
+            {
+              "label": "HSL",
+              "value": "hsl"
+            },
+            {
+              "label": "HSV",
+              "value": "hsv"
+            },
+            {
+              "label": "LCH",
+              "value": "lch"
+            }
+          ],
+          "label": "Color Space",
+          "group": "Colors"
+        },
+        "default": "oklch",
+        "description": "Color space for color interpolation"
+      },
+      "speed": {
+        "ui": {
+          "type": "range",
+          "min": 0,
+          "max": 10,
+          "step": 0.1,
+          "label": "Speed",
+          "group": "Effect"
+        },
+        "default": 1,
+        "description": "Animation speed"
+      },
+      "distortion": {
+        "ui": {
+          "type": [
+            "range",
+            "map"
+          ],
+          "min": 0,
+          "max": 2,
+          "step": 0.1,
+          "label": "Distortion",
+          "group": "Effect"
+        },
+        "default": 0.5,
+        "description": "Organic distortion intensity"
+      },
+      "seed": {
+        "ui": {
+          "type": [
+            "range",
+            "map"
+          ],
+          "min": 0,
+          "max": 100,
+          "step": 1,
+          "label": "Seed",
+          "group": "Effect"
+        },
+        "default": 0,
+        "description": "Random seed for variation"
+      }
+    }
+  },
   {
     "name": "Form3D",
     "category": "Distortions",

package/dist/solid/components/FlowingGradient.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+import { BlendMode, PropDriver, TransformConfig } from '../../core';
+import { ComponentProps } from '../../core/shaders/FlowingGradient';
+export type { ComponentProps };
+/**
+ * Base props that all shader components have
+ */
+interface BaseShaderProps {
+    children?: JSX.Element;
+    blendMode?: BlendMode;
+    opacity?: number;
+    visible?: boolean;
+    id?: string;
+    maskSource?: string;
+    maskType?: string;
+    renderOrder?: number;
+    transform?: Partial<TransformConfig>;
+}
+/**
+ * Component-specific props that merge base props with shader-specific props
+ * Note: ComponentProps are made optional since they have defaults from the shader definition
+ */
+type ShaderComponentProps = BaseShaderProps & Partial<Omit<ComponentProps, 'distortion' | 'seed'>> & {
+    distortion?: ComponentProps['distortion'] | PropDriver;
+    seed?: ComponentProps['seed'] | PropDriver;
+};
+/**
+ * The main Solid wrapper component for Shader shader nodes
+ */
+export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
+//# sourceMappingURL=FlowingGradient.d.ts.map

package/dist/solid/components/FlowingGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowingGradient.d.ts","sourceRoot":"","sources":["../../src/components/FlowingGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAC9F,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAGxF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACxC;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,MAAM,CAAC,CAAC,GAAG;IACnG,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;CAC5C,CAAC;AAmCF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA+LlE"}

package/dist/solid/components/FlowingGradient.js

@@ -0,0 +1,183 @@
+import { createComponent, template, setAttribute, insert, use } from "solid-js/web";
+import { splitProps, createMemo, onMount, onCleanup, createEffect } from "solid-js";
+import { createUniformsMap } from "../../core/index.js";
+import { setColorSpaceMode } from "../../core/utilities/transformations/index.js";
+import { componentDefinition } from "../../core/shaders/FlowingGradient/index.js";
+import { useShaderContext, ShaderContext } from "../engine/Shader.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span style=display:contents>`);
+function isPropDriver(value) {
+  return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+}
+const DEFAULT_TRANSFORM = {
+  offsetX: 0,
+  offsetY: 0,
+  rotation: 0,
+  scale: 1,
+  anchorX: 0.5,
+  anchorY: 0.5,
+  edges: "transparent"
+};
+const defaultProps = {
+  blendMode: "normal",
+  visible: true
+  // opacity intentionally has no default - handled by renderer
+  // transform intentionally has no default - handled by effectiveTransform
+};
+try {
+  if (componentDefinition && componentDefinition.props) {
+    Object.entries(componentDefinition.props).forEach(([key, config]) => {
+      const propConfig = config;
+      if (propConfig && typeof propConfig === "object" && "default" in propConfig) {
+        defaultProps[key] = propConfig.default;
+      }
+    });
+  }
+} catch (e) {
+  console.warn("Error extracting default props:", e);
+}
+function ShaderComponent(props) {
+  const [local, otherProps] = splitProps(props, ["children"]);
+  const context = useShaderContext();
+  const {
+    shaderParentId: parentId,
+    shaderNodeRegister: parentRegister,
+    shaderUniformUpdate: parentUniformUpdate,
+    shaderMetadataUpdate: parentMetadataUpdate,
+    shaderColorSpace
+  } = context;
+  const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
+  const effectiveProps = createMemo(() => {
+    let baseProps = {
+      ...defaultProps
+    };
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (value !== void 0 && !isPropDriver(value)) {
+        baseProps[key] = value;
+      }
+    }
+    return baseProps;
+  });
+  const effectiveTransform = createMemo(() => ({
+    ...DEFAULT_TRANSFORM,
+    ...props.transform
+  }));
+  const mapsFromProps = createMemo(() => {
+    const maps = {};
+    for (const [key, value] of Object.entries(otherProps)) {
+      if (isPropDriver(value)) maps[key] = value;
+    }
+    return Object.keys(maps).length > 0 ? maps : void 0;
+  });
+  let uniformsMap = null;
+  const getUniformsMap = () => {
+    if (!uniformsMap) {
+      setColorSpaceMode(shaderColorSpace);
+      uniformsMap = createUniformsMap(componentDefinition, effectiveProps(), instanceId);
+    }
+    return uniformsMap;
+  };
+  const childContextValue = createMemo(() => ({
+    ...context,
+    shaderParentId: instanceId
+  }));
+  let markerRef;
+  let detectedRenderOrder = void 0;
+  let isRegistered = false;
+  onMount(() => {
+    const uniforms = getUniformsMap();
+    if (!uniforms) return;
+    try {
+      const metadata = {
+        blendMode: props.blendMode || "normal",
+        opacity: props.opacity,
+        visible: props.visible === false ? false : true,
+        id: props.id,
+        mask: props.maskSource ? {
+          source: props.maskSource,
+          type: props.maskType || "alpha"
+        } : void 0,
+        maps: mapsFromProps(),
+        renderOrder: props.renderOrder ?? detectedRenderOrder,
+        transform: effectiveTransform()
+      };
+      parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniforms, componentDefinition);
+      isRegistered = true;
+      if (props.renderOrder === void 0 && markerRef) {
+        const parent = markerRef.parentElement;
+        if (parent) {
+          const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+          const position = Array.from(siblings).indexOf(markerRef);
+          if (position >= 0) {
+            detectedRenderOrder = position;
+            parentMetadataUpdate(instanceId, {
+              renderOrder: position
+            });
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error registering shader node:", error);
+    }
+  });
+  onCleanup(() => {
+    isRegistered = false;
+    parentRegister(instanceId, null, null, null, null);
+  });
+  createEffect(() => {
+    if (!isRegistered) return;
+    const uniforms = getUniformsMap();
+    if (!uniforms) return;
+    try {
+      const props_snapshot = effectiveProps();
+      Object.entries(uniforms).forEach(([propName, uniformData]) => {
+        if (!uniformData || typeof uniformData !== "object") return;
+        const {
+          uniform
+        } = uniformData;
+        if ((uniform == null ? void 0 : uniform.value) !== void 0 && propName in props_snapshot) {
+          const newValue = props_snapshot[propName];
+          parentUniformUpdate(instanceId, propName, newValue);
+        }
+      });
+    } catch (error) {
+      console.error("Error updating uniforms:", error);
+    }
+  });
+  createEffect(() => {
+    if (!isRegistered) return;
+    try {
+      const metadata = {
+        blendMode: props.blendMode || "normal",
+        opacity: props.opacity,
+        visible: props.visible === false ? false : true,
+        id: props.id,
+        mask: props.maskSource ? {
+          source: props.maskSource,
+          type: props.maskType || "alpha"
+        } : void 0,
+        maps: mapsFromProps(),
+        renderOrder: props.renderOrder ?? detectedRenderOrder,
+        transform: effectiveTransform()
+      };
+      parentMetadataUpdate(instanceId, metadata);
+    } catch (error) {
+      console.error("Error updating metadata:", error);
+    }
+  });
+  return createComponent(ShaderContext.Provider, {
+    get value() {
+      return childContextValue();
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      var _ref$ = markerRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : markerRef = _el$;
+      setAttribute(_el$, "data-shader-id", instanceId);
+      insert(_el$, () => local.children);
+      return _el$;
+    }
+  });
+}
+export {
+  ShaderComponent as default
+};

package/dist/solid/engine/Preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/engine/Preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,GAAG,EAAoC,MAAM,UAAU,CAAA;AAkSlH,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,GAAG,MAAM,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAID,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eAmHlD"}
+{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/engine/Preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,GAAG,EAAoC,MAAM,UAAU,CAAA;AAoSlH,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,GAAG,MAAM,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAID,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eAmHlD"}

package/dist/solid/engine/Preview.js

@@ -1,36 +1,37 @@
 import { template, insert, memo, createComponent, effect, className, style, setAttribute, Dynamic, mergeProps } from "solid-js/web";
 import { createSignal, createEffect, createMemo, For } from "solid-js";
-import ShaderComponent$1p from "../components/AngularBlur.js";
-import ShaderComponent$1o from "../components/Ascii.js";
-import ShaderComponent$1n from "../components/Aurora.js";
-import ShaderComponent$1m from "../components/Beam.js";
-import ShaderComponent$1l from "../components/Blob.js";
-import ShaderComponent$1k from "../components/Blur.js";
-import ShaderComponent$1j from "../components/BrightnessContrast.js";
-import ShaderComponent$1i from "../components/Bulge.js";
-import ShaderComponent$1h from "../components/CRTScreen.js";
-import ShaderComponent$1g from "../components/ChannelBlur.js";
-import ShaderComponent$1f from "../components/Checkerboard.js";
-import ShaderComponent$1e from "../components/ChromaFlow.js";
-import ShaderComponent$1d from "../components/ChromaticAberration.js";
-import ShaderComponent$1c from "../components/Circle.js";
-import ShaderComponent$1b from "../components/ConcentricSpin.js";
-import ShaderComponent$1a from "../components/ContourLines.js";
-import ShaderComponent$19 from "../components/Crescent.js";
-import ShaderComponent$18 from "../components/Cross.js";
-import ShaderComponent$17 from "../components/CursorRipples.js";
-import ShaderComponent$16 from "../components/CursorTrail.js";
-import ShaderComponent$15 from "../components/DiffuseBlur.js";
-import ShaderComponent$14 from "../components/Dither.js";
-import ShaderComponent$13 from "../components/DotGrid.js";
-import ShaderComponent$12 from "../components/Duotone.js";
-import ShaderComponent$11 from "../components/Ellipse.js";
-import ShaderComponent$10 from "../components/Emboss.js";
-import ShaderComponent$$ from "../components/FallingLines.js";
-import ShaderComponent$_ from "../components/FilmGrain.js";
-import ShaderComponent$Z from "../components/FloatingParticles.js";
-import ShaderComponent$Y from "../components/FlowField.js";
-import ShaderComponent$X from "../components/Flower.js";
+import ShaderComponent$1q from "../components/AngularBlur.js";
+import ShaderComponent$1p from "../components/Ascii.js";
+import ShaderComponent$1o from "../components/Aurora.js";
+import ShaderComponent$1n from "../components/Beam.js";
+import ShaderComponent$1m from "../components/Blob.js";
+import ShaderComponent$1l from "../components/Blur.js";
+import ShaderComponent$1k from "../components/BrightnessContrast.js";
+import ShaderComponent$1j from "../components/Bulge.js";
+import ShaderComponent$1i from "../components/CRTScreen.js";
+import ShaderComponent$1h from "../components/ChannelBlur.js";
+import ShaderComponent$1g from "../components/Checkerboard.js";
+import ShaderComponent$1f from "../components/ChromaFlow.js";
+import ShaderComponent$1e from "../components/ChromaticAberration.js";
+import ShaderComponent$1d from "../components/Circle.js";
+import ShaderComponent$1c from "../components/ConcentricSpin.js";
+import ShaderComponent$1b from "../components/ContourLines.js";
+import ShaderComponent$1a from "../components/Crescent.js";
+import ShaderComponent$19 from "../components/Cross.js";
+import ShaderComponent$18 from "../components/CursorRipples.js";
+import ShaderComponent$17 from "../components/CursorTrail.js";
+import ShaderComponent$16 from "../components/DiffuseBlur.js";
+import ShaderComponent$15 from "../components/Dither.js";
+import ShaderComponent$14 from "../components/DotGrid.js";
+import ShaderComponent$13 from "../components/Duotone.js";
+import ShaderComponent$12 from "../components/Ellipse.js";
+import ShaderComponent$11 from "../components/Emboss.js";
+import ShaderComponent$10 from "../components/FallingLines.js";
+import ShaderComponent$$ from "../components/FilmGrain.js";
+import ShaderComponent$_ from "../components/FloatingParticles.js";
+import ShaderComponent$Z from "../components/FlowField.js";
+import ShaderComponent$Y from "../components/Flower.js";
+import ShaderComponent$X from "../components/FlowingGradient.js";
 import ShaderComponent$W from "../components/Form3D.js";
 import ShaderComponent$V from "../components/Glass.js";
 import ShaderComponent$U from "../components/GlassTiles.js";
@@ -93,37 +94,38 @@ import ShaderComponent from "../components/ZoomBlur.js";
 import Shader from "./Shader.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div style=position:relative;width:100%;height:100%><a target=_blank rel="noopener noreferrer"style="position:absolute;bottom:8px;right:12px;font-size:11px;font-family:-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, sans-serif;color:rgba(255, 255, 255, 0.5);text-decoration:none;pointer-events:auto;z-index:10;text-shadow:0 1px 3px rgba(0, 0, 0, 0.4);transition:color 0.2s ease">`);
 const componentMap = {
-  AngularBlur: ShaderComponent$1p,
-  Ascii: ShaderComponent$1o,
-  Aurora: ShaderComponent$1n,
-  Beam: ShaderComponent$1m,
-  Blob: ShaderComponent$1l,
-  Blur: ShaderComponent$1k,
-  BrightnessContrast: ShaderComponent$1j,
-  Bulge: ShaderComponent$1i,
-  CRTScreen: ShaderComponent$1h,
-  ChannelBlur: ShaderComponent$1g,
-  Checkerboard: ShaderComponent$1f,
-  ChromaFlow: ShaderComponent$1e,
-  ChromaticAberration: ShaderComponent$1d,
-  Circle: ShaderComponent$1c,
-  ConcentricSpin: ShaderComponent$1b,
-  ContourLines: ShaderComponent$1a,
-  Crescent: ShaderComponent$19,
-  Cross: ShaderComponent$18,
-  CursorRipples: ShaderComponent$17,
-  CursorTrail: ShaderComponent$16,
-  DiffuseBlur: ShaderComponent$15,
-  Dither: ShaderComponent$14,
-  DotGrid: ShaderComponent$13,
-  Duotone: ShaderComponent$12,
-  Ellipse: ShaderComponent$11,
-  Emboss: ShaderComponent$10,
-  FallingLines: ShaderComponent$$,
-  FilmGrain: ShaderComponent$_,
-  FloatingParticles: ShaderComponent$Z,
-  FlowField: ShaderComponent$Y,
-  Flower: ShaderComponent$X,
+  AngularBlur: ShaderComponent$1q,
+  Ascii: ShaderComponent$1p,
+  Aurora: ShaderComponent$1o,
+  Beam: ShaderComponent$1n,
+  Blob: ShaderComponent$1m,
+  Blur: ShaderComponent$1l,
+  BrightnessContrast: ShaderComponent$1k,
+  Bulge: ShaderComponent$1j,
+  CRTScreen: ShaderComponent$1i,
+  ChannelBlur: ShaderComponent$1h,
+  Checkerboard: ShaderComponent$1g,
+  ChromaFlow: ShaderComponent$1f,
+  ChromaticAberration: ShaderComponent$1e,
+  Circle: ShaderComponent$1d,
+  ConcentricSpin: ShaderComponent$1c,
+  ContourLines: ShaderComponent$1b,
+  Crescent: ShaderComponent$1a,
+  Cross: ShaderComponent$19,
+  CursorRipples: ShaderComponent$18,
+  CursorTrail: ShaderComponent$17,
+  DiffuseBlur: ShaderComponent$16,
+  Dither: ShaderComponent$15,
+  DotGrid: ShaderComponent$14,
+  Duotone: ShaderComponent$13,
+  Ellipse: ShaderComponent$12,
+  Emboss: ShaderComponent$11,
+  FallingLines: ShaderComponent$10,
+  FilmGrain: ShaderComponent$$,
+  FloatingParticles: ShaderComponent$_,
+  FlowField: ShaderComponent$Z,
+  Flower: ShaderComponent$Y,
+  FlowingGradient: ShaderComponent$X,
   Form3D: ShaderComponent$W,
   Glass: ShaderComponent$V,
   GlassTiles: ShaderComponent$U,

package/dist/solid/engine/Shader.d.ts

@@ -12,6 +12,7 @@ interface ShaderProps {
     disableTelemetry?: boolean;
     colorSpace?: 'p3-linear' | 'srgb';
     isPreview?: boolean;
+    onReady?: () => void;
     style?: JSX.CSSProperties;
     class?: string;
     [key: string]: any;

package/dist/solid/engine/Shader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shader.d.ts","sourceRoot":"","sources":["../../src/engine/Shader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuF,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AASzH,MAAM,WAAW,kBAAkB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAClJ,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/E,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,WAAW,GAAG,MAAM,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,4DAAsC,CAAC;AAEjE,UAAU,WAAW;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,QAAQ,EAAE,WAAW,eA+QnD;AAGD,wBAAgB,gBAAgB,uBAM/B"}
+{"version":3,"file":"Shader.d.ts","sourceRoot":"","sources":["../../src/engine/Shader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuF,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AASzH,MAAM,WAAW,kBAAkB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,mBAAmB,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAClJ,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/E,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,WAAW,GAAG,MAAM,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,4DAAsC,CAAC;AAEjE,UAAU,WAAW;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,QAAQ,EAAE,WAAW,eAkRnD;AAGD,wBAAgB,gBAAgB,uBAM/B"}

package/dist/solid/engine/Shader.js

@@ -7,11 +7,15 @@ import { setColorSpaceMode } from "../../core/utilities/transformations/index.js
 var _tmpl$ = /* @__PURE__ */ template(`<div><canvas data-renderer=shaders style=width:100%;height:100%;display:block>`);
 const ShaderContext = createContext();
 function Shader(allProps) {
-  const [props, domProps] = splitProps(allProps, ["children", "disableTelemetry", "colorSpace", "isPreview", "style", "class"]);
+  const [props, domProps] = splitProps(allProps, ["children", "disableTelemetry", "colorSpace", "isPreview", "onReady", "style", "class"]);
   let containerRef;
   let canvasRef;
   const rootId = "shader-root-" + Math.random().toString(36).substring(7);
   const rendererInstance = shaderRenderer();
+  rendererInstance.setOnReady(() => {
+    var _a;
+    return (_a = props.onReady) == null ? void 0 : _a.call(props);
+  });
   let telemetryCollector = null;
   let telemetryStartTimeout = null;
   let shouldSendTelemetry = null;
@@ -63,7 +67,7 @@ function Shader(allProps) {
     const checkRendering = () => {
       const stats = rendererInstance.getPerformanceStats();
       if (stats.fps > 0) {
-        const version = "2.5.81";
+        const version = "2.5.82";
         telemetryCollector = startTelemetry(rendererInstance, version, props.disableTelemetry, props.isPreview);
         if (telemetryCollector) {
           telemetryCollector.start();

package/dist/solid/index.d.ts

@@ -29,6 +29,7 @@ export { default as FilmGrain } from './components/FilmGrain';
 export { default as FloatingParticles } from './components/FloatingParticles';
 export { default as FlowField } from './components/FlowField';
 export { default as Flower } from './components/Flower';
+export { default as FlowingGradient } from './components/FlowingGradient';
 export { default as Form3D } from './components/Form3D';
 export { default as Glass } from './components/Glass';
 export { default as GlassTiles } from './components/GlassTiles';