@wix/editor-react-components 1.2153.0

package/dist/site/components/TransparentVideo/component.js

@@ -0,0 +1,3613 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { F as FilterEffectType, V as VideoStartType, a as VideoEndType, b as VideoPlayingState } from "../chunks/TransparentVideo.types.js";
+import { S as STATIC_MEDIA_URL } from "../chunks/index3.js";
+import { c as clsx } from "../chunks/clsx.js";
+import { V as Video } from "../chunks/Video.js";
+import { p as parse } from "../chunks/index4.js";
+function getSepia(amount) {
+  return `${0.393 + 0.607 * (1 - amount)} ${0.769 - 0.769 * (1 - amount)} ${0.189 - 0.189 * (1 - amount)} 0 0
+     ${0.349 - 0.349 * (1 - amount)} ${0.686 + 0.314 * (1 - amount)} ${0.168 - 0.168 * (1 - amount)} 0 0
+     ${0.272 - 0.272 * (1 - amount)} ${0.534 - 0.534 * (1 - amount)} ${0.131 + 0.869 * (1 - amount)} 0 0
+     0 0 0 1 0`;
+}
+function getContrast(amount) {
+  return `<feFuncR type="linear" slope="${amount}" intercept="${Math.round((-0.5 * amount + 0.5) * 100) / 100}"/>
+<feFuncG type="linear" slope="${amount}" intercept="${Math.round((-0.5 * amount + 0.5) * 100) / 100}"/>
+<feFuncB type="linear" slope="${amount}" intercept="${Math.round((-0.5 * amount + 0.5) * 100) / 100}"/>`;
+}
+function getBrightness(amount) {
+  return `<feFuncR type="linear" slope="${amount}" /><feFuncG type="linear" slope="${amount}" /><feFuncB type="linear" slope="${amount}" />`;
+}
+function getTint(color2) {
+  return `${1 - color2.r} 0 0 0 ${color2.r} ${1 - color2.g} 0 0 0 ${color2.g} ${1 - color2.b} 0 0 0 ${color2.b} 0 0 0 1 0`;
+}
+function getLumaMatrix(whiteParams, blackParams) {
+  return `${whiteParams.r} 0 0 0 ${blackParams.r}
+     ${whiteParams.g} 1 0 0 ${blackParams.g}
+     ${whiteParams.b} 0 1 0 ${blackParams.b}
+     0 0 0 1 0`;
+}
+function getColor(color2, opacity = 1) {
+  return `0 0 0 0 ${color2.r}
+0 0 0 0 ${color2.g}
+0 0 0 0 ${color2.b}
+0 0 0 ${opacity} 0`;
+}
+function getDoutone(light, dark) {
+  const r_diff = light.r - dark.r;
+  const g_diff = light.g - dark.g;
+  const b_diff = light.b - dark.b;
+  return `${r_diff} 0 0 0 ${dark.r} ${g_diff} 0 0 0 ${dark.g} ${b_diff} 0 0 0 ${dark.b} 0 0 0 1 0`;
+}
+function getAlpha(amount) {
+  return `<feFuncA type="linear" slope="${amount}" />`;
+}
+function hexToRgb(hex) {
+  const [, r, g, b] = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return {
+    r: parseInt(r, 16),
+    g: parseInt(g, 16),
+    b: parseInt(b, 16)
+  };
+}
+function hex2RgbNorm(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  return {
+    r: r / 255,
+    g: g / 255,
+    b: b / 255
+  };
+}
+function attrToString(key, value) {
+  return value || value === 0 ? `${key}="${value}"` : "";
+}
+function attrsObjectToString(attrs) {
+  return Object.keys(attrs).map((key) => attrToString(key, attrs[key])).join(" ");
+}
+function filterWrapperTemplate({ id, content, attrs = {} }) {
+  return `<filter id="${id}" color-interpolation-filters="sRGB" ${attrsObjectToString(attrs)}>
+    <feComponentTransfer result="srcRGB"/>
+    ${content}
+    <feComponentTransfer/>
+</filter>`;
+}
+function identity({ inAttr }) {
+  return `<feColorMatrix ${attrToString("in", inAttr)}/>`;
+}
+function contrast({ value }) {
+  return `<feComponentTransfer>${getContrast(value)}</feComponentTransfer>`;
+}
+function brightness({ value, result }) {
+  return `<feComponentTransfer ${attrToString("result", result)}>${getBrightness(value)}</feComponentTransfer>`;
+}
+function saturation({ value, inAttr, result }) {
+  return `<feColorMatrix type="saturate" values="${value}" ${inAttr ? `in="${inAttr}"` : ""}${result ? `result="${result}"` : ""}/>`;
+}
+function sepia({ value }) {
+  return `<feColorMatrix type="matrix" values="${getSepia(value)}"/>`;
+}
+function hue({ value }) {
+  return `<feColorMatrix type="hueRotate" values="${value}"/>`;
+}
+function color({ value, inAttr, result }) {
+  const hexColor = typeof value === "string" ? value : value.color;
+  const opacity = typeof value === "object" && typeof value.opacity !== "undefined" ? value.opacity : 1;
+  return `<feColorMatrix type="matrix" values="${getColor(hex2RgbNorm(hexColor), opacity)}" ${inAttr ? `in="${inAttr}"` : ""}${result ? `result="${result}"` : ""}/>`;
+}
+function tint({ value }) {
+  return `<feColorMatrix type="matrix" values="${getTint(hex2RgbNorm(value))}"/>`;
+}
+function blur({ value, inAttr }) {
+  return `<feGaussianBlur stdDeviation="${value}" ${inAttr ? `in="${inAttr}"` : ""}/>`;
+}
+function alpha({ value, inAttr, result }) {
+  return `<feComponentTransfer ${attrToString("in", inAttr)} ${attrToString("result", result)}>${getAlpha(
+    value
+  )}</feComponentTransfer>`;
+}
+function offset({ value, inAttr, result }) {
+  return `<feOffset dx="${value.x}" dy="${value.y}" ${inAttr ? `in="${inAttr}"` : ""}${result ? `result="${result}"` : ""}/>`;
+}
+function blend$1({ value, inAttr, in2Attr, result }) {
+  return `<feBlend mode="${value}" in="${inAttr}" in2="${in2Attr}" ${attrToString("result", result)}/>`;
+}
+function composite({ value, inAttr, in2Attr, result }) {
+  return `<feComposite operator="${value}" in="${inAttr}" in2="${in2Attr}" ${attrToString("result", result)}/>`;
+}
+function duotone$1({ value: { dark, light }, inAttr, result }) {
+  return `${saturation({ value: 0 })}
+<feColorMatrix type="matrix" values="${getDoutone(hex2RgbNorm(light), hex2RgbNorm(dark))}" ${inAttr ? `in="${inAttr}"` : ""}${result ? `result="${result}"` : ""}/>`;
+}
+function luma({ value: { dark, light }, result }) {
+  return `<feColorMatrix type="matrix" values="${getLumaMatrix(light, dark)}" ${result ? `result="${result}"` : ""}/>`;
+}
+function shadow({ value: { blurRadius, mergeGraphic, ...rest } }) {
+  return `${blur({ value: blurRadius, inAttr: "SourceAlpha" })}
+${offset({ value: rest })}
+${color({ value: rest })}
+${mergeGraphic ? `<feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+</feMerge>` : ""}`;
+}
+const filterComponentTempaltesWithNumber = {
+  blur,
+  saturation,
+  contrast,
+  brightness,
+  sepia,
+  hue,
+  alpha
+};
+const filterComponentTempaltesWithString = {
+  blend: blend$1,
+  color,
+  composite,
+  tint
+};
+const filterComponentTempaltes = {
+  duotone: duotone$1,
+  shadow,
+  color,
+  offset
+};
+function getFilterValue(key, value, overrides) {
+  if (key === "duotone") {
+    return {
+      light: "duotoneLight" in overrides && overrides.duotoneLight || value.light,
+      dark: "duotoneDark" in overrides && overrides.duotoneDark || value.dark
+    };
+  } else if (key in overrides) {
+    return overrides[key];
+  }
+  return value;
+}
+function interpolate(id, filterDefinition, overrides, attrs) {
+  const content = filterDefinition.map((effect) => {
+    const { key, value } = effect;
+    const filterValue = getFilterValue(key, value, overrides);
+    const arg = { ...effect, value: filterValue };
+    if (typeof filterValue === "number") {
+      return filterComponentTempaltesWithNumber[key](
+        arg
+      );
+    } else if (typeof filterValue === "string") {
+      return filterComponentTempaltesWithString[key](
+        arg
+      );
+    } else if (key === "luma") {
+      return luma(arg);
+    } else if (key === "identity") {
+      return identity(arg);
+    } else {
+      return filterComponentTempaltes[key](
+        arg
+      );
+    }
+  }).join("\n");
+  return filterWrapperTemplate({ id, content, attrs });
+}
+const filterPresets = {
+  normal: [{ key: "identity", inAttr: "SourceGraphic" }],
+  ink: [
+    { key: "sepia", value: 0.3 },
+    { key: "contrast", value: 1.5 },
+    { key: "brightness", value: 1.1 },
+    { key: "saturation", value: 0 }
+  ],
+  kennedy: [
+    { key: "saturation", value: 0 },
+    { key: "contrast", value: 1.1 },
+    { key: "brightness", value: 0.9 }
+  ],
+  feathered: [
+    { key: "saturation", value: 0.2 },
+    { key: "contrast", value: 0.85 },
+    { key: "brightness", value: 0.9 },
+    { key: "tint", value: "#171212" }
+  ],
+  blur: [{ key: "blur", value: 2 }],
+  whistler: [
+    {
+      key: "color",
+      value: "#ffffff",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    { key: "alpha", value: 0.4, inAttr: "color", result: "flood_alpha" },
+    { key: "blur", value: 1.8, inAttr: "srcRGB" },
+    { key: "alpha", value: 0.6, result: "blur_alpha" },
+    {
+      key: "blend",
+      value: "normal",
+      inAttr: "blur_alpha",
+      in2Attr: "srcRGB",
+      result: "source_blur"
+    },
+    {
+      key: "blend",
+      value: "overlay",
+      inAttr: "flood_alpha",
+      in2Attr: "source_blur"
+    },
+    { key: "brightness", value: 1.1 },
+    { key: "contrast", value: 0.9 },
+    { key: "saturation", value: 0.6 }
+  ],
+  "3d": [
+    { key: "color", value: "#00ffff", inAttr: "srcRGB", result: "color1" },
+    {
+      key: "blend",
+      value: "lighten",
+      inAttr: "color1",
+      in2Attr: "srcRGB",
+      result: "image_color1"
+    },
+    {
+      key: "offset",
+      value: { x: -3, y: 0 },
+      inAttr: "image_color1",
+      result: "image_color1_offset"
+    },
+    { key: "color", value: "#ff0000", inAttr: "srcRGB", result: "color2" },
+    {
+      key: "blend",
+      value: "lighten",
+      inAttr: "color2",
+      in2Attr: "srcRGB",
+      result: "image_color2"
+    },
+    {
+      key: "offset",
+      value: { x: 3, y: 0 },
+      inAttr: "image_color2",
+      result: "image_color2_offset"
+    },
+    {
+      key: "blend",
+      value: "darken",
+      inAttr: "image_color1_offset",
+      in2Attr: "image_color2_offset"
+    }
+  ],
+  blueray: [
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#1b00ff",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "color",
+      in2Attr: "grayscale"
+    }
+  ],
+  lighten: [
+    { key: "color", value: "#ffffff", inAttr: "srcRGB", result: "color" },
+    { key: "alpha", value: 0.46, inAttr: "color", result: "color_alpha" },
+    {
+      key: "composite",
+      value: "over",
+      inAttr: "color_alpha",
+      in2Attr: "srcRGB"
+    }
+  ],
+  darken: [
+    { key: "brightness", value: 0.4, result: "brightness" },
+    {
+      key: "blend",
+      value: "darken",
+      inAttr: "brightness",
+      in2Attr: "SourceGraphic"
+    }
+  ],
+  pinkrinse: [
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#9a1a77",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  redrum: [
+    { key: "contrast", value: 0.75 },
+    { key: "brightness", value: 1.2 },
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#f26552",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  greenwash: [
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#1c9784",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "color",
+      in2Attr: "grayscale"
+    }
+  ],
+  yellowstreak: [
+    { key: "contrast", value: 2 },
+    { key: "brightness", value: 1.1 },
+    { key: "saturation", value: 0, result: "grayscale" },
+    { key: "color", value: "#ffd200", result: "color" },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  neonsky: [
+    { key: "contrast", value: 0.8 },
+    { key: "duotone", value: { dark: "#800033", light: "#fff200" } },
+    {
+      key: "luma",
+      value: {
+        dark: { r: 0, g: -0.1, b: 0 },
+        light: { r: 1.2, g: 0, b: 0 }
+      }
+    }
+  ],
+  seaweed: [{ key: "duotone", value: { dark: "#0b00e9", light: "#00d980" } }],
+  soledad: [
+    { key: "brightness", value: 1.1 },
+    { key: "contrast", value: 0.9 },
+    { key: "saturation", value: 0.8, result: "saturation" },
+    {
+      key: "color",
+      value: "#fce8d3",
+      inAttr: "SourceGraphic",
+      result: "color1"
+    },
+    { key: "alpha", value: 0.15, inAttr: "color1", result: "color_alpha" },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "color_alpha",
+      in2Attr: "saturation",
+      result: "source"
+    },
+    {
+      key: "color",
+      value: "#fc9f1a",
+      inAttr: "SourceGraphic",
+      result: "color2"
+    },
+    { key: "alpha", value: 0.23, inAttr: "color2", result: "color_alpha2" },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "color_alpha2",
+      in2Attr: "source"
+    }
+  ],
+  sangria: [
+    { key: "brightness", value: 0.95 },
+    { key: "contrast", value: 1.35 },
+    { key: "saturation", value: 0.5, result: "saturation" },
+    {
+      key: "color",
+      value: "#c712e2",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    { key: "alpha", value: 0.08, inAttr: "color", result: "color_alpha" },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "color_alpha",
+      in2Attr: "saturation",
+      result: "source"
+    }
+  ],
+  malibu: [
+    { key: "contrast", value: 0.8 },
+    { key: "duotone", value: { dark: "#0045d6", light: "#ffdbc0" } }
+  ],
+  candyfloss: [
+    { key: "contrast", value: 0.8 },
+    { key: "duotone", value: { dark: "#ff0000", light: "#ff9bff" } }
+  ],
+  elmo: [
+    { key: "contrast", value: 0.8 },
+    { key: "duotone", value: { dark: "#ff0000", light: "#cadccc" } }
+  ],
+  unicorn: [
+    { key: "contrast", value: 0.8 },
+    { key: "duotone", value: { dark: "#409ca5", light: "#dfb1bd" } }
+  ],
+  kerouac: [{ key: "duotone", value: { dark: "#37312e", light: "#b5a8a2" } }],
+  koolaid: [{ key: "duotone", value: { dark: "#5f00ad", light: "#fdcec1" } }],
+  hydra: [{ key: "duotone", value: { dark: "#f72b3e", light: "#ffeced" } }],
+  pixie: [{ key: "duotone", value: { dark: "#85d3de", light: "#ffe1d5" } }],
+  nightrain: [{ key: "duotone", value: { dark: "#2f3c6d", light: "#8e96b5" } }],
+  bauhaus: [{ key: "duotone", value: { dark: "#002787", light: "#e8e8e8" } }],
+  neptune: [{ key: "duotone", value: { dark: "#0a7eff", light: "#e5defa" } }],
+  orca: [
+    { key: "saturation", value: 0.2 },
+    { key: "contrast", value: 0.85 },
+    { key: "brightness", value: 0.9 },
+    { key: "tint", value: "#2b524c" }
+  ],
+  manhattan: [
+    { key: "saturation", value: 0.2 },
+    { key: "contrast", value: 0.85 },
+    { key: "brightness", value: 0.9 },
+    { key: "tint", value: "#211c0f" }
+  ],
+  goldie: [
+    { key: "saturation", value: 0.2 },
+    { key: "contrast", value: 0.85 },
+    { key: "brightness", value: 0.9 },
+    { key: "tint", value: "#a6966e" }
+  ],
+  flamingo: [
+    { key: "saturation", value: 0.2 },
+    { key: "contrast", value: 0.85 },
+    { key: "brightness", value: 0.9 },
+    { key: "tint", value: "#ff4283" }
+  ],
+  faded: [
+    { key: "saturation", value: 0.2 },
+    { key: "contrast", value: 0.85 },
+    { key: "brightness", value: 0.9 },
+    { key: "tint", value: "#dcdddc" }
+  ],
+  gotham: [
+    { key: "brightness", value: 0.95 },
+    { key: "contrast", value: 1.35 },
+    { key: "saturation", value: 0.5, result: "saturation" },
+    {
+      key: "color",
+      value: "#93676f",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    { key: "alpha", value: 0.08, inAttr: "color", result: "color_alpha" },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "color_alpha",
+      in2Attr: "saturation",
+      result: "source"
+    }
+  ],
+  hulk: [
+    { key: "contrast", value: 0.75 },
+    { key: "brightness", value: 1.2 },
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#b5c900",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  midnight: [
+    { key: "contrast", value: 0.75 },
+    { key: "brightness", value: 1.2 },
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#00254b",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  lucille: [
+    { key: "contrast", value: 0.75 },
+    { key: "brightness", value: 1.2 },
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#d60000",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  organic: [
+    { key: "contrast", value: 0.75 },
+    { key: "brightness", value: 1.2 },
+    { key: "saturation", value: 0, result: "grayscale" },
+    {
+      key: "color",
+      value: "#debda5",
+      inAttr: "SourceGraphic",
+      result: "color"
+    },
+    {
+      key: "blend",
+      value: "multiply",
+      inAttr: "grayscale",
+      in2Attr: "color"
+    }
+  ],
+  grayscale: [
+    { key: "brightness", value: 1 },
+    { key: "contrast", value: 1 },
+    { key: "duotone", value: { dark: "#000000", light: "#ffffff" } }
+  ],
+  tvDuotone: [
+    { key: "brightness", value: 0.9 },
+    { key: "contrast", value: 1.5 },
+    { key: "duotone", value: { dark: "@color_23", light: "@color_18" } }
+  ],
+  tvMonotoneDark: [
+    { key: "brightness", value: 1.2 },
+    { key: "contrast", value: 1 },
+    { key: "duotone", value: { dark: "#000000", light: "@color_8" } }
+  ],
+  tvMonotoneLight: [
+    { key: "brightness", value: 1 },
+    { key: "contrast", value: 1 },
+    { key: "duotone", value: { dark: "@color_8", light: "#ffffff" } }
+  ],
+  tvHue: [
+    { key: "hue", value: -60 },
+    { key: "saturation", value: 1 }
+  ]
+};
+function getFilter(id, name, overrides, attrs) {
+  const filter = filterPresets[name] || [];
+  return interpolate(id, filter, overrides || {}, attrs);
+}
+const getFilterEffectString = (id, filterEffect) => {
+  if (!filterEffect) return "";
+  return getFilter(id, `${filterEffect.effectType}`, {
+    ...filterEffect
+  }, {});
+};
+const removeMediaPrefix = (uri) => {
+  if (uri.startsWith("media/")) {
+    return uri.replace(/^media\//, "");
+  }
+  if (uri.startsWith("/media/")) {
+    return uri.replace(/^\/media\//, "");
+  }
+  return uri;
+};
+const formatPosterUrl = (uri, width, height) => {
+  if (!uri) {
+    return void 0;
+  }
+  if (uri.startsWith("http")) {
+    return uri;
+  }
+  const normalizedUri = removeMediaPrefix(uri);
+  return `${STATIC_MEDIA_URL}${normalizedUri}`;
+};
+const SVG_FILTER_ID_PREFIX = "svg_filter_";
+const replaceCompIdPlaceholder = (str, compId) => str.replace(/<%= compId %>/g, compId);
+const getActiveFilterEffect = (props) => {
+  return props.filterEffectRecolorVideo ? getFilterEffectData(props) : void 0;
+};
+const sanitizeString = (value) => value == null ? void 0 : value.replace(/[<>]/g, "");
+const getFilterEffectData = (props) => {
+  const effectTypeObj = {
+    effectType: props.effectType,
+    isCustom: props.isCustom
+  };
+  if (props.effectType === FilterEffectType.tvHue) {
+    effectTypeObj.hue = props == null ? void 0 : props.hue;
+    effectTypeObj.saturation = props == null ? void 0 : props.saturation;
+  } else {
+    effectTypeObj.duotoneDark = sanitizeString(props == null ? void 0 : props.duotoneDark);
+    effectTypeObj.duotoneLight = sanitizeString(props == null ? void 0 : props.duotoneLight);
+    effectTypeObj.brightness = props.brightness;
+    effectTypeObj.contrast = props.contrast;
+  }
+  return effectTypeObj;
+};
+const closeSelfClosingSvgTags = (svg) => {
+  return svg.replace(
+    /<([a-zA-Z][\w:-]*)([^>]*)\/>/g,
+    "<$1$2></$1>"
+  );
+};
+function alphaMask({ isLuminance = false } = {}) {
+  return {
+    vertex: {
+      attribute: {
+        a_alphaMaskTexCoord: "vec2"
+      },
+      main: `
+    v_alphaMaskTexCoord = a_alphaMaskTexCoord;`
+    },
+    fragment: {
+      uniform: {
+        u_alphaMaskEnabled: "bool",
+        u_alphaMaskIsLuminance: "bool",
+        u_mask: "sampler2D"
+      },
+      main: `
+    if (u_alphaMaskEnabled) {
+        vec4 alphaMaskPixel = texture2D(u_mask, v_alphaMaskTexCoord);
+
+        if (u_alphaMaskIsLuminance) {
+            alpha *= dot(lumcoeff, alphaMaskPixel.rgb) * alphaMaskPixel.a;
+        }
+        else {
+            alpha *= alphaMaskPixel.a;
+        }
+    }`
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    get mask() {
+      return this.textures[0].data;
+    },
+    set mask(img) {
+      this.textures[0].data = img;
+    },
+    get isLuminance() {
+      return !!this.uniforms[2].data[0];
+    },
+    set isLuminance(toggle) {
+      this.uniforms[2].data[0] = +toggle;
+      this.textures[0].format = toggle ? "RGBA" : "ALPHA";
+    },
+    varying: {
+      v_alphaMaskTexCoord: "vec2"
+    },
+    uniforms: [
+      {
+        name: "u_alphaMaskEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_mask",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_alphaMaskIsLuminance",
+        type: "i",
+        data: [+!!isLuminance]
+      }
+    ],
+    attributes: [
+      {
+        name: "a_alphaMaskTexCoord",
+        extends: "a_texCoord"
+      }
+    ],
+    textures: [
+      {
+        format: isLuminance ? "RGBA" : "ALPHA"
+      }
+    ]
+  };
+}
+function deformation({
+  radius,
+  wrap = WRAP_METHODS$1.WRAP,
+  deformation: deformation2 = DEFORMATION_METHODS.NONE
+} = {}) {
+  const dataRadius = radius || 0;
+  return {
+    fragment: {
+      uniform: {
+        u_deformationEnabled: "bool",
+        u_radius: "float"
+      },
+      source: `
+        float _aspectRatio = u_resolution.x / u_resolution.y;
+        vec2 _position = u_mouse;
+        vec2 diff = sourceCoord - _position;
+        float dist = diff.x * diff.x * _aspectRatio * _aspectRatio + diff.y * diff.y;
+        float r = sqrt(dist);
+        bool isInsideDeformation = dist < u_radius * u_radius;
+
+        if (u_deformationEnabled) {
+            if (isInsideDeformation) {
+                vec2 dispVec = diff;
+                float a = atan(diff.y, diff.x);
+                ${deformation2}
+                dispVec = dispVec + _position;
+                ${wrap}
+                sourceCoord = dispVec;
+            }
+        }`
+      //     main: `
+      // if (isInsideDeformation) {
+      //     color = mix(color, texture2D(u_source, v_texCoord).rgb, vec3(pow(r / u_radius, 4.0)));
+      // }`,
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    get radius() {
+      return this.uniforms[1].data[0];
+    },
+    set radius(r) {
+      if (typeof r !== "undefined") this.uniforms[1].data[0] = r;
+    },
+    uniforms: [
+      {
+        name: "u_deformationEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_radius",
+        type: "f",
+        data: [dataRadius]
+      }
+    ]
+  };
+}
+const WRAP_METHODS$1 = {
+  CLAMP: `dispVec = clamp(dispVec, 0.0, 1.0);`,
+  DISCARD: `if (dispVec.x < 0.0 || dispVec.x > 1.0 || dispVec.y > 1.0 || dispVec.y < 0.0) { discard; }`,
+  WRAP: `dispVec = mod(dispVec, 1.0);`
+};
+deformation.CLAMP = WRAP_METHODS$1.CLAMP;
+deformation.DISCARD = WRAP_METHODS$1.DISCARD;
+deformation.WRAP = WRAP_METHODS$1.WRAP;
+const DEFORMATION_METHODS = {
+  NONE: ``,
+  TUNNEL: `dispVec = vec2(dispVec.x * cos(r + r) - dispVec.y * sin(r + r), dispVec.y * cos(r + r) + dispVec.x * sin(r + r));`,
+  SOMETHING: `dispVec = vec2(0.3 / (10.0 * r + dispVec.x), 0.5 * a / PI);`,
+  SOMETHING2: `dispVec = vec2(0.02 * dispVec.y + 0.03 * cos(a) / r, 0.02 * dispVec.x + 0.03 * sin(a) / r);`,
+  INVERT: `dispVec = dispVec * -1.0;`,
+  SCALE: `dispVec = dispVec * 0.75;`,
+  MAGNIFY: `dispVec = dispVec * (pow(2.0, r / u_radius) - 1.0);`,
+  UNMAGNIFY: `dispVec = dispVec * (pow(2.0, min(u_radius / r, 4.0)));`
+};
+deformation.NONE = DEFORMATION_METHODS.NONE;
+deformation.TUNNEL = DEFORMATION_METHODS.TUNNEL;
+deformation.SOMETHING = DEFORMATION_METHODS.SOMETHING;
+deformation.SOMETHING2 = DEFORMATION_METHODS.SOMETHING2;
+deformation.INVERT = DEFORMATION_METHODS.INVERT;
+deformation.SCALE = DEFORMATION_METHODS.SCALE;
+deformation.MAGNIFY = DEFORMATION_METHODS.MAGNIFY;
+deformation.UNMAGNIFY = DEFORMATION_METHODS.UNMAGNIFY;
+const MODES_AUX = {
+  blend_luminosity: `float blend_luminosity (vec3 c) {
+    return dot(c, blendLum);
+}`,
+  blend_saturation: `float blend_saturation (vec3 c) {
+    return max(max(c.r, c.g), c.b) - min(min(c.r, c.g), c.b);
+}`,
+  blend_set_luminosity: `vec3 blend_clip_color (vec3 c) {
+    float l = blend_luminosity(c);
+    float cMin = min(min(c.r, c.g), c.b);
+    float cMax = max(max(c.r, c.g), c.b);
+
+    if (cMin < 0.0)
+        return l + (((c - l) * l) / (l - cMin));
+    if (cMax > 1.0)
+        return l + (((c - l) * (1.0 - l)) / (cMax - l));
+
+    return c;
+}
+
+vec3 blend_set_luminosity (vec3 c, float l) {
+    vec3 delta = vec3(l - blend_luminosity(c));
+
+    return blend_clip_color(vec3(c.rgb + delta.rgb));
+}`,
+  blend_set_saturation: `
+float getBlendMid (vec3 c) {
+    float bigger = max(c.r, c.g);
+
+    if (bigger < c.b) {
+        return bigger;
+    }
+
+    float smaller = min(c.r, c.g);
+
+    if (c.b < smaller) {
+        return smaller;
+    }
+
+    return c.b;
+}
+
+vec3 blend_set_saturation (vec3 c, float s) {
+    if (s == 0.0) return vec3(0.0);
+
+    float cMax = max(max(c.r, c.g), c.b);
+    float cMid = getBlendMid(c);
+    float cMin = min(min(c.r, c.g), c.b);
+    float r, g, b;
+
+    cMid = (((cMid - cMin) * s) / (cMax - cMin));
+    cMax = s;
+    cMin = 0.0;
+
+    if (c.r > c.g) {
+        // r > g
+        if (c.b > c.r) {
+            // g < r < b
+            g = cMin;
+            r = cMid;
+            b = cMax;
+        }
+        else if (c.g > c.b) {
+            // b < g < r
+            b = cMin;
+            g = cMid;
+            r = cMax;
+        }
+        else {
+            // g < b < r
+            g = cMin;
+            b = cMid;
+            r = cMax;
+        }
+    }
+    // g > r
+    else if (c.g > c.b) {
+        // g > b
+        if (c.b > c.r) {
+            // r < b < g
+            r = cMin;
+            b = cMid;
+            g = cMax;
+        }
+        else {
+            // b < r < g
+            b = cMin;
+            r = cMid;
+            g = cMax;
+        }
+    }
+    else {
+        // r < g < b
+        r = cMin;
+        g = cMid;
+        b = cMax;
+    }
+
+    return vec3(r, g, b);
+}`
+};
+const MODES_CONSTANT = {
+  normal: "",
+  multiply: "",
+  screen: "",
+  overlay: `float blend_overlay (float b, float c) {
+    if (b <= 0.5)
+        return 2.0 * b * c;
+    else
+        return 1.0 - 2.0 * ((1.0 - b) * (1.0 - c));
+}`,
+  darken: "",
+  lighten: "",
+  colorDodge: `float blend_colorDodge (float b, float c) {
+    if (b == 0.0)
+        return 0.0;
+    else if (c == 1.0)
+        return 1.0;
+    else
+        return min(1.0, b / (1.0 - c));
+}`,
+  colorBurn: `float blend_colorBurn (float b, float c) {
+    if (b == 1.0) {
+        return 1.0;
+    }
+    else if (c == 0.0) {
+        return 0.0;
+    }
+    else {
+        return 1.0 - min(1.0, (1.0 - b) / c);
+    }
+}`,
+  hardLight: `float blend_hardLight (float b, float c) {
+    if (c <= 0.5) {
+        return 2.0 * b * c;
+    }
+    else {
+        return 1.0 - 2.0 * ((1.0 - b) * (1.0 - c));
+    }
+}`,
+  softLight: `float blend_softLight (float b, float c) {
+    if (c <= 0.5) {
+        return b - (1.0 - 2.0 * c) * b * (1.0 - b);
+    }
+    else {
+        float d;
+
+        if (b <= 0.25) {
+            d = ((16.0 * b - 12.0) * b + 4.0) * b;
+        }
+        else {
+            d = sqrt(b);
+        }
+
+        return b + (2.0 * c - 1.0) * (d - b);
+    }
+}`,
+  difference: `float blend_difference (float b, float c) {
+    return abs(b - c);
+}`,
+  exclusion: `float blend_exclusion (float b, float c) {
+    return b + c - 2.0 * b * c;
+}`,
+  hue: `${MODES_AUX.blend_luminosity}
+${MODES_AUX.blend_saturation}
+${MODES_AUX.blend_set_saturation}
+${MODES_AUX.blend_set_luminosity}`,
+  saturation: `${MODES_AUX.blend_luminosity}
+${MODES_AUX.blend_saturation}
+${MODES_AUX.blend_set_saturation}
+${MODES_AUX.blend_set_luminosity}`,
+  color: `${MODES_AUX.blend_luminosity}
+${MODES_AUX.blend_set_luminosity}`,
+  luminosity: `${MODES_AUX.blend_luminosity}
+${MODES_AUX.blend_set_luminosity}`
+};
+function generateBlendVector(name) {
+  return `vec3(${name}(backdrop.r, source.r), ${name}(backdrop.g, source.g), ${name}(backdrop.b, source.b))`;
+}
+const MODES_MAIN = {
+  normal: "source",
+  multiply: "source * backdrop",
+  screen: "backdrop + source - backdrop * source",
+  overlay: generateBlendVector("blend_overlay"),
+  darken: generateBlendVector("min"),
+  lighten: generateBlendVector("max"),
+  colorDodge: generateBlendVector("blend_colorDodge"),
+  colorBurn: generateBlendVector("blend_colorBurn"),
+  hardLight: generateBlendVector("blend_hardLight"),
+  softLight: generateBlendVector("blend_softLight"),
+  difference: generateBlendVector("blend_difference"),
+  exclusion: generateBlendVector("blend_exclusion"),
+  hue: "blend_set_luminosity(blend_set_saturation(source, blend_saturation(backdrop)), blend_luminosity(backdrop))",
+  saturation: "blend_set_luminosity(blend_set_saturation(backdrop, blend_saturation(source)), blend_luminosity(backdrop))",
+  color: "blend_set_luminosity(source, blend_luminosity(backdrop))",
+  luminosity: "blend_set_luminosity(backdrop, blend_luminosity(source))"
+};
+function blend({
+  mode = "normal",
+  color: color2 = [0, 0, 0, 1]
+} = {}) {
+  return {
+    vertex: {
+      attribute: {
+        a_blendImageTexCoord: "vec2"
+      },
+      main: `
+    v_blendImageTexCoord = a_blendImageTexCoord;`
+    },
+    fragment: {
+      uniform: {
+        u_blendEnabled: "bool",
+        u_blendColorEnabled: "bool",
+        u_blendImageEnabled: "bool",
+        u_blendColor: "vec4",
+        u_blendImage: "sampler2D"
+      },
+      constant: `const vec3 blendLum = vec3(0.3, 0.59, 0.11);
+${MODES_CONSTANT[mode]}`,
+      main: `
+    if (u_blendEnabled) {
+        vec3 backdrop = vec3(0.0);
+        float backdropAlpha = 1.0;
+
+        if (u_blendColorEnabled) {
+            backdrop = u_blendColor.rgb;
+            backdropAlpha = u_blendColor.a;
+        }
+        if (u_blendImageEnabled) {
+            vec4 blendBackdropPixel = texture2D(u_blendImage, v_blendImageTexCoord);
+            if (u_blendColorEnabled) {
+                vec3 source = blendBackdropPixel.rgb;
+                float sourceAlpha = blendBackdropPixel.a;
+                backdrop = (1.0 - backdropAlpha) * source + backdropAlpha * clamp(${MODES_MAIN[mode]}, 0.0, 1.0);
+                backdropAlpha = sourceAlpha + backdropAlpha * (1.0 - sourceAlpha);
+            }
+            else {
+                backdrop = blendBackdropPixel.rgb;
+                backdropAlpha = blendBackdropPixel.a;
+            }
+        }
+        vec3 source = vec3(color.rgb);
+        color = (1.0 - backdropAlpha) * source + backdropAlpha * clamp(${MODES_MAIN[mode]}, 0.0, 1.0);
+        alpha = alpha + backdropAlpha * (1.0 - alpha);
+    }`
+    },
+    get color() {
+      return this.uniforms[1].data.slice(0);
+    },
+    set color(l) {
+      if (!l || !l.length) {
+        this.uniforms[2].data[0] = 0;
+      } else {
+        this.uniforms[2].data[0] = 1;
+        l.forEach((c, i) => {
+          if (!Number.isNaN(c)) {
+            this.uniforms[1].data[i] = c;
+          }
+        });
+      }
+    },
+    get image() {
+      return this.textures[0].data;
+    },
+    set image(img) {
+      if (img) {
+        this.uniforms[4].data[0] = 1;
+        this.textures[0].data = img;
+      } else {
+        this.uniforms[4].data[0] = 0;
+      }
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    varying: {
+      v_blendImageTexCoord: "vec2"
+    },
+    uniforms: [
+      {
+        name: "u_blendEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_blendColor",
+        type: "f",
+        data: color2
+      },
+      {
+        name: "u_blendColorEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_blendImage",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_blendImageEnabled",
+        type: "i",
+        data: [0]
+      }
+    ],
+    attributes: [
+      {
+        name: "a_blendImageTexCoord",
+        extends: "a_texCoord"
+      }
+    ],
+    textures: [
+      {
+        format: "RGBA"
+      }
+    ]
+  };
+}
+function brightnessContrast({ brightness: brightness2 = 1, contrast: contrast2 = 1 } = {}) {
+  return {
+    fragment: {
+      uniform: {
+        u_brEnabled: "bool",
+        u_ctEnabled: "bool",
+        u_contrast: "float",
+        u_brightness: "float"
+      },
+      constant: "const vec3 half3 = vec3(0.5);",
+      main: `
+    if (u_brEnabled) {
+        color *= u_brightness;
+    }
+
+    if (u_ctEnabled) {
+        color = (color - half3) * u_contrast + half3;
+    }
+
+    color = clamp(color, 0.0, 1.0);`
+    },
+    get brightness() {
+      return this.uniforms[2].data[0];
+    },
+    set brightness(value) {
+      this.uniforms[2].data[0] = parseFloat(Math.max(0, value));
+    },
+    get contrast() {
+      return this.uniforms[3].data[0];
+    },
+    set contrast(value) {
+      this.uniforms[3].data[0] = parseFloat(Math.max(0, value));
+    },
+    get brightnessDisabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set brightnessDisabled(toggle) {
+      this.uniforms[0].data[0] = +!toggle;
+    },
+    get contrastDisabled() {
+      return !this.uniforms[1].data[0];
+    },
+    set contrastDisabled(toggle) {
+      this.uniforms[1].data[0] = +!toggle;
+    },
+    uniforms: [
+      {
+        name: "u_brEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_ctEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_brightness",
+        type: "f",
+        data: [brightness2]
+      },
+      {
+        name: "u_contrast",
+        type: "f",
+        data: [contrast2]
+      }
+    ]
+  };
+}
+function hueSaturation({ hue: hue2 = 0, saturation: saturation2 = 1 } = {}) {
+  return {
+    vertex: {
+      uniform: {
+        u_hue: "float",
+        u_saturation: "float"
+      },
+      // for implementation see: https://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement
+      constant: `
+const mat3 lummat = mat3(
+    lumcoeff,
+    lumcoeff,
+    lumcoeff
+);
+const mat3 cosmat = mat3(
+    vec3(0.787, -0.715, -0.072),
+    vec3(-0.213, 0.285, -0.072),
+    vec3(-0.213, -0.715, 0.928)
+);
+const mat3 sinmat = mat3(
+    vec3(-0.213, -0.715, 0.928),
+    vec3(0.143, 0.140, -0.283),
+    vec3(-0.787, 0.715, 0.072)
+);
+const mat3 satmat = mat3(
+    vec3(0.787, -0.715, -0.072),
+    vec3(-0.213, 0.285, -0.072),
+    vec3(-0.213, -0.715, 0.928)
+);`,
+      main: `
+    float angle = (u_hue / 180.0) * 3.14159265358979323846264;
+    v_hueRotation = lummat + cos(angle) * cosmat + sin(angle) * sinmat;
+    v_saturation = lummat + satmat * u_saturation;`
+    },
+    fragment: {
+      uniform: {
+        u_hueEnabled: "bool",
+        u_satEnabled: "bool",
+        u_hue: "float",
+        u_saturation: "float"
+      },
+      main: `
+    if (u_hueEnabled) {
+        color = vec3(
+            dot(color, v_hueRotation[0]),
+            dot(color, v_hueRotation[1]),
+            dot(color, v_hueRotation[2])
+        );
+    }
+
+    if (u_satEnabled) {
+        color = vec3(
+            dot(color, v_saturation[0]),
+            dot(color, v_saturation[1]),
+            dot(color, v_saturation[2])
+        );
+    }
+
+    color = clamp(color, 0.0, 1.0);`
+    },
+    varying: {
+      v_hueRotation: "mat3",
+      v_saturation: "mat3"
+    },
+    get hue() {
+      return this.uniforms[2].data[0];
+    },
+    set hue(h) {
+      this.uniforms[2].data[0] = parseFloat(h);
+    },
+    get saturation() {
+      return this.uniforms[3].data[0];
+    },
+    set saturation(s) {
+      this.uniforms[3].data[0] = parseFloat(Math.max(0, s));
+    },
+    get hueDisabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set hueDisabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    get saturationDisabled() {
+      return !this.uniforms[1].data[0];
+    },
+    set saturationDisabled(b) {
+      this.uniforms[1].data[0] = +!b;
+    },
+    uniforms: [
+      {
+        name: "u_hueEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_satEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_hue",
+        type: "f",
+        data: [hue2]
+      },
+      {
+        name: "u_saturation",
+        type: "f",
+        data: [saturation2]
+      }
+    ]
+  };
+}
+function duotone({
+  dark = [0.7411764706, 0.0431372549, 0.568627451, 1],
+  light = [0.9882352941, 0.7333333333, 0.05098039216, 1]
+} = {}) {
+  return {
+    fragment: {
+      uniform: {
+        u_duotoneEnabled: "bool",
+        u_light: "vec4",
+        u_dark: "vec4"
+      },
+      main: `
+    if (u_duotoneEnabled) {
+        vec3 gray = vec3(dot(lumcoeff, color));
+        color = mix(u_dark.rgb, u_light.rgb, gray);
+    }`
+    },
+    get light() {
+      return this.uniforms[1].data.slice(0);
+    },
+    set light(l) {
+      l.forEach((c, i) => {
+        if (!Number.isNaN(c)) {
+          this.uniforms[1].data[i] = c;
+        }
+      });
+    },
+    get dark() {
+      return this.uniforms[2].data.slice(0);
+    },
+    set dark(d) {
+      d.forEach((c, i) => {
+        if (!Number.isNaN(c)) {
+          this.uniforms[2].data[i] = c;
+        }
+      });
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    uniforms: [
+      {
+        name: "u_duotoneEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_light",
+        type: "f",
+        data: light
+      },
+      {
+        name: "u_dark",
+        type: "f",
+        data: dark
+      }
+    ]
+  };
+}
+function displacement({ wrap = WRAP_METHODS.CLAMP, input = INPUT_METHODS.TEXTURE, scale, enableBlueChannel } = {}) {
+  const { x: sx, y: sy } = scale || { x: 0, y: 0 };
+  return {
+    vertex: {
+      attribute: {
+        a_displacementMapTexCoord: "vec2"
+      },
+      main: `
+    v_displacementMapTexCoord = a_displacementMapTexCoord;`
+    },
+    fragment: {
+      uniform: {
+        u_displacementEnabled: "bool",
+        u_enableBlueChannel: "bool",
+        u_dispMap: "sampler2D",
+        u_dispScale: "vec2"
+      },
+      source: `
+    if (u_displacementEnabled) {
+        ${input}
+        vec2 dispVec = vec2(sourceCoord.x + (u_dispScale.x + dispIntensity) * dispPosition.r, sourceCoord.y + (u_dispScale.y + dispIntensity) * dispPosition.g);
+        ${wrap}
+        sourceCoord = dispVec;
+    }`
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    get scale() {
+      const [x, y] = this.uniforms[2].data;
+      return { x, y };
+    },
+    set scale({ x, y }) {
+      if (typeof x !== "undefined") this.uniforms[2].data[0] = x;
+      if (typeof y !== "undefined") this.uniforms[2].data[1] = y;
+    },
+    get map() {
+      return this.textures[0].data;
+    },
+    set map(img) {
+      this.textures[0].data = img;
+    },
+    get enableBlueChannel() {
+      return this.uniforms[3].data[0];
+    },
+    set enableBlueChannel(b) {
+      this.uniforms[3].data[0] = +b;
+    },
+    varying: {
+      v_displacementMapTexCoord: "vec2"
+    },
+    uniforms: [
+      {
+        name: "u_displacementEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_dispMap",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_dispScale",
+        type: "f",
+        data: [sx, sy]
+      },
+      {
+        name: "u_enableBlueChannel",
+        type: "i",
+        data: [+enableBlueChannel]
+      }
+    ],
+    attributes: [
+      {
+        name: "a_displacementMapTexCoord",
+        extends: "a_texCoord"
+      }
+    ],
+    textures: [
+      {
+        format: "RGB"
+      }
+    ]
+  };
+}
+const INPUT_METHODS = {
+  TEXTURE: `vec3 dispMap = texture2D(u_dispMap, v_displacementMapTexCoord).rgb;
+            vec2 dispPosition = dispMap.rg - 0.5;
+            float dispIntensity = u_enableBlueChannel ? dispMap.b : 0.0;`,
+  TURBULENCE: `vec3 dispMap = vec3(turbulenceValue);
+            vec2 dispPosition = dispMap.rg - 0.5;
+            float dispIntensity = u_enableBlueChannel ? dispMap.b : 0.0;`
+};
+const WRAP_METHODS = {
+  CLAMP: `dispVec = clamp(dispVec, 0.0, 1.0);`,
+  DISCARD: `if (dispVec.x < 0.0 || dispVec.x > 1.0 || dispVec.y > 1.0 || dispVec.y < 0.0) { discard; }`,
+  WRAP: `dispVec = mod(dispVec, 1.0);`
+};
+displacement.TEXTURE = INPUT_METHODS.TEXTURE;
+displacement.TURBULENCE = INPUT_METHODS.TURBULENCE;
+displacement.CLAMP = WRAP_METHODS.CLAMP;
+displacement.DISCARD = WRAP_METHODS.DISCARD;
+displacement.WRAP = WRAP_METHODS.WRAP;
+function channelSplit({
+  offsetRed = { x: 0.01, y: 0.01 },
+  offsetGreen = { x: -0.01, y: -0.01 },
+  offsetBlue = { x: -0.01, y: -0.01 },
+  offsetInputR = "u_channelOffsetR",
+  offsetInputG = "u_channelOffsetG",
+  offsetInputB = "u_channelOffsetB",
+  boundsOffsetFactor = (boundsOffset) => "1.0"
+} = {}) {
+  return {
+    fragment: {
+      uniform: {
+        u_channelSplitEnabled: "bool",
+        u_channelOffsetR: "vec2",
+        u_channelOffsetG: "vec2",
+        u_channelOffsetB: "vec2"
+      },
+      main: `
+    if (u_channelSplitEnabled) {
+        vec2 _splitOffsetR = ${offsetInputR};
+        vec2 _splitOffsetG = ${offsetInputG};
+        vec2 _splitOffsetB = ${offsetInputB};
+        vec2 redSample = sourceCoord + _splitOffsetR;
+        vec2 greenSample = sourceCoord + _splitOffsetG;
+        vec2 blueSample = sourceCoord + _splitOffsetB;
+        float redBoundsOffset = min(0.0, min(min(redSample.x, redSample.y), min(1.0 - redSample.x, 1.0 - redSample.y)));
+        float greenBoundsOffset = min(0.0, min(min(greenSample.x, greenSample.y), min(1.0 - greenSample.x, 1.0 - greenSample.y)));
+        float blueBoundsOffset = min(0.0, min(min(blueSample.x, blueSample.y), min(1.0 - blueSample.x, 1.0 - blueSample.y)));
+        float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r * ${boundsOffsetFactor(
+        "redBoundsOffset"
+      )};
+        float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g * ${boundsOffsetFactor(
+        "greenBoundsOffset"
+      )};
+        float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b * ${boundsOffsetFactor(
+        "blueBoundsOffset"
+      )};
+        color = vec3(redSplit, greenSplit, blueSplit);
+    }`
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    get red() {
+      const [x, y] = this.uniforms[1].data;
+      return { x, y };
+    },
+    set red({ x, y }) {
+      if (typeof x !== "undefined") this.uniforms[1].data[0] = x;
+      if (typeof y !== "undefined") this.uniforms[1].data[1] = y;
+    },
+    get green() {
+      const [x, y] = this.uniforms[2].data;
+      return { x, y };
+    },
+    set green({ x, y }) {
+      if (typeof x !== "undefined") this.uniforms[2].data[0] = x;
+      if (typeof y !== "undefined") this.uniforms[2].data[1] = y;
+    },
+    get blue() {
+      const [x, y] = this.uniforms[3].data;
+      return { x, y };
+    },
+    set blue({ x, y }) {
+      if (typeof x !== "undefined") this.uniforms[3].data[0] = x;
+      if (typeof y !== "undefined") this.uniforms[3].data[1] = y;
+    },
+    uniforms: [
+      {
+        name: "u_channelSplitEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_channelOffsetR",
+        type: "f",
+        data: [offsetRed.x, offsetRed.y]
+      },
+      {
+        name: "u_channelOffsetG",
+        type: "f",
+        data: [offsetGreen.x, offsetGreen.y]
+      },
+      {
+        name: "u_channelOffsetB",
+        type: "f",
+        data: [offsetBlue.x, offsetBlue.y]
+      }
+    ]
+  };
+}
+function kaleidoscope({ segments = 6, offset: offset2, rotation = 0 } = {}) {
+  const { x: offsetX, y: offsetY } = offset2 || { x: 0, y: 0 };
+  return {
+    fragment: {
+      uniform: {
+        u_kaleidoscopeEnabled: "bool",
+        u_segments: "float",
+        u_offset: "vec2",
+        u_rotation: "float"
+      },
+      source: `
+    if (u_kaleidoscopeEnabled && u_segments > 0.0) {
+        vec2 centered = v_texCoord - 0.5;
+        float r = length(centered);
+        float theta = atan(centered.y, centered.x);
+        theta = mod(theta, 2.0 * PI / u_segments) + radians(u_rotation);
+        theta = abs(theta - PI / u_segments) - PI / u_segments;
+        vec2 newCoords = r * vec2(cos(theta), sin(theta)) + 0.5;
+        sourceCoord = newCoords - u_offset;
+        // mirrored repeat
+        sourceCoord = mod(sourceCoord, 1.0) * (mod(sourceCoord - 1.0, 2.0) - mod(sourceCoord, 1.0)) + mod(-sourceCoord, 1.0) * (mod(sourceCoord, 2.0) - mod(sourceCoord, 1.0));
+    }`
+    },
+    get segments() {
+      return this.uniforms[1].data[0];
+    },
+    set segments(n) {
+      this.uniforms[1].data[0] = +n;
+    },
+    get offset() {
+      const [x, y] = this.uniforms[2].data;
+      return { x, y };
+    },
+    set offset({ x, y }) {
+      if (typeof x !== "undefined") this.uniforms[2].data[0] = x;
+      if (typeof y !== "undefined") this.uniforms[2].data[1] = y;
+    },
+    get rotation() {
+      return this.uniforms[3].data[0];
+    },
+    set rotation(r) {
+      this.uniforms[3].data[0] = r;
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    uniforms: [
+      {
+        name: "u_kaleidoscopeEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_segments",
+        type: "f",
+        data: [segments]
+      },
+      {
+        name: "u_offset",
+        type: "f",
+        data: [offsetX, offsetY]
+      },
+      {
+        name: "u_rotation",
+        type: "f",
+        data: [rotation]
+      }
+    ]
+  };
+}
+function slitScan({
+  noise,
+  time = 0,
+  intensity = 0.1,
+  frequency = 2,
+  direction = "x",
+  offsetInput = ""
+}) {
+  const isHorizontal = direction === "x";
+  const noiseFragPart = `(gl_FragCoord.${direction} / u_resolution.${direction}${offsetInput ? `+ ${offsetInput}` : ""}) * u_frequency`;
+  const noiseTimePart = "u_time * 0.0001";
+  return {
+    fragment: {
+      uniform: {
+        u_slitScanEnabled: "bool",
+        u_intensity: "float",
+        u_frequency: "float",
+        u_time: "float",
+        u_horizontal: "bool"
+      },
+      constant: noise,
+      source: `
+    if (u_slitScanEnabled) {
+        float noiseValue = noise(vec2(${isHorizontal ? noiseFragPart : noiseTimePart}, ${isHorizontal ? noiseTimePart : noiseFragPart}));
+        float source_ = sourceCoord.${direction} + noiseValue * u_intensity;
+        float mirrored_ = mod(source_, 1.0) * (mod(source_ - 1.0, 2.0) - mod(source_, 1.0)) + mod(-source_, 1.0) * (mod(source_, 2.0) - mod(source_, 1.0));
+        sourceCoord = ${isHorizontal ? "vec2(mirrored_, sourceCoord.y)" : "vec2(sourceCoord.x, mirrored_)"};
+    }`
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    get intensity() {
+      return this.uniforms[1].data[0];
+    },
+    set intensity(i) {
+      this.uniforms[1].data[0] = i;
+    },
+    get frequency() {
+      return this.uniforms[2].data[0];
+    },
+    set frequency(f) {
+      this.uniforms[2].data[0] = f;
+    },
+    get time() {
+      return this.uniforms[3].data[0];
+    },
+    set time(t) {
+      this.uniforms[3].data[0] = t;
+    },
+    uniforms: [
+      {
+        name: "u_slitScanEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_intensity",
+        type: "f",
+        data: [intensity]
+      },
+      {
+        name: "u_frequency",
+        type: "f",
+        data: [frequency]
+      },
+      {
+        name: "u_time",
+        type: "f",
+        data: [time]
+      }
+    ]
+  };
+}
+function turbulence({
+  noise,
+  output = OUTPUT_TYPES.COLOR,
+  frequency,
+  octaves = 1,
+  isFractal = false,
+  time = 0,
+  input = INPUT_TYPES.FRAGCOORD_XY_TIME
+}) {
+  const { x: fx, y: fy } = frequency || { x: 0, y: 0 };
+  return {
+    fragment: {
+      uniform: {
+        u_turbulenceEnabled: "bool",
+        u_turbulenceFrequency: "vec2",
+        u_turbulenceOctaves: "int",
+        u_isFractal: "bool",
+        u_time: "float"
+      },
+      constant: `
+${noise}
+
+const int MAX_OCTAVES = 9;
+
+float turbulence (vec3 seed, vec2 frequency, int numOctaves, bool isFractal) {
+    float sum = 0.0;
+    vec3 position = vec3(0.0);
+    position.x = seed.x * frequency.x;
+    position.y = seed.y * frequency.y;
+    position.z = seed.z;
+    float ratio = 1.0;
+
+    for (int octave = 0; octave <= MAX_OCTAVES; octave++) {
+        if (octave > numOctaves) {
+            break;
+        }
+
+        if (isFractal) {
+            sum += noise(position) / ratio;
+        }
+        else {
+            sum += abs(noise(position)) / ratio;
+        }
+        position.x *= 2.0;
+        position.y *= 2.0;
+        ratio *= 2.0;
+    }
+
+    if (isFractal) {
+        sum = (sum + 1.0) / 2.0;
+    }
+
+    return clamp(sum, 0.0, 1.0);
+}`,
+      source: `
+    ${input || ""}
+    float turbulenceValue = turbulence(turbulenceSeed, u_turbulenceFrequency, u_turbulenceOctaves, u_isFractal);`,
+      main: `
+    ${output || ""}`
+    },
+    get frequency() {
+      const [x, y] = this.uniforms[0].data;
+      return { x, y };
+    },
+    set frequency({ x, y }) {
+      if (typeof x !== "undefined") this.uniforms[0].data[0] = x;
+      if (typeof y !== "undefined") this.uniforms[0].data[1] = y;
+    },
+    get octaves() {
+      return this.uniforms[1].data[0];
+    },
+    set octaves(value) {
+      this.uniforms[1].data[0] = Math.max(0, parseInt(value));
+    },
+    get isFractal() {
+      return !!this.uniforms[2].data[0];
+    },
+    set isFractal(toggle) {
+      this.uniforms[2].data[0] = +toggle;
+    },
+    get time() {
+      return this.uniforms[3].data[0];
+    },
+    set time(value) {
+      this.uniforms[3].data[0] = Math.max(0, parseFloat(value));
+    },
+    uniforms: [
+      {
+        name: "u_turbulenceFrequency",
+        type: "f",
+        data: [fx, fy]
+      },
+      {
+        name: "u_turbulenceOctaves",
+        type: "i",
+        data: [octaves]
+      },
+      {
+        name: "u_isFractal",
+        type: "i",
+        data: [+!!isFractal]
+      },
+      {
+        name: "u_time",
+        type: "f",
+        data: [time]
+      }
+    ]
+  };
+}
+const OUTPUT_TYPES = {
+  COLOR: "color = vec3(turbulenceValue);",
+  ALPHA: "alpha = turbulenceValue;"
+};
+const INPUT_TYPES = {
+  FRAGCOORD_XY_TIME: "vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001);",
+  FRAGCOORD_XYZ: "vec3 turbulenceSeed = vec3(gl_FragCoord.xyz);",
+  FRAGCOORD_XY_MOUSE_TIME: "vec3 turbulenceSeed = vec3(gl_FragCoord.xy - u_mouse * u_resolution, u_time * 0.0001);",
+  FRAGCOORD_XY_MOUSE_Z: "vec3 turbulenceSeed = vec3(gl_FragCoord.xy - u_mouse * u_resolution, gl_FragCoord.z);"
+};
+turbulence.COLOR = OUTPUT_TYPES.COLOR;
+turbulence.ALPHA = OUTPUT_TYPES.ALPHA;
+turbulence.FRAGCOORD_XY_TIME = INPUT_TYPES.FRAGCOORD_XY_TIME;
+turbulence.FRAGCOORD_XYZ = INPUT_TYPES.FRAGCOORD_XYZ;
+turbulence.FRAGCOORD_XY_MOUSE_TIME = INPUT_TYPES.FRAGCOORD_XY_MOUSE_TIME;
+turbulence.FRAGCOORD_XY_MOUSE_Z = INPUT_TYPES.FRAGCOORD_XY_MOUSE_Z;
+function flowmapGridDisplacement({
+  aspectRatio = 16 / 9,
+  intensity = 0.01,
+  enableChannelSplit = true
+} = {}) {
+  return {
+    fragment: {
+      constant: `
+        vec2 coverUvs(float aspectRatio, vec2 containerRes) {
+            float containerAspectX = containerRes.x/containerRes.y;
+            float containerAspectY = containerRes.y/containerRes.x;
+
+            vec2 ratio = vec2(
+                min(containerAspectX / aspectRatio, 1.0),
+                min(containerAspectY * aspectRatio, 1.0)
+            );
+
+            vec2 newUvs = vec2(
+                v_texCoord.x * ratio.x + (1.0 - ratio.x) * 0.5,
+                v_texCoord.y * ratio.y + (1.0 - ratio.y) * 0.5
+            );
+
+            return newUvs;
+        }`,
+      uniform: {
+        u_FBOMap: "sampler2D",
+        u_aspectRatio: "float",
+        u_displacementIntensity: "float",
+        u_enableChannelSplit: "bool"
+      },
+      source: `
+        vec2 griUvs = coverUvs(u_aspectRatio, u_resolution);
+        vec4 displacement = texture2D(u_FBOMap, griUvs);
+
+        sourceCoord -= displacement.rg * u_displacementIntensity * 1.5;`,
+      main: `
+        if (u_enableChannelSplit) {
+            vec2 redUvs = sourceCoord;
+            vec2 blueUvs = sourceCoord;
+            vec2 greenUvs = sourceCoord;
+
+            vec2 shift = displacement.rg * 0.001;
+
+            float displacementScale = length(displacement.rg);
+            displacementScale = clamp(displacementScale, 0., 2.);
+
+            float redScale = 1. + displacementScale * 0.25;
+            redUvs += shift * redScale;
+
+            float greenScale = 1. + displacementScale * 2.;
+            greenUvs += shift * greenScale;
+
+            float blueScale = 1. + displacementScale * 1.5;
+            blueUvs += shift * blueScale;
+
+            float red = texture2D(u_source, redUvs).r;
+            float blue = texture2D(u_source, blueUvs).b;
+            float green = texture2D(u_source, greenUvs).g;
+
+            color = vec3(red, green, blue);
+        }`
+    },
+    set aspectRatio(ar) {
+      this.uniforms[1].data[0] = ar;
+    },
+    set intensity(i) {
+      this.uniforms[2].data[0] = i;
+    },
+    set enableChannelSplit(b) {
+      this.uniforms[3].data[0] = b;
+    },
+    uniforms: [
+      {
+        name: "u_FBOMap",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_aspectRatio",
+        type: "f",
+        data: [aspectRatio]
+      },
+      {
+        name: "u_displacementIntensity",
+        type: "f",
+        data: [intensity]
+      },
+      {
+        name: "u_enableChannelSplit",
+        type: "i",
+        data: [+enableChannelSplit]
+      }
+    ]
+  };
+}
+const LUMA_COEFFICIENT = "const vec3 lumcoeff = vec3(0.2125, 0.7154, 0.0721);";
+const MATH_PI = `const float PI = ${Math.PI};`;
+const DEBUG = false;
+const vertexSimpleTemplate = ({
+  uniform = "",
+  attribute = "",
+  varying = "",
+  constant = "",
+  main = ""
+}) => `
+precision highp float;
+${uniform}
+${attribute}
+attribute vec2 a_position;
+${varying}
+
+${LUMA_COEFFICIENT}
+${MATH_PI}
+${constant}
+void main() {
+    ${main}
+    gl_Position = vec4(a_position.xy, 0.0, 1.0);
+}`;
+const vertexMediaTemplate = ({
+  uniform = "",
+  attribute = "",
+  varying = "",
+  constant = "",
+  main = ""
+}) => `
+precision highp float;
+${uniform}
+${attribute}
+attribute vec2 a_texCoord;
+attribute vec2 a_position;
+${varying}
+varying vec2 v_texCoord;
+
+${LUMA_COEFFICIENT}
+${MATH_PI}
+${constant}
+void main() {
+    v_texCoord = a_texCoord;
+    ${main}
+    gl_Position = vec4(a_position.xy, 0.0, 1.0);
+}`;
+const fragmentSimpleTemplate = ({
+  uniform = "",
+  varying = "",
+  constant = "",
+  main = "",
+  source = ""
+}) => `
+precision highp float;
+${varying}
+${uniform}
+
+${LUMA_COEFFICIENT}
+${MATH_PI}
+${constant}
+void main() {
+    ${source}
+    vec3 color = vec3(0.0);
+    float alpha = 1.0;
+    ${main}
+    gl_FragColor = vec4(color, 1.0) * alpha;
+}`;
+const fragmentMediaTemplate = ({
+  uniform = "",
+  varying = "",
+  constant = "",
+  main = "",
+  source = ""
+}) => `
+precision highp float;
+${varying}
+varying vec2 v_texCoord;
+${uniform}
+uniform sampler2D u_source;
+
+${LUMA_COEFFICIENT}
+${MATH_PI}
+${constant}
+void main() {
+    vec2 sourceCoord = v_texCoord;
+    ${source}
+    vec4 pixel = texture2D(u_source, sourceCoord);
+    vec3 color = pixel.rgb;
+    float alpha = pixel.a;
+    ${main}
+    gl_FragColor = vec4(color, 1.0) * alpha;
+}`;
+const TEXTURE_WRAP = {
+  stretch: "CLAMP_TO_EDGE",
+  repeat: "REPEAT",
+  mirror: "MIRRORED_REPEAT"
+};
+const SHADER_ERROR_TYPES = {
+  vertex: "VERTEX",
+  fragment: "FRAGMENT"
+};
+function init({ gl, plane, effects: effects2, dimensions, noSource, fbo }) {
+  const hasFBO = !!fbo;
+  const programData = _initProgram(gl, plane, effects2, hasFBO, noSource);
+  let fboData;
+  if (hasFBO) {
+    fboData = _initFBOProgram(gl, plane, fbo);
+  }
+  return { gl, data: programData, dimensions: dimensions || {}, fboData };
+}
+let WEBGL_CONTEXT_SUPPORTED = false;
+function getWebGLContext(canvas2) {
+  let context;
+  const config = {
+    preserveDrawingBuffer: false,
+    // should improve performance - https://stackoverflow.com/questions/27746091/preservedrawingbuffer-false-is-it-worth-the-effort
+    antialias: false,
+    // should improve performance
+    depth: false,
+    // turn off for explicitness - and in some cases perf boost
+    stencil: false
+    // turn off for explicitness - and in some cases perf boost
+  };
+  context = canvas2.getContext("webgl", config);
+  if (context) {
+    WEBGL_CONTEXT_SUPPORTED = true;
+  } else if (!WEBGL_CONTEXT_SUPPORTED) {
+    context = canvas2.getContext("experimental-webgl", config);
+  } else {
+    return null;
+  }
+  return context;
+}
+function resize(gl, dimensions) {
+  const canvas2 = gl.canvas;
+  const realToCSSPixels = 1;
+  const { width, height } = dimensions || {};
+  let displayWidth, displayHeight;
+  if (width && height) {
+    displayWidth = width;
+    displayHeight = height;
+  } else {
+    displayWidth = Math.floor(canvas2.clientWidth * realToCSSPixels);
+    displayHeight = Math.floor(canvas2.clientHeight * realToCSSPixels);
+  }
+  if (canvas2.width !== displayWidth || canvas2.height !== displayHeight) {
+    canvas2.width = displayWidth;
+    canvas2.height = displayHeight;
+  }
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+}
+function draw(gl, plane = {}, media, data, fboData) {
+  if (fboData) {
+    drawFBO(gl, fboData);
+  }
+  const {
+    program,
+    source,
+    attributes,
+    uniforms,
+    textures,
+    extensions,
+    vao
+  } = data;
+  const { xSegments = 1, ySegments = 1 } = plane;
+  if (media && source && source.texture && (source.shouldUpdate || !source._sampled)) {
+    source._sampled = true;
+    gl.bindTexture(gl.TEXTURE_2D, source.texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      media
+    );
+  }
+  gl.useProgram(program);
+  if (fboData) {
+    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  }
+  if (vao) {
+    extensions.vao.bindVertexArrayOES(vao);
+  } else {
+    _enableVertexAttributes(gl, attributes);
+  }
+  _setUniforms(gl, uniforms);
+  let startTex = gl.TEXTURE0;
+  if (fboData) {
+    gl.activeTexture(startTex);
+    gl.bindTexture(gl.TEXTURE_2D, fboData.oldInfo.texture);
+    gl.uniform1i(gl.getUniformLocation(program, "u_FBOMap"), 0);
+    startTex++;
+  }
+  if (source) {
+    gl.activeTexture(startTex);
+    gl.bindTexture(gl.TEXTURE_2D, source.texture);
+    startTex++;
+  }
+  if (textures) {
+    for (let i = 0; i < textures.length; i++) {
+      gl.activeTexture(startTex + i);
+      const tex = textures[i];
+      gl.bindTexture(gl.TEXTURE_2D, tex.texture);
+      if (tex.update) {
+        gl.texImage2D(
+          gl.TEXTURE_2D,
+          0,
+          gl[tex.format],
+          gl[tex.format],
+          gl.UNSIGNED_BYTE,
+          tex.data
+        );
+      }
+    }
+  }
+  gl.drawArrays(gl.TRIANGLES, 0, 6 * xSegments * ySegments);
+}
+function drawFBO(gl, fboData) {
+  const { size, program, uniforms } = fboData;
+  gl.useProgram(program);
+  gl.viewport(0, 0, size, size);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fboData.newInfo.buffer);
+  gl.bindTexture(gl.TEXTURE_2D, fboData.oldInfo.texture);
+  _setUniforms(gl, uniforms);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  {
+    const temp = fboData.oldInfo;
+    fboData.oldInfo = fboData.newInfo;
+    fboData.newInfo = temp;
+  }
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+}
+function destroy(gl, data) {
+  const {
+    program,
+    vertexShader,
+    fragmentShader,
+    source,
+    attributes,
+    extensions,
+    vao,
+    oldInfo,
+    newInfo
+  } = data;
+  (attributes || []).forEach((attr) => gl.deleteBuffer(attr.buffer));
+  if (vao) extensions.vao.deleteVertexArrayOES(vao);
+  if (source && source.texture) gl.deleteTexture(source.texture);
+  if (oldInfo) {
+    oldInfo.texture && gl.deleteTexture(oldInfo.texture);
+    oldInfo.buffer && gl.deleteFramebuffer(oldInfo.buffer);
+  }
+  if (newInfo) {
+    newInfo.texture && gl.deleteTexture(newInfo.texture);
+    newInfo.buffer && gl.deleteFramebuffer(newInfo.buffer);
+  }
+  gl.deleteProgram(program);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+}
+function _initProgram(gl, plane, effects2, hasFBO = false, noSource = false) {
+  const source = noSource ? null : {
+    texture: createTexture(gl).texture,
+    buffer: null
+  };
+  if (source) {
+    gl.bindTexture(gl.TEXTURE_2D, source.texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  }
+  const data = _mergeEffectsData(plane, effects2, hasFBO, noSource);
+  const vertexSrc = _stringifyShaderSrc(
+    data.vertex,
+    noSource ? vertexSimpleTemplate : vertexMediaTemplate
+  );
+  const fragmentSrc = _stringifyShaderSrc(
+    data.fragment,
+    noSource ? fragmentSimpleTemplate : fragmentMediaTemplate
+  );
+  const { program, vertexShader, fragmentShader, error, type } = _getWebGLProgram(gl, vertexSrc, fragmentSrc);
+  if (error || DEBUG) {
+    logShaders(type, error, vertexSrc, fragmentSrc);
+  }
+  let vaoExt, vao;
+  try {
+    vaoExt = gl.getExtension("OES_vertex_array_object");
+    vao = vaoExt.createVertexArrayOES();
+    vaoExt.bindVertexArrayOES(vao);
+  } catch (e) {
+  }
+  const attributes = _initVertexAttributes(gl, program, data.attributes);
+  if (vao) {
+    _enableVertexAttributes(gl, attributes);
+    vaoExt.bindVertexArrayOES(null);
+  }
+  const uniforms = _initUniforms(gl, program, data.uniforms);
+  return {
+    extensions: {
+      vao: vaoExt
+    },
+    program,
+    vertexShader,
+    fragmentShader,
+    source,
+    attributes,
+    uniforms,
+    textures: data.textures,
+    vao
+  };
+}
+function _initFBOProgram(gl, plane, fbo) {
+  const data = _mergeEffectsData(plane, fbo.effects, false, true);
+  const vertexSrc = _stringifyShaderSrc(
+    data.vertex,
+    vertexSimpleTemplate
+  );
+  const fragmentSrc = _stringifyShaderSrc(
+    data.fragment,
+    fragmentSimpleTemplate
+  );
+  const { program, vertexShader, fragmentShader, error, type } = _getWebGLProgram(gl, vertexSrc, fragmentSrc);
+  if (error || DEBUG) {
+    logShaders(type, error, vertexSrc, fragmentSrc);
+  }
+  const uniforms = _initUniforms(gl, program, data.uniforms);
+  const tex1 = _createFloatTexture(gl, { width: fbo.size, height: fbo.size }).texture;
+  const tex2 = _createFloatTexture(gl, { width: fbo.size, height: fbo.size }).texture;
+  const oldInfo = {
+    buffer: _createFramebuffer(gl, tex1),
+    texture: tex1
+  };
+  const newInfo = {
+    buffer: _createFramebuffer(gl, tex2),
+    texture: tex2
+  };
+  return {
+    program,
+    vertexShader,
+    fragmentShader,
+    uniforms,
+    oldInfo,
+    newInfo,
+    size: fbo.size
+  };
+}
+function _mergeEffectsData(plane, effects2, hasFBO = false, noSource = false) {
+  return effects2.reduce(
+    (result, config) => {
+      const {
+        attributes = [],
+        uniforms = [],
+        textures = [],
+        varying = {}
+      } = config;
+      const merge = (shader) => Object.keys(config[shader] || {}).forEach((key) => {
+        if (key === "constant" || key === "main" || key === "source") {
+          result[shader][key] += config[shader][key] + "\n";
+        } else {
+          result[shader][key] = {
+            ...result[shader][key],
+            ...config[shader][key]
+          };
+        }
+      });
+      merge("vertex");
+      merge("fragment");
+      attributes.forEach((attribute) => {
+        const found = result.attributes.some((attr) => {
+          if (attr.name === attribute.name) {
+            Object.assign(attr, attribute);
+            return true;
+          }
+        });
+        if (!found) {
+          result.attributes.push(attribute);
+        }
+      });
+      result.attributes.forEach((attr) => {
+        if (attr.extends) {
+          const found = result.attributes.some((attrToExtend) => {
+            if (attrToExtend.name === attr.extends) {
+              Object.assign(attr, attrToExtend, {
+                name: attr.name
+              });
+              return true;
+            }
+          });
+          if (!found) {
+            throw new Error(
+              `Could not find attribute ${attr.extends} to extend`
+            );
+          }
+        }
+      });
+      result.uniforms.push(...uniforms);
+      result.textures.push(...textures);
+      Object.assign(result.vertex.varying, varying);
+      Object.assign(result.fragment.varying, varying);
+      return result;
+    },
+    getEffectDefaults(plane, hasFBO, noSource)
+  );
+}
+function _getPlaneCoords({ xEnd, yEnd, factor }, plane = {}) {
+  const { xSegments = 1, ySegments = 1 } = plane;
+  const result = [];
+  for (let i = 0; i < xSegments; i++) {
+    for (let j = 0; j < ySegments; j++) {
+      result.push(
+        xEnd * i / xSegments - factor,
+        yEnd * j / ySegments - factor
+      );
+      result.push(
+        xEnd * i / xSegments - factor,
+        yEnd * (j + 1) / ySegments - factor
+      );
+      result.push(
+        xEnd * (i + 1) / xSegments - factor,
+        yEnd * j / ySegments - factor
+      );
+      result.push(
+        xEnd * (i + 1) / xSegments - factor,
+        yEnd * j / ySegments - factor
+      );
+      result.push(
+        xEnd * i / xSegments - factor,
+        yEnd * (j + 1) / ySegments - factor
+      );
+      result.push(
+        xEnd * (i + 1) / xSegments - factor,
+        yEnd * (j + 1) / ySegments - factor
+      );
+    }
+  }
+  return result;
+}
+function getEffectDefaults(plane, hasFBO, noSource) {
+  const uniforms = noSource ? [] : [
+    {
+      name: "u_source",
+      type: "i",
+      data: [hasFBO ? 1 : 0]
+    }
+  ];
+  const attributes = [
+    {
+      name: "a_position",
+      data: new Float32Array(
+        _getPlaneCoords({ xEnd: 2, yEnd: 2, factor: 1 }, plane)
+      ),
+      size: 2,
+      type: "FLOAT"
+    }
+  ];
+  if (!noSource) {
+    attributes.push({
+      name: "a_texCoord",
+      data: new Float32Array(
+        _getPlaneCoords({ xEnd: 1, yEnd: 1, factor: 0 }, plane)
+      ),
+      size: 2,
+      type: "FLOAT"
+    });
+  }
+  return {
+    vertex: {
+      uniform: {},
+      attribute: {},
+      varying: {},
+      constant: "",
+      main: ""
+    },
+    fragment: {
+      uniform: {},
+      varying: {},
+      constant: "",
+      main: "",
+      source: ""
+    },
+    attributes,
+    uniforms,
+    /*
+     * Default textures
+     */
+    textures: []
+  };
+}
+function _stringifyShaderSrc(data, template) {
+  const templateData = Object.entries(data).reduce((result, [key, value]) => {
+    if (["uniform", "attribute", "varying"].includes(key)) {
+      result[key] = Object.entries(value).reduce(
+        (str, [name, type]) => str + `${key} ${type} ${name};
+`,
+        ""
+      );
+    } else {
+      result[key] = value;
+    }
+    return result;
+  }, {});
+  return template(templateData);
+}
+function _getWebGLProgram(gl, vertexSrc, fragmentSrc) {
+  const vertexShader = _createShader(gl, gl.VERTEX_SHADER, vertexSrc);
+  const fragmentShader = _createShader(gl, gl.FRAGMENT_SHADER, fragmentSrc);
+  if (vertexShader.error) {
+    return vertexShader;
+  }
+  if (fragmentShader.error) {
+    return fragmentShader;
+  }
+  return _createProgram(gl, vertexShader, fragmentShader);
+}
+function _createProgram(gl, vertexShader, fragmentShader) {
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  if (success) {
+    return { program, vertexShader, fragmentShader };
+  }
+  const exception = {
+    error: gl.getProgramInfoLog(program),
+    type: "program"
+  };
+  gl.deleteProgram(program);
+  return exception;
+}
+function _createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (success) {
+    return shader;
+  }
+  const exception = {
+    error: gl.getShaderInfoLog(shader),
+    type: type === gl.VERTEX_SHADER ? SHADER_ERROR_TYPES.vertex : SHADER_ERROR_TYPES.fragment
+  };
+  gl.deleteShader(shader);
+  return exception;
+}
+function createTexture(gl, {
+  width = 1,
+  height = 1,
+  data = null,
+  format = "RGBA",
+  wrap = "stretch",
+  filter = "LINEAR",
+  textureType = "UNSIGNED_BYTE"
+} = {}) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(
+    gl.TEXTURE_2D,
+    gl.TEXTURE_WRAP_S,
+    gl[_getTextureWrap(wrap.x || wrap)]
+  );
+  gl.texParameteri(
+    gl.TEXTURE_2D,
+    gl.TEXTURE_WRAP_T,
+    gl[_getTextureWrap(wrap.y || wrap)]
+  );
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl[filter]);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl[filter]);
+  if (data) {
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl[format],
+      gl[format],
+      gl[textureType],
+      data
+    );
+  } else {
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl[format],
+      width,
+      height,
+      0,
+      gl[format],
+      gl[textureType],
+      null
+    );
+  }
+  return { texture, width, height, format };
+}
+function _createBuffer(gl, program, name, data) {
+  const location = gl.getAttribLocation(program, name);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  return { location, buffer };
+}
+function _createFramebuffer(gl, tex) {
+  const fb = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+  gl.framebufferTexture2D(
+    gl.FRAMEBUFFER,
+    gl.COLOR_ATTACHMENT0,
+    gl.TEXTURE_2D,
+    tex,
+    0
+  );
+  return fb;
+}
+function _initVertexAttributes(gl, program, data) {
+  return (data || []).map((attr) => {
+    const { location, buffer } = _createBuffer(
+      gl,
+      program,
+      attr.name,
+      attr.data
+    );
+    return {
+      name: attr.name,
+      location,
+      buffer,
+      type: attr.type,
+      size: attr.size
+    };
+  });
+}
+function _initUniforms(gl, program, uniforms) {
+  return (uniforms || []).map((uniform) => {
+    const location = gl.getUniformLocation(program, uniform.name);
+    return {
+      location,
+      size: uniform.size || uniform.data.length,
+      type: uniform.type,
+      data: uniform.data
+    };
+  });
+}
+function _setUniforms(gl, uniformData) {
+  (uniformData || []).forEach((uniform) => {
+    let { size, type, location, data } = uniform;
+    if (type === "i") {
+      data = new Int32Array(data);
+    }
+    gl[`uniform${size}${type}v`](location, data);
+  });
+}
+function _enableVertexAttributes(gl, attributes) {
+  (attributes || []).forEach((attrib) => {
+    const { location, buffer, size, type } = attrib;
+    gl.enableVertexAttribArray(location);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.vertexAttribPointer(location, size, gl[type], false, 0, 0);
+  });
+}
+function _getTextureWrap(key) {
+  return TEXTURE_WRAP[key] || TEXTURE_WRAP["stretch"];
+}
+function _createFloatTexture(gl, {
+  width,
+  height,
+  data = null,
+  format = "RGBA",
+  wrap = "stretch",
+  filter = "NEAREST"
+} = {}) {
+  const ext = gl.getExtension("OES_texture_float");
+  if (!ext) {
+    throw new Error("OES_texture_float not supported");
+  }
+  return createTexture(gl, {
+    width,
+    height,
+    data,
+    format,
+    wrap,
+    filter,
+    textureType: "FLOAT"
+  });
+}
+function logShaders(type, error, vertexSrc, fragmentSrc) {
+  function addLineNumbers(str) {
+    return str.split("\n").map((line, i) => `${i + 1}: ${line}`).join("\n");
+  }
+  if (error) {
+    throw new Error(
+      `${type} error:: ${error}
+${addLineNumbers(type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc)}`
+    );
+  }
+}
+class Kampos {
+  /**
+   * @constructor
+   */
+  constructor(config) {
+    if (!config || !config.target) {
+      throw new Error("A target canvas was not provided");
+    }
+    if (Kampos.preventContextCreation)
+      throw new Error("Context creation is prevented");
+    this._contextCreationError = function() {
+      Kampos.preventContextCreation = true;
+      if (config && config.onContextCreationError) {
+        config.onContextCreationError.call(this, config);
+      }
+    };
+    config.target.addEventListener(
+      "webglcontextcreationerror",
+      this._contextCreationError,
+      false
+    );
+    const success = this.init(config);
+    if (!success) throw new Error("Could not create context");
+    this._restoreContext = (e) => {
+      e && e.preventDefault();
+      this.config.target.removeEventListener(
+        "webglcontextrestored",
+        this._restoreContext,
+        true
+      );
+      const success2 = this.init();
+      if (!success2) return false;
+      if (this._source) {
+        this.setSource(this._source);
+      }
+      delete this._source;
+      if (config && config.onContextRestored) {
+        config.onContextRestored.call(this, config);
+      }
+      return true;
+    };
+    this._loseContext = (e) => {
+      e.preventDefault();
+      if (this.gl && this.gl.isContextLost()) {
+        this.lostContext = true;
+        this.config.target.addEventListener(
+          "webglcontextrestored",
+          this._restoreContext,
+          true
+        );
+        this.destroy(true);
+        if (config && config.onContextLost) {
+          config.onContextLost.call(this, config);
+        }
+      }
+    };
+    this.config.target.addEventListener(
+      "webglcontextlost",
+      this._loseContext,
+      true
+    );
+  }
+  /**
+   * Initializes a Kampos instance.
+   * This is called inside the constructor,
+   * but can be called again after effects have changed
+   * or after {@link Kampos#destroy}.
+   *
+   * @param {kamposConfig} [config] defaults to `this.config`
+   * @return {boolean} success whether initializing of the context and program were successful
+   */
+  init(config) {
+    config = config || this.config;
+    let { target, plane, effects: effects2, ticker, noSource, fbo } = config;
+    if (Kampos.preventContextCreation) return false;
+    this.lostContext = false;
+    let gl = getWebGLContext(target);
+    if (!gl) return false;
+    if (gl.isContextLost()) {
+      const success = this.restoreContext();
+      if (!success) return false;
+      gl = getWebGLContext(this.config.target);
+      if (!gl) return false;
+    }
+    const { x: xSegments = 1, y: ySegments = 1 } = plane && plane.segments ? typeof plane.segments === "object" ? plane.segments : { x: plane.segments, y: plane.segments } : {};
+    this.plane = {
+      xSegments,
+      ySegments
+    };
+    const { data, fboData } = init({
+      gl,
+      plane: this.plane,
+      effects: effects2,
+      dimensions: this.dimensions,
+      noSource,
+      fbo
+    });
+    this.gl = gl;
+    this.data = data;
+    this.fboData = fboData;
+    this.config = config;
+    if (ticker) {
+      this.ticker = ticker;
+      ticker.add(this);
+    }
+    return true;
+  }
+  /**
+   * Set the source config.
+   *
+   * @param {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|kamposSource} source
+   * @param {boolean} [skipTextureCreation] defaults to `false`
+   * @example
+   * const media = document.querySelector('#video');
+   * kampos.setSource(media);
+   */
+  setSource(source, skipTextureCreation) {
+    if (!source) return;
+    if (this.lostContext) {
+      const success = this.restoreContext();
+      if (!success) return;
+    }
+    let media, width, height, shouldUpdate;
+    if (Object.prototype.toString.call(source) === "[object Object]") {
+      ({ media, width, height, shouldUpdate } = source);
+    } else {
+      media = source;
+    }
+    const isVideo = media instanceof HTMLVideoElement;
+    const isCanvas = media instanceof HTMLCanvasElement;
+    if (width && height) {
+      this.dimensions = { width, height };
+    } else if (isVideo) {
+      this.dimensions = { width: media.videoWidth, height: media.videoHeight };
+    } else if (media.naturalWidth) {
+      this.dimensions = { width: media.naturalWidth, height: media.naturalHeight };
+    }
+    if (source && !this.data.source) {
+      this.data.source = source;
+    }
+    if (typeof shouldUpdate === "boolean") {
+      this.data.source.shouldUpdate = shouldUpdate;
+    } else {
+      this.data.source.shouldUpdate = isVideo || isCanvas;
+    }
+    resize(this.gl, this.dimensions);
+    if (!skipTextureCreation) {
+      this._createTextures();
+    }
+    this.media = media || this.media;
+    this.data.source._sampled = false;
+  }
+  /**
+   * Draw current scene.
+   *
+   * @param {number} [time]
+   */
+  draw(time) {
+    if (this.lostContext) {
+      const success = this.restoreContext();
+      if (!success) return;
+    }
+    const cb = this.config.beforeDraw;
+    if (cb && cb(time) === false) return;
+    draw(this.gl, this.plane, this.media, this.data, this.fboData);
+    if (this.config.afterDraw) {
+      this.config.afterDraw(time);
+    }
+  }
+  /**
+   * Starts the animation loop.
+   *
+   * If a {@link Ticker} is used, this instance will be added to that {@link Ticker}.
+   *
+   * @param {function} [beforeDraw] function to run before each draw call
+   * @param {function} [afterDraw] function to run after each draw call
+   */
+  play(beforeDraw, afterDraw) {
+    if (typeof beforeDraw === "function") {
+      this.config.beforeDraw = beforeDraw;
+    }
+    if (typeof afterDraw === "function") {
+      this.config.afterDraw = afterDraw;
+    }
+    if (this.ticker) {
+      if (this.animationFrameId) {
+        this.stop();
+      }
+      if (!this.playing) {
+        this.playing = true;
+        this.ticker.add(this);
+      }
+    } else if (!this.animationFrameId) {
+      const loop = (time) => {
+        this.animationFrameId = window.requestAnimationFrame(loop);
+        this.draw(time);
+      };
+      this.animationFrameId = window.requestAnimationFrame(loop);
+    }
+  }
+  /**
+   * Stops the animation loop.
+   *
+   * If a {@link Ticker} is used, this instance will be removed from that {@link Ticker}.
+   */
+  stop() {
+    if (this.animationFrameId) {
+      window.cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    if (this.playing) {
+      this.playing = false;
+      this.ticker.remove(this);
+    }
+  }
+  /**
+   * Stops the animation loop and frees all resources.
+   *
+   * @param {boolean} [keepState] for internal use.
+   */
+  destroy(keepState) {
+    this.stop();
+    if (this.gl && this.data) {
+      destroy(this.gl, this.data);
+      if (this.fboData) {
+        destroy(this.gl, this.fboData);
+      }
+    }
+    if (keepState) {
+      const dims = this.dimensions || {};
+      this._source = this._source || {
+        media: this.media,
+        width: dims.width,
+        height: dims.height
+      };
+    } else {
+      if (this.config) {
+        this.config.target.removeEventListener(
+          "webglcontextlost",
+          this._loseContext,
+          true
+        );
+        this.config.target.removeEventListener(
+          "webglcontextcreationerror",
+          this._contextCreationError,
+          false
+        );
+      }
+      this.config = null;
+      this.dimensions = null;
+    }
+    this.gl = null;
+    this.data = null;
+    this.media = null;
+  }
+  /**
+   * Restore a lost WebGL context fot the given target.
+   * This will replace canvas DOM element with a fresh clone.
+   *
+   * @return {boolean} success whether forcing a context restore was successful
+   */
+  restoreContext() {
+    if (Kampos.preventContextCreation) return false;
+    const canvas2 = this.config.target;
+    const clone = this.config.target.cloneNode(true);
+    const parent = canvas2.parentNode;
+    if (parent) {
+      parent.replaceChild(clone, canvas2);
+    }
+    this.config.target = clone;
+    canvas2.removeEventListener("webglcontextlost", this._loseContext, true);
+    canvas2.removeEventListener(
+      "webglcontextrestored",
+      this._restoreContext,
+      true
+    );
+    canvas2.removeEventListener(
+      "webglcontextcreationerror",
+      this._contextCreationError,
+      false
+    );
+    clone.addEventListener("webglcontextlost", this._loseContext, true);
+    clone.addEventListener(
+      "webglcontextcreationerror",
+      this._contextCreationError,
+      false
+    );
+    if (this.lostContext) {
+      return this._restoreContext();
+    }
+    return true;
+  }
+  _createTextures() {
+    this.data && this.data.textures.forEach((texture, i) => {
+      const data = this.data.textures[i];
+      data.texture = createTexture(this.gl, {
+        width: this.dimensions.width,
+        height: this.dimensions.height,
+        format: texture.format,
+        data: texture.data,
+        wrap: texture.wrap
+      }).texture;
+      data.format = texture.format;
+      data.update = texture.update;
+    });
+  }
+}
+const effects$1 = {
+  alphaMask,
+  blend,
+  brightnessContrast,
+  channelSplit,
+  deformation,
+  displacement,
+  duotone,
+  hueSaturation,
+  kaleidoscope,
+  turbulence,
+  slitScan,
+  flowmapGridDisplacement
+};
+function transparentVideo() {
+  return {
+    vertex: {
+      uniform: {
+        u_texOffset: "vec2"
+      },
+      main: "v_texAlphaCoord = v_texCoord + u_texOffset;"
+    },
+    fragment: {
+      uniform: {
+        u_tvEnabled: "bool"
+      },
+      main: `
+    if (u_tvEnabled) {
+        alpha *= dot(lumcoeff, texture2D(u_source, v_texAlphaCoord).rgb);
+
+        // transform alpha values from sRGB source to linearRGB - this cleans up the rim from the result
+        float linear;
+        if (alpha <= 0.04045) {
+            linear = alpha / 12.92;
+        }
+        else {
+            linear = pow((alpha + 0.055) / 1.055, 2.4);
+        }
+
+        alpha = linear;
+
+        if (alpha < 0.04) {
+            alpha = 0.0;
+        }
+        else if (alpha > 0.96) {
+            alpha = 1.0;
+        }
+    }`
+    },
+    get disabled() {
+      return !this.uniforms[0].data[0];
+    },
+    set disabled(b) {
+      this.uniforms[0].data[0] = +!b;
+    },
+    varying: {
+      v_texAlphaCoord: "vec2"
+    },
+    uniforms: [
+      {
+        name: "u_tvEnabled",
+        type: "i",
+        data: [1]
+      },
+      {
+        name: "u_texOffset",
+        type: "f",
+        data: [0, -0.5]
+      }
+    ],
+    attributes: [
+      {
+        name: "a_texCoord",
+        data: new Float32Array([
+          0,
+          0.5,
+          0,
+          1,
+          1,
+          0.5,
+          1,
+          0.5,
+          0,
+          1,
+          1,
+          1
+        ]),
+        size: 2,
+        type: "FLOAT"
+      }
+    ]
+  };
+}
+const effects = { ...effects$1, transparentVideo };
+Kampos.prototype.getRequestFrame = function getRequestFrame() {
+  return "requestVideoFrameCallback" in HTMLVideoElement.prototype ? (fn) => {
+    var _a;
+    return (_a = this.media) == null ? void 0 : _a.requestVideoFrameCallback(fn);
+  } : window.requestAnimationFrame;
+};
+Kampos.prototype.play = function play() {
+  if (!this.animationFrameId) {
+    const requestFrame = this.getRequestFrame();
+    const loop = () => {
+      const video = this.media;
+      this.animationFrameId = requestFrame(loop);
+      if (video && video.readyState >= video.HAVE_CURRENT_DATA && (!(video.paused || video.ended) || this._needsRedraw)) {
+        this._needsRedraw = false;
+        this.draw();
+      }
+    };
+    this.animationFrameId = requestFrame(loop);
+  }
+};
+const getVglSource = (media) => ({
+  width: media && media.videoWidth || 0,
+  height: media && media.videoHeight / 2 || 0,
+  media
+});
+function hexToVec4(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? [
+    parseInt(result[1], 16) / 255,
+    parseInt(result[2], 16) / 255,
+    parseInt(result[3], 16) / 255,
+    1
+  ] : hex;
+}
+const getKamposEffects = (prop = {}) => {
+  const result = [effects.transparentVideo()];
+  const hasBrightness = "brightness" in prop;
+  const hasContrast = "contrast" in prop;
+  if (hasBrightness || hasContrast) {
+    const bc = effects.brightnessContrast();
+    if (hasBrightness) {
+      bc.brightness = prop.brightness;
+    }
+    if (hasContrast) {
+      bc.contrast = prop.contrast;
+    }
+    result.push(bc);
+  }
+  if (prop.duotoneDark && prop.duotoneLight) {
+    const dt = effects.duotone();
+    dt.dark = hexToVec4(prop.duotoneDark);
+    dt.light = hexToVec4(prop.duotoneLight);
+    result.push(dt);
+  }
+  const hasHue = "hue" in prop;
+  const hasSaturation = "saturation" in prop;
+  if (hasHue || hasSaturation) {
+    const hs = effects.hueSaturation();
+    if (hasHue) {
+      hs.hue = prop.hue;
+    }
+    if (hasSaturation) {
+      hs.saturation = prop.saturation;
+    }
+    result.push(hs);
+  }
+  return result;
+};
+const isVideoReady = (video) => video.readyState >= video.HAVE_CURRENT_DATA;
+const MAX_CONTEXTS = 8;
+const COUNTER = {
+  count: 0,
+  set: /* @__PURE__ */ new Set(),
+  add(ref) {
+    if (COUNTER.set.has(ref)) {
+      return true;
+    }
+    if (COUNTER.set.size < MAX_CONTEXTS) {
+      COUNTER.set.add(ref);
+      COUNTER.count = COUNTER.set.size;
+      return true;
+    }
+    return false;
+  },
+  remove(ref) {
+    COUNTER.set.delete(ref);
+    COUNTER.count = COUNTER.set.size;
+  }
+};
+const isBrowser = () => typeof window !== "undefined";
+let _contextManager = COUNTER;
+if (isBrowser()) {
+  if (window.__wixWebGLContextManager__) {
+    _contextManager = window.__wixWebGLContextManager__;
+  } else {
+    window.__wixWebGLContextManager__ = COUNTER;
+  }
+}
+function tvControllerFactory({
+  filterEffect,
+  playerRef,
+  videoRef,
+  canvasRef,
+  contextRef,
+  kampos,
+  setCanPlayTV
+}) {
+  let inView = false;
+  let posterRemoved = false;
+  function handleSeeked() {
+    if (!(videoRef.current && playerRef.current)) {
+      return;
+    }
+    videoRef.current.removeEventListener("seeked", handleSeeked);
+    playerRef.current.dataset.showCanvas = "";
+    posterRemoved = true;
+  }
+  const controller = {
+    initKampos() {
+      try {
+        kampos.current = new Kampos({
+          target: canvasRef.current,
+          effects: getKamposEffects(filterEffect || {}),
+          onContextLost: () => {
+            const video = kampos.current._source && kampos.current._source.media;
+            if (video && (video.ended || video.paused)) {
+              kampos.current._needsRedraw = true;
+            }
+            this.stopKampos();
+            if (inView) {
+              this.playKampos();
+            }
+          }
+        });
+        kampos.current.hasContext = true;
+      } catch (e) {
+        _contextManager.remove(contextRef);
+        setCanPlayTV(false);
+        if (posterRemoved) {
+          controller.showPoster();
+        }
+        return;
+      }
+      if (!videoRef.current) {
+        return;
+      }
+      const mediaReadyHandler = () => {
+        if (!videoRef.current) {
+          return;
+        }
+        kampos.current.setSource(
+          getVglSource(videoRef.current)
+        );
+        controller.playKampos();
+        videoRef.current.removeEventListener(
+          "loadeddata",
+          mediaReadyHandler,
+          false
+        );
+      };
+      if (isVideoReady(videoRef.current)) {
+        mediaReadyHandler();
+      } else {
+        videoRef.current.addEventListener(
+          "loadeddata",
+          mediaReadyHandler,
+          false
+        );
+      }
+    },
+    playKampos() {
+      if (!playerRef.current || !canvasRef.current) {
+        return;
+      }
+      let hasContext;
+      if (kampos.current) {
+        hasContext = kampos.current.hasContext || _contextManager.add(contextRef);
+      } else {
+        hasContext = Kampos.preventContextCreation ? false : _contextManager.add(contextRef);
+      }
+      if (!hasContext) {
+        if (posterRemoved) {
+          controller.showPoster();
+        }
+        return;
+      }
+      if (!kampos.current || !kampos.current.config) {
+        controller.initKampos();
+      } else {
+        if (kampos.current.lostContext) {
+          kampos.current.restoreContext();
+        }
+        kampos.current.hasContext = true;
+        kampos.current.play();
+        if (!posterRemoved && kampos.current.media && isVideoReady(kampos.current.media) && "playing" in playerRef.current.dataset) {
+          controller.removePoster();
+        }
+      }
+    },
+    stopKampos() {
+      _contextManager.remove(contextRef);
+      kampos.current.hasContext = false;
+      kampos.current.stop();
+    },
+    killKampos() {
+      var _a;
+      if (kampos.current) {
+        controller.stopKampos();
+        kampos.current.destroy();
+      }
+      (_a = videoRef.current) == null ? void 0 : _a.removeEventListener("seeked", handleSeeked);
+    },
+    removePoster() {
+      const video = videoRef.current;
+      const player = playerRef.current;
+      if (posterRemoved || !(player && video && kampos.current)) {
+        return;
+      }
+      if (video.paused || video.ended || kampos.current._needsRedraw) {
+        kampos.current._needsRedraw = false;
+        kampos.current.draw();
+      }
+      video.addEventListener("seeked", handleSeeked);
+      video.currentTime = 0;
+    },
+    showPoster() {
+      if (playerRef.current && videoRef.current) {
+        delete playerRef.current.dataset.showCanvas;
+        posterRemoved = false;
+      }
+    },
+    onViewEnter() {
+      inView = true;
+      controller.playKampos();
+    },
+    onViewLeave() {
+      inView = false;
+      if (kampos.current && kampos.current.hasContext) {
+        controller.stopKampos();
+      }
+    }
+  };
+  return controller;
+}
+function useTransparentVideo(props) {
+  const {
+    a11y,
+    className,
+    id,
+    playbackRate = 1,
+    video,
+    videoStartType = VideoStartType.auto,
+    videoEndType = VideoEndType.loop,
+    showPoster = false,
+    mute = true
+  } = props;
+  const playerRef = useRef(null);
+  const videoRef = useRef(null);
+  const canvasRef = useRef(null);
+  const kamposRef = useRef(null);
+  const contextRef = useRef({});
+  const controllerRef = useRef(null);
+  const initialFilterEffectRef = useRef(props.filterEffect);
+  const [canPlayTransparentVideo, setCanPlayTransparentVideo] = useState(true);
+  const [playingState, setPlayingState] = useState();
+  const [isMuted, setIsMuted] = useState(videoStartType === VideoStartType.auto || mute);
+  useEffect(() => {
+    if (!canPlayTransparentVideo) {
+      return;
+    }
+    if (!controllerRef.current) {
+      controllerRef.current = tvControllerFactory({
+        filterEffect: initialFilterEffectRef.current ?? void 0,
+        playerRef,
+        videoRef,
+        canvasRef,
+        contextRef,
+        kampos: kamposRef,
+        setCanPlayTV: setCanPlayTransparentVideo
+      });
+    }
+    const controller = controllerRef.current;
+    const videoElement = videoRef.current;
+    if (!controller || !videoElement) {
+      return;
+    }
+    const handlePlay = () => {
+      var _a;
+      (_a = playerRef.current) == null ? void 0 : _a.setAttribute("data-playing", "");
+      controller.removePoster();
+      controller.onViewEnter();
+      setPlayingState(VideoPlayingState.playing);
+    };
+    const handlePause = () => {
+      var _a;
+      (_a = playerRef.current) == null ? void 0 : _a.removeAttribute("data-playing");
+      setPlayingState(VideoPlayingState.paused);
+    };
+    const handleEnded = () => {
+      var _a;
+      (_a = playerRef.current) == null ? void 0 : _a.removeAttribute("data-playing");
+      controller.showPoster();
+      setPlayingState(VideoPlayingState.ended);
+    };
+    controller.onViewEnter();
+    videoElement.addEventListener("play", handlePlay);
+    videoElement.addEventListener("pause", handlePause);
+    videoElement.addEventListener("ended", handleEnded);
+    return () => {
+      videoElement.removeEventListener("play", handlePlay);
+      videoElement.removeEventListener("pause", handlePause);
+      videoElement.removeEventListener("ended", handleEnded);
+      controller.killKampos();
+      controllerRef.current = null;
+    };
+  }, [canPlayTransparentVideo]);
+  const isPlaying = playingState === VideoPlayingState.playing;
+  const shouldAutoplay = videoStartType === VideoStartType.auto;
+  const shouldReplay = videoEndType !== VideoEndType.stop;
+  const shouldDisplayPoster = showPoster || !isPlaying && playingState !== VideoPlayingState.paused;
+  const shouldMuteVideo = isMuted || mute || shouldDisplayPoster;
+  const shouldDisplayAudioToggle = !!(video && video.hasAudio && !mute);
+  const shouldDisplayPlayButton = !!video && !(playingState === VideoPlayingState.ended && !shouldReplay);
+  const posterFilterId = useMemo(() => `${SVG_FILTER_ID_PREFIX}${props.id}`, [props.id]);
+  const onClickHandler = useCallback(() => {
+    var _a, _b;
+    if (playingState === VideoPlayingState.ended && !shouldReplay) {
+      return;
+    }
+    if (isPlaying) {
+      (_a = videoRef.current) == null ? void 0 : _a.pause();
+    } else {
+      (_b = videoRef.current) == null ? void 0 : _b.play();
+    }
+  }, [playingState, isPlaying, shouldReplay]);
+  const onMouseEnterHandler = useCallback(() => {
+    var _a;
+    if (playingState === VideoPlayingState.ended && !shouldReplay) {
+      return;
+    }
+    if (videoStartType === VideoStartType.hover) {
+      (_a = videoRef.current) == null ? void 0 : _a.play();
+    }
+  }, [playingState, shouldReplay, videoStartType]);
+  const onMouseOutHandler = useCallback(() => {
+    var _a;
+    if (videoStartType === VideoStartType.hover) {
+      (_a = videoRef.current) == null ? void 0 : _a.pause();
+    }
+  }, [videoStartType]);
+  const onAudioToggleClickHandler = useCallback((event) => {
+    event.stopPropagation();
+    setIsMuted((prev) => !prev);
+  }, []);
+  return {
+    a11y,
+    className,
+    canvasRef,
+    isMuted,
+    isPlaying,
+    id,
+    shouldMuteVideo,
+    onAudioToggleClickHandler,
+    onClickHandler,
+    onMouseEnterHandler,
+    onMouseOutHandler,
+    shouldAutoplay,
+    playbackRate,
+    playerRef,
+    shouldDisplayPoster,
+    video,
+    videoEndType,
+    videoRef,
+    posterFilterId,
+    shouldDisplayAudioToggle,
+    shouldDisplayPlayButton
+  };
+}
+const mainWrapper = "mainWrapper__gc4Bd";
+const canvas = "canvas__fJeLY";
+const audioToggle = "audioToggle__k2EqB";
+const playWrapper = "playWrapper__yH3ix";
+const videoWrapper = "videoWrapper__e-kgj";
+const hidden = "hidden__L52Wy";
+const poster = "poster__d1pI5";
+const isShown = "isShown__QBpcz";
+const filterEffectSvg = "filterEffectSvg__B9Lye";
+const styles = {
+  mainWrapper,
+  canvas,
+  audioToggle,
+  playWrapper,
+  videoWrapper,
+  hidden,
+  poster,
+  isShown,
+  filterEffectSvg
+};
+const TransparentVideoPoster = React__default.memo(
+  (props) => {
+    var _a;
+    const {
+      containerId,
+      posterFilterId,
+      ariaLabel,
+      posterUrl,
+      filterEffectSvgString
+    } = props;
+    const posterId = (_a = posterUrl.split("/").at(-1)) == null ? void 0 : _a.split(".")[0];
+    const instanceId = `poster-${posterId}_${containerId}`;
+    const defsStr = filterEffectSvgString ? closeSelfClosingSvgTags(
+      replaceCompIdPlaceholder(filterEffectSvgString, posterFilterId)
+    ) : "";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          style: { filter: `url(#${posterFilterId})` },
+          alt: ariaLabel,
+          className: styles.poster,
+          src: posterUrl,
+          id: `img_${instanceId}`
+        }
+      ),
+      defsStr && /* @__PURE__ */ jsx("svg", { id: `svg_${instanceId}`, className: styles.filterEffectSvg, children: /* @__PURE__ */ jsx("defs", { children: parse(defsStr) }) })
+    ] });
+  }
+);
+TransparentVideoPoster.displayName = "TransparentVideoPoster";
+const MutedIcon = () => /* @__PURE__ */ jsx("svg", { preserveAspectRatio: "xMidYMid meet", "data-bbox": "5.726 5.999 21.997 18.001", "data-type": "shape", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", role: "presentation", "aria-hidden": "true", "aria-label": "", children: /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "b0f9f707-af61-4336-bcea-c2fee482e562_audioOff-comp-mneizzz18", height: "200%", width: "200%", y: "-50%", x: "-50%", children: [
+    /* @__PURE__ */ jsx("feOffset", { result: "out-offset", in: "SourceAlpha" }),
+    /* @__PURE__ */ jsx("feGaussianBlur", { result: "out-blur", in: "out-offset", stdDeviation: "2" }),
+    /* @__PURE__ */ jsx("feColorMatrix", { result: "out-matrix", in: "out-blur", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.40 0" }),
+    /* @__PURE__ */ jsxs("feMerge", { children: [
+      /* @__PURE__ */ jsx("feMergeNode", { in: "out-matrix" }),
+      /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ jsx("path", { fill: "white", filter: "url(#b0f9f707-af61-4336-bcea-c2fee482e562_audioOff-comp-mneizzz18)", d: "M27.39 17.535a.478.478 0 0 1 .306.615v.001a.51.51 0 0 1-.641.292L6.074 12.471a.478.478 0 0 1-.325-.605.505.505 0 0 1 .661-.302l20.98 5.971zm-6.211.375c1.911-.377 1.812 2.001 1.813 2.001 0 1.273-.986 2.713-3.235 2.713-2.009 0-2.515-1.345-2.515-2.252 0-1.117.646-2.258 2.519-2.258.671-.001 1.095-.141 1.418-.204zm-8.427-1.643v.013h.001l-.005 5.007c0 1.273-.985 2.713-3.233 2.713C7.506 24 7 22.655 7 21.748c0-1.117.646-2.258 2.519-2.258 1.696 0 1.972-.427 1.972-1.319l.001-1.934a.513.513 0 0 1 .512-.477h.23c.285 0 .518.228.518.507zm-.537-4.642a.666.666 0 0 1-.506-.141.61.61 0 0 1-.22-.468l.006-2.86c0-.304.227-.562.535-.609l10.238-1.54a.629.629 0 0 1 .726.609L23 13.591c0 .013-.006.024-.007.036a.49.49 0 0 1-.094.248.516.516 0 0 1-.416.222h-.229a.51.51 0 0 1-.517-.505l-.004-3.479-9.518 1.512z" })
+] }) });
+const UnMutedIcon = () => /* @__PURE__ */ jsx("svg", { preserveAspectRatio: "xMidYMid meet", "data-bbox": "7 5.999 16 18.001", "data-type": "shape", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", role: "presentation", "aria-hidden": "true", "aria-label": "", children: /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "4e358e3c-c4cc-411c-8da6-747bbbb99bfa_audioOn-comp-mneizzz18", height: "200%", width: "200%", y: "-50%", x: "-50%", children: [
+    /* @__PURE__ */ jsx("feOffset", { result: "out-offset", in: "SourceAlpha" }),
+    /* @__PURE__ */ jsx("feGaussianBlur", { result: "out-blur", in: "out-offset", stdDeviation: "2" }),
+    /* @__PURE__ */ jsx("feColorMatrix", { result: "out-matrix", in: "out-blur", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" }),
+    /* @__PURE__ */ jsxs("feMerge", { children: [
+      /* @__PURE__ */ jsx("feMergeNode", { in: "out-matrix" }),
+      /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "white",
+      filter: "url(#4e358e3c-c4cc-411c-8da6-747bbbb99bfa_audioOn-comp-mneizzz18)",
+      d: "M23 6.616a.625.625 0 0 0-.727-.609l-10.241 1.54a.62.62 0 0 0-.535.609l-.006 10.016c0 .892-.276 1.319-1.971 1.319C7.646 19.49 7 20.631 7 21.748 7 22.655 7.507 24 9.516 24c2.249 0 3.236-1.44 3.236-2.713l.006-9.719 8.98-1.454v6.87c-.045.763-.401 1.13-1.973 1.13-1.874 0-2.52 1.141-2.52 2.258 0 .907.507 2.252 2.516 2.252 2.249 0 3.236-1.44 3.236-2.713L23 6.616z"
+    }
+  )
+] }) });
+const PauseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("rect", { x: "13", y: "10", width: "5", height: "20", "data-color": "1", fill: "white", "data-testid": "pause-rect" }),
+  /* @__PURE__ */ jsx("rect", { x: "22", y: "10", width: "5", height: "20", "data-color": "1", fill: "white", "data-testid": "pause-rect" })
+] });
+const PlayIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    preserveAspectRatio: "xMidYMid meet",
+    "data-bbox": "20 17.5 42 47",
+    viewBox: "0 0 82 82",
+    height: "64",
+    width: "64",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-type": "color",
+    role: "presentation",
+    "aria-hidden": "true",
+    "aria-label": "",
+    children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("path", { d: "M20 64.5v-47L62 41 20 64.5z", fill: "white", "clip-rule": "evenodd", "fill-rule": "evenodd", "data-color": "1" }) })
+  }
+);
+function TransparentVideo(props) {
+  var _a;
+  const filterEffects = getActiveFilterEffect(props);
+  const {
+    a11y,
+    className,
+    canvasRef,
+    id,
+    isMuted,
+    isPlaying,
+    shouldMuteVideo,
+    onAudioToggleClickHandler,
+    onClickHandler,
+    onMouseEnterHandler,
+    onMouseOutHandler,
+    shouldAutoplay,
+    playbackRate,
+    playerRef,
+    shouldDisplayPoster,
+    video,
+    videoEndType,
+    videoRef,
+    posterFilterId,
+    shouldDisplayAudioToggle,
+    shouldDisplayPlayButton
+  } = useTransparentVideo({ ...props, filterEffect: filterEffects });
+  const posterUri = (_a = video == null ? void 0 : video.poster) == null ? void 0 : _a.uri;
+  const posterUrl = posterUri ? formatPosterUrl(posterUri) : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ref: playerRef,
+      className: clsx(
+        styles.mainWrapper,
+        className,
+        "wixui-transparent-video"
+      ),
+      "data-has-alpha": "true",
+      "data-playing": shouldAutoplay ? "" : void 0,
+      onClick: onClickHandler,
+      onMouseEnter: onMouseEnterHandler,
+      onMouseLeave: onMouseOutHandler,
+      children: [
+        video && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: styles.videoWrapper, children: /* @__PURE__ */ jsx(
+            Video,
+            {
+              id: `wix-video-${id}`,
+              videoRef,
+              videoMedia: { ...video, name: (a11y == null ? void 0 : a11y.ariaLabel) || video.name },
+              muted: shouldMuteVideo,
+              loop: videoEndType === VideoEndType.loop,
+              autoplay: shouldAutoplay,
+              qualityPolicy: "adaptive",
+              playbackRate
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              id: `${id}-webglcanvas`,
+              ref: canvasRef,
+              className: clsx(styles.canvas, "webglcanvas", shouldDisplayPoster && styles.hidden),
+              "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || "",
+              role: "presentation",
+              "data-testid": "canvas"
+            }
+          )
+        ] }),
+        posterUrl && shouldDisplayPoster && /* @__PURE__ */ jsx(
+          TransparentVideoPoster,
+          {
+            containerId: id,
+            posterUrl,
+            posterFilterId,
+            filterEffectSvgString: getFilterEffectString(posterFilterId, filterEffects),
+            ariaLabel: a11y == null ? void 0 : a11y.ariaLabel
+          }
+        ),
+        shouldDisplayAudioToggle && /* @__PURE__ */ jsx("div", { className: clsx(styles.audioToggle), onClick: onAudioToggleClickHandler, children: isMuted ? /* @__PURE__ */ jsx(MutedIcon, {}) : /* @__PURE__ */ jsx(UnMutedIcon, {}) }),
+        shouldDisplayPlayButton && /* @__PURE__ */ jsx("div", { className: clsx(styles.playWrapper, { [styles.isShown]: !isPlaying }), children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {}) })
+      ]
+    }
+  );
+}
+export {
+  TransparentVideo as default
+};