gl-react-blur 2.0.1 → 6.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+Copyright (c) 2016 - 2017 <renaudeau.gaetan@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,65 +1,22 @@
-# gl-react-blur ![](https://img.shields.io/npm/v/gl-react-blur.svg) ![](https://img.shields.io/badge/gl--react-3-05F561.svg) ![](https://img.shields.io/badge/gl--react-dom%20%7C%20native-f90.svg)
+# gl-react-blur
 
-[Universal](https://projectseptemberinc.gitbooks.io/gl-react/content/docs/universal.html) gl-react **multi-pass gaussian Blur effect** with configurable intensity.
+Universal [gl-react](https://github.com/gre/gl-react) multi-pass gaussian Blur effect with configurable intensity, also supporting variable blur with a map.
 
-## `{Blur}` Props
-
-* `children` **(required)**: the content to blur.
-* `factor` **(required)**: positive number that control the blur intensity (independently from the viewport size).
-* `passes`: integer that controls the number of linear Blur passes. Default to 2. You better you an even number.
-
-More advanced...
-
-* `directionForPass`: function that gives the linear blur direction for a given pass. `(p, factor, total) => [ dx, dy ]`. Default to a function that do a _{ horizontal, vertical, diagonal 1, diagonal 2 }_ rotation with varying intensity.
-
-## `{BlurV}` Props
-
-**BlurV** is a variant of **Blur** that allows to make **Variable** blur effect.
-
-It accepts one more prop:
-
-* `map` **(required)**: a texture that localize the blur intensity.
-
-## Usage Examples
-
-```js
-var Blur = require("gl-react-blur").Blur;
-// or
+```jsx
+import { Surface } from "gl-react-dom"; // or gl-react-expo / gl-react-native / gl-react-headless
 import { Blur } from "gl-react-blur";
-```
-
-### Small blur on an image
-
-```html
-<Blur factor={0.5} passes={2}>
-  http://i.imgur.com/zJIxPEo.jpg
-</Blur>
-```
 
-### Medium blur on a video
-
-```html
-<Blur factor={2} passes={4}>
-  <video ... />
-</Blur>
+<Surface width={400} height={300}>
+  <Blur factor={4} passes={4}>
+    {"https://i.imgur.com/iPKTONG.jpg"}
+  </Blur>
+</Surface>;
 ```
 
-### Powerful blur on another stack of effects
-
-```html
-<Blur factor={20} passes={6}>
-  <EffectA>
-    <EffectB>
-      ...
-    </EffectB>
-  </EffectA>
-</Blur>
-```
+## Components
 
-### Variable Blur
+- **`<Blur factor passes? directionForPass?>`** — multi-pass gaussian blur. `factor` is the blur intensity in pixels; `passes` (default 2) trades performance for quality; `directionForPass(pass, factor, total)` can customize the direction vector of each pass (defaults to cycling horizontal, vertical and the two diagonals with increasing radius).
+- **`<BlurV map ...>`** — same as `Blur` but the blur intensity varies per-pixel, scaled by the red/green channels of the `map` texture (e.g. for tilt-shift or depth-of-field effects).
+- **`<Blur1D direction>`** / **`<BlurV1D direction map>`** — a single blur pass in one direction, the building blocks of the above.
 
-```html
-<BlurV factor={3} passes={6} map="http://i.imgur.com/SzbbUvX.png">
-  ...
-</BlurV>
-```
+The content to blur is given as `children` and can be any gl-react texture input (image URL, video, canvas, another Node, ...). All components accept optional `width`/`height` and otherwise inherit the size from their parent (via `connectSize`).

package/lib/Blur.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { DirectionForPass } from "./directionForPassDefault";
+export type BlurProps = {
+    /** the content to blur: any gl-react texture input */
+    children: any;
+    /** blur intensity, in pixels */
+    factor: number;
+    /** number of Blur1D passes to run (default 2: horizontal + vertical) */
+    passes?: number;
+    /** direction vector of a given pass; defaults to cycling H, V and diagonals */
+    directionForPass?: DirectionForPass;
+    width?: number;
+    height?: number;
+};
+declare const Blur: React.ComponentType<BlurProps>;
+export default Blur;
+//# sourceMappingURL=Blur.d.ts.map

package/lib/Blur.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blur.d.ts","sourceRoot":"","sources":["../src/Blur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAgC,EAC9B,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,SAAS,GAAG;IACtB,sDAAsD;IACtD,QAAQ,EAAE,GAAG,CAAC;IACd,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAGF,QAAA,MAAM,IAAI,EAiBM,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/C,eAAe,IAAI,CAAC"}

package/lib/Blur.js

@@ -3,63 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _Blur1D = require("./Blur1D");
-
-var _Blur1D2 = _interopRequireDefault(_Blur1D);
-
-var _directionForPassDefault = require("./directionForPassDefault");
-
-var _directionForPassDefault2 = _interopRequireDefault(_directionForPassDefault);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Blur = function Blur(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      pixelRatio = _ref.pixelRatio,
-      factor = _ref.factor,
-      children = _ref.children,
-      passes = _ref.passes,
-      directionForPass = _ref.directionForPass;
-
-  var rec = function rec(pass) {
-    return pass <= 0 ? children : _react2.default.createElement(
-      _Blur1D2.default,
-      {
-        width: width,
-        height: height,
-        pixelRatio: pixelRatio,
-        direction: directionForPass(pass, factor, passes)
-      },
-      rec(pass - 1)
-    );
-  };
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _glReact = require("gl-react");
+var _Blur1D = _interopRequireDefault(require("./Blur1D"));
+var _directionForPassDefault = _interopRequireDefault(require("./directionForPassDefault"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Recursively nests Blur1D passes for multi-directional gaussian blur
+const Blur = (0, _glReact.connectSize)(({
+  children,
+  factor,
+  passes = 2,
+  directionForPass = _directionForPassDefault.default
+}) => {
+  const rec = pass => pass <= 0 ? children : /*#__PURE__*/_react.default.createElement(_Blur1D.default, {
+    direction: directionForPass(pass, factor, passes)
+  }, rec(pass - 1));
   return rec(passes);
-};
-
-Blur.defaultProps = {
-  passes: 2,
-  directionForPass: _directionForPassDefault2.default
-};
-
-Blur.propTypes = {
-  factor: _propTypes2.default.number.isRequired,
-  children: _propTypes2.default.any.isRequired,
-  passes: _propTypes2.default.number,
-  directionForPass: _propTypes2.default.func,
-  width: _propTypes2.default.any,
-  height: _propTypes2.default.any,
-  pixelRatio: _propTypes2.default.number
-};
-
-exports.default = Blur;
+});
+var _default = exports.default = Blur;
 //# sourceMappingURL=Blur.js.map

package/lib/Blur.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Blur.js"],"names":["Blur","width","height","pixelRatio","factor","children","passes","directionForPass","rec","pass","defaultProps","directionForPassDefault","propTypes","PropTypes","number","isRequired","any","func"],"mappings":";;;;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEA,IAAMA,OAAO,SAAPA,IAAO,OAQP;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANJC,MAMI,QANJA,MAMI;AAAA,MALJC,UAKI,QALJA,UAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADJC,gBACI,QADJA,gBACI;;AACJ,MAAMC,MAAM,SAANA,GAAM;AAAA,WACVC,QAAQ,CAAR,GACEJ,QADF,GAGE;AAAC,sBAAD;AAAA;AACE,eAAOJ,KADT;AAEE,gBAAQC,MAFV;AAGE,oBAAYC,UAHd;AAIE,mBAAWI,iBAAiBE,IAAjB,EAAuBL,MAAvB,EAA+BE,MAA/B;AAJb;AAMGE,UAAIC,OAAO,CAAX;AANH,KAJQ;AAAA,GAAZ;AAaA,SAAOD,IAAIF,MAAJ,CAAP;AACD,CAvBD;;AAyBAN,KAAKU,YAAL,GAAoB;AAClBJ,UAAQ,CADU;AAElBC,oBAAkBI;AAFA,CAApB;;AAKAX,KAAKY,SAAL,GAAiB;AACfR,UAAQS,oBAAUC,MAAV,CAAiBC,UADV;AAEfV,YAAUQ,oBAAUG,GAAV,CAAcD,UAFT;AAGfT,UAAQO,oBAAUC,MAHH;AAIfP,oBAAkBM,oBAAUI,IAJb;AAKfhB,SAAOY,oBAAUG,GALF;AAMfd,UAAQW,oBAAUG,GANH;AAOfb,cAAYU,oBAAUC;AAPP,CAAjB;;kBAUed,I","file":"Blur.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Blur1D from \"./Blur1D\";\nimport directionForPassDefault from \"./directionForPassDefault\";\n\nconst Blur = ({\n  width,\n  height,\n  pixelRatio,\n  factor,\n  children,\n  passes,\n  directionForPass\n}) => {\n  const rec = pass =>\n    pass <= 0 ? (\n      children\n    ) : (\n      <Blur1D\n        width={width}\n        height={height}\n        pixelRatio={pixelRatio}\n        direction={directionForPass(pass, factor, passes)}\n      >\n        {rec(pass - 1)}\n      </Blur1D>\n    );\n  return rec(passes);\n};\n\nBlur.defaultProps = {\n  passes: 2,\n  directionForPass: directionForPassDefault\n};\n\nBlur.propTypes = {\n  factor: PropTypes.number.isRequired,\n  children: PropTypes.any.isRequired,\n  passes: PropTypes.number,\n  directionForPass: PropTypes.func,\n  width: PropTypes.any,\n  height: PropTypes.any,\n  pixelRatio: PropTypes.number\n};\n\nexport default Blur;\n"]}
+{"version":3,"file":"Blur.js","names":["_react","_interopRequireDefault","require","_glReact","_Blur1D","_directionForPassDefault","e","__esModule","default","Blur","connectSize","children","factor","passes","directionForPass","directionForPassDefault","rec","pass","createElement","direction","_default","exports"],"sources":["../src/Blur.tsx"],"sourcesContent":["import React from \"react\";\nimport { connectSize } from \"gl-react\";\nimport Blur1D from \"./Blur1D\";\nimport directionForPassDefault, {\n  DirectionForPass,\n} from \"./directionForPassDefault\";\n\nexport type BlurProps = {\n  /** the content to blur: any gl-react texture input */\n  children: any;\n  /** blur intensity, in pixels */\n  factor: number;\n  /** number of Blur1D passes to run (default 2: horizontal + vertical) */\n  passes?: number;\n  /** direction vector of a given pass; defaults to cycling H, V and diagonals */\n  directionForPass?: DirectionForPass;\n  width?: number;\n  height?: number;\n};\n\n// Recursively nests Blur1D passes for multi-directional gaussian blur\nconst Blur = connectSize(\n  ({\n    children,\n    factor,\n    passes = 2,\n    directionForPass = directionForPassDefault,\n  }: any) => {\n    const rec = (pass: number): any =>\n      pass <= 0 ? (\n        children\n      ) : (\n        <Blur1D direction={directionForPass(pass, factor, passes)}>\n          {rec(pass - 1)}\n        </Blur1D>\n      );\n    return rec(passes);\n  }\n) as unknown as React.ComponentType<BlurProps>;\n\nexport default Blur;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,wBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEmC,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAenC;AACA,MAAMG,IAAI,GAAG,IAAAC,oBAAW,EACtB,CAAC;EACCC,QAAQ;EACRC,MAAM;EACNC,MAAM,GAAG,CAAC;EACVC,gBAAgB,GAAGC;AAChB,CAAC,KAAK;EACT,MAAMC,GAAG,GAAIC,IAAY,IACvBA,IAAI,IAAI,CAAC,GACPN,QAAQ,gBAERX,MAAA,CAAAQ,OAAA,CAAAU,aAAA,CAACd,OAAA,CAAAI,OAAM;IAACW,SAAS,EAAEL,gBAAgB,CAACG,IAAI,EAAEL,MAAM,EAAEC,MAAM;EAAE,GACvDG,GAAG,CAACC,IAAI,GAAG,CAAC,CACP,CACT;EACH,OAAOD,GAAG,CAACH,MAAM,CAAC;AACpB,CACF,CAA8C;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEhCC,IAAI","ignoreList":[]}

package/lib/Blur1D.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type Blur1DProps = {
+    /** the content to blur: any gl-react texture input */
+    children: any;
+    /** blur direction & distance vector, in pixels */
+    direction: [number, number];
+    width?: number;
+    height?: number;
+};
+declare const Blur1D: React.ComponentType<Blur1DProps>;
+export default Blur1D;
+//# sourceMappingURL=Blur1D.d.ts.map

package/lib/Blur1D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blur1D.d.ts","sourceRoot":"","sources":["../src/Blur1D.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4B1B,MAAM,MAAM,WAAW,GAAG;IACxB,sDAAsD;IACtD,QAAQ,EAAE,GAAG,CAAC;IACd,kDAAkD;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAGF,QAAA,MAAM,MAAM,EAOI,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;AAEjD,eAAe,MAAM,CAAC"}

package/lib/Blur1D.js

@@ -3,49 +3,47 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _glReact = require("gl-react");
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var shaders = _glReact.Shaders.create({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const shaders = _glReact.Shaders.create({
   blur1D: {
     // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur
-    frag: "precision highp float;\nvarying vec2 uv;\nuniform sampler2D t;\nuniform vec2 direction, resolution;\n\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n  vec4 color = vec4(0.0);\n  vec2 off1 = vec2(1.3846153846) * direction;\n  vec2 off2 = vec2(3.2307692308) * direction;\n  color += texture2D(image, uv) * 0.2270270270;\n  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n  return color;\n}\n\nvoid main () {\n  gl_FragColor = blur9(t, uv, resolution, direction);\n}"
+    frag: (0, _glReact.GLSL)`
+precision highp float;
+varying vec2 uv;
+uniform sampler2D t;
+uniform vec2 direction, resolution;
+vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.3846153846) * direction;
+  vec2 off2 = vec2(3.2307692308) * direction;
+  color += texture2D(image, uv) * 0.2270270270;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
+  return color;
+}
+void main() {
+  gl_FragColor = blur9(t, uv, resolution, direction);
+}`
   }
 });
-
-var Blur1D = function Blur1D(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      pixelRatio = _ref.pixelRatio,
-      direction = _ref.direction,
-      t = _ref.children;
-  return _react2.default.createElement(_glReact.Node, {
-    shader: shaders.blur1D,
-    width: width,
-    height: height,
-    pixelRatio: pixelRatio,
-    uniforms: {
-      direction: direction,
-      resolution: _glReact.Uniform.Resolution,
-      t: t
-    }
-  });
-};
-
-Blur1D.propTypes = {
-  direction: _propTypes2.default.array.isRequired,
-  children: _propTypes2.default.any.isRequired
-};
-
-exports.default = Blur1D;
+// connectSize injects width/height for correct texel offset calculation
+const Blur1D = (0, _glReact.connectSize)(({
+  children: t,
+  direction,
+  width,
+  height
+}) => /*#__PURE__*/_react.default.createElement(_glReact.Node, {
+  shader: shaders.blur1D,
+  uniforms: {
+    t,
+    resolution: [width, height],
+    direction
+  }
+}));
+var _default = exports.default = Blur1D;
 //# sourceMappingURL=Blur1D.js.map

package/lib/Blur1D.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Blur1D.js"],"names":["shaders","Shaders","create","blur1D","frag","Blur1D","width","height","pixelRatio","direction","t","children","resolution","Uniform","Resolution","propTypes","PropTypes","array","isRequired","any"],"mappings":";;;;;;AAAA;;AACA;;;;AACA;;;;;;AAEA,IAAMA,UAAUC,iBAAQC,MAAR,CAAe;AAC7BC,UAAQ;AACN;AACAC;AAFM;AADqB,CAAf,CAAhB;;AA0BA,IAAMC,SAAS,SAATA,MAAS;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,MAAV,QAAUA,MAAV;AAAA,MAAkBC,UAAlB,QAAkBA,UAAlB;AAAA,MAA8BC,SAA9B,QAA8BA,SAA9B;AAAA,MAAmDC,CAAnD,QAAyCC,QAAzC;AAAA,SACb,8BAAC,aAAD;AACE,YAAQX,QAAQG,MADlB;AAEE,WAAOG,KAFT;AAGE,YAAQC,MAHV;AAIE,gBAAYC,UAJd;AAKE,cAAU;AACRC,0BADQ;AAERG,kBAAYC,iBAAQC,UAFZ;AAGRJ;AAHQ;AALZ,IADa;AAAA,CAAf;;AAcAL,OAAOU,SAAP,GAAmB;AACjBN,aAAWO,oBAAUC,KAAV,CAAgBC,UADV;AAEjBP,YAAUK,oBAAUG,GAAV,CAAcD;AAFP,CAAnB;;kBAKeb,M","file":"Blur1D.js","sourcesContent":["import { Shaders, Uniform, Node } from \"gl-react\";\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst shaders = Shaders.create({\n  blur1D: {\n    // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur\n    frag: `precision highp float;\nvarying vec2 uv;\nuniform sampler2D t;\nuniform vec2 direction, resolution;\n\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n  vec4 color = vec4(0.0);\n  vec2 off1 = vec2(1.3846153846) * direction;\n  vec2 off2 = vec2(3.2307692308) * direction;\n  color += texture2D(image, uv) * 0.2270270270;\n  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n  return color;\n}\n\nvoid main () {\n  gl_FragColor = blur9(t, uv, resolution, direction);\n}`\n  }\n});\n\nconst Blur1D = ({ width, height, pixelRatio, direction, children: t }) => (\n  <Node\n    shader={shaders.blur1D}\n    width={width}\n    height={height}\n    pixelRatio={pixelRatio}\n    uniforms={{\n      direction,\n      resolution: Uniform.Resolution,\n      t\n    }}\n  />\n);\n\nBlur1D.propTypes = {\n  direction: PropTypes.array.isRequired,\n  children: PropTypes.any.isRequired\n};\n\nexport default Blur1D;\n"]}
+{"version":3,"file":"Blur1D.js","names":["_react","_interopRequireDefault","require","_glReact","e","__esModule","default","shaders","Shaders","create","blur1D","frag","GLSL","Blur1D","connectSize","children","t","direction","width","height","createElement","Node","shader","uniforms","resolution","_default","exports"],"sources":["../src/Blur1D.tsx"],"sourcesContent":["import React from \"react\";\nimport { Shaders, Node, GLSL, connectSize } from \"gl-react\";\n\nconst shaders = Shaders.create({\n  blur1D: {\n    // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur\n    frag: GLSL`\nprecision highp float;\nvarying vec2 uv;\nuniform sampler2D t;\nuniform vec2 direction, resolution;\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n  vec4 color = vec4(0.0);\n  vec2 off1 = vec2(1.3846153846) * direction;\n  vec2 off2 = vec2(3.2307692308) * direction;\n  color += texture2D(image, uv) * 0.2270270270;\n  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n  return color;\n}\nvoid main() {\n  gl_FragColor = blur9(t, uv, resolution, direction);\n}`,\n  },\n});\n\nexport type Blur1DProps = {\n  /** the content to blur: any gl-react texture input */\n  children: any;\n  /** blur direction & distance vector, in pixels */\n  direction: [number, number];\n  width?: number;\n  height?: number;\n};\n\n// connectSize injects width/height for correct texel offset calculation\nconst Blur1D = connectSize(\n  ({ children: t, direction, width, height }: any) => (\n    <Node\n      shader={shaders.blur1D}\n      uniforms={{ t, resolution: [width, height], direction }}\n    />\n  )\n) as unknown as React.ComponentType<Blur1DProps>;\n\nexport default Blur1D;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAA4D,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5D,MAAMG,OAAO,GAAGC,gBAAO,CAACC,MAAM,CAAC;EAC7BC,MAAM,EAAE;IACN;IACAC,IAAI,EAAE,IAAAC,aAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE;AACF,CAAC,CAAC;AAWF;AACA,MAAMC,MAAM,GAAG,IAAAC,oBAAW,EACxB,CAAC;EAAEC,QAAQ,EAAEC,CAAC;EAAEC,SAAS;EAAEC,KAAK;EAAEC;AAAY,CAAC,kBAC7CnB,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACjB,QAAA,CAAAkB,IAAI;EACHC,MAAM,EAAEf,OAAO,CAACG,MAAO;EACvBa,QAAQ,EAAE;IAAEP,CAAC;IAAEQ,UAAU,EAAE,CAACN,KAAK,EAAEC,MAAM,CAAC;IAAEF;EAAU;AAAE,CACzD,CAEL,CAAgD;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAElCO,MAAM","ignoreList":[]}

package/lib/BlurV.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { DirectionForPass } from "./directionForPassDefault";
+export type BlurVProps = {
+    /** the content to blur: any gl-react texture input */
+    children: any;
+    /** blur intensity, in pixels */
+    factor: number;
+    /** a texture whose red/green channels scale the blur per-pixel */
+    map: any;
+    /** number of BlurV1D passes to run (default 2: horizontal + vertical) */
+    passes?: number;
+    /** direction vector of a given pass; defaults to cycling H, V and diagonals */
+    directionForPass?: DirectionForPass;
+    width?: number;
+    height?: number;
+};
+declare const BlurV: React.ComponentType<BlurVProps>;
+export default BlurV;
+//# sourceMappingURL=BlurV.d.ts.map

package/lib/BlurV.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurV.d.ts","sourceRoot":"","sources":["../src/BlurV.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAgC,EAC9B,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,UAAU,GAAG;IACvB,sDAAsD;IACtD,QAAQ,EAAE,GAAG,CAAC;IACd,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,GAAG,EAAE,GAAG,CAAC;IACT,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAGF,QAAA,MAAM,KAAK,EAkBK,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AAEhD,eAAe,KAAK,CAAC"}

package/lib/BlurV.js

@@ -3,66 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _BlurV1D = require("./BlurV1D");
-
-var _BlurV1D2 = _interopRequireDefault(_BlurV1D);
-
-var _directionForPassDefault = require("./directionForPassDefault");
-
-var _directionForPassDefault2 = _interopRequireDefault(_directionForPassDefault);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var BlurV = function BlurV(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      map = _ref.map,
-      pixelRatio = _ref.pixelRatio,
-      factor = _ref.factor,
-      children = _ref.children,
-      passes = _ref.passes,
-      directionForPass = _ref.directionForPass;
-
-  var rec = function rec(pass) {
-    return pass <= 0 ? children : _react2.default.createElement(
-      _BlurV1D2.default,
-      {
-        width: width,
-        height: height,
-        map: map,
-        pixelRatio: pixelRatio,
-        direction: directionForPass(pass, factor, passes)
-      },
-      rec(pass - 1)
-    );
-  };
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _glReact = require("gl-react");
+var _BlurV1D = _interopRequireDefault(require("./BlurV1D"));
+var _directionForPassDefault = _interopRequireDefault(require("./directionForPassDefault"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Recursively nests BlurV1D passes for variable multi-directional blur
+const BlurV = (0, _glReact.connectSize)(({
+  children,
+  factor,
+  map,
+  passes = 2,
+  directionForPass = _directionForPassDefault.default
+}) => {
+  const rec = pass => pass <= 0 ? children : /*#__PURE__*/_react.default.createElement(_BlurV1D.default, {
+    map: map,
+    direction: directionForPass(pass, factor, passes)
+  }, rec(pass - 1));
   return rec(passes);
-};
-
-BlurV.defaultProps = {
-  passes: 2,
-  directionForPass: _directionForPassDefault2.default
-};
-
-BlurV.propTypes = {
-  factor: _propTypes2.default.number.isRequired,
-  children: _propTypes2.default.any.isRequired,
-  passes: _propTypes2.default.number,
-  directionForPass: _propTypes2.default.func,
-  map: _propTypes2.default.any.isRequired,
-  width: _propTypes2.default.any,
-  height: _propTypes2.default.any,
-  pixelRatio: _propTypes2.default.number
-};
-
-exports.default = BlurV;
+});
+var _default = exports.default = BlurV;
 //# sourceMappingURL=BlurV.js.map

package/lib/BlurV.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/BlurV.js"],"names":["BlurV","width","height","map","pixelRatio","factor","children","passes","directionForPass","rec","pass","defaultProps","directionForPassDefault","propTypes","PropTypes","number","isRequired","any","func"],"mappings":";;;;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAEA,IAAMA,QAAQ,SAARA,KAAQ,OASR;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,GAMI,QANJA,GAMI;AAAA,MALJC,UAKI,QALJA,UAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADJC,gBACI,QADJA,gBACI;;AACJ,MAAMC,MAAM,SAANA,GAAM;AAAA,WACVC,QAAQ,CAAR,GACEJ,QADF,GAGE;AAAC,uBAAD;AAAA;AACE,eAAOL,KADT;AAEE,gBAAQC,MAFV;AAGE,aAAKC,GAHP;AAIE,oBAAYC,UAJd;AAKE,mBAAWI,iBAAiBE,IAAjB,EAAuBL,MAAvB,EAA+BE,MAA/B;AALb;AAOGE,UAAIC,OAAO,CAAX;AAPH,KAJQ;AAAA,GAAZ;AAcA,SAAOD,IAAIF,MAAJ,CAAP;AACD,CAzBD;;AA2BAP,MAAMW,YAAN,GAAqB;AACnBJ,UAAQ,CADW;AAEnBC,oBAAkBI;AAFC,CAArB;;AAKAZ,MAAMa,SAAN,GAAkB;AAChBR,UAAQS,oBAAUC,MAAV,CAAiBC,UADT;AAEhBV,YAAUQ,oBAAUG,GAAV,CAAcD,UAFR;AAGhBT,UAAQO,oBAAUC,MAHF;AAIhBP,oBAAkBM,oBAAUI,IAJZ;AAKhBf,OAAKW,oBAAUG,GAAV,CAAcD,UALH;AAMhBf,SAAOa,oBAAUG,GAND;AAOhBf,UAAQY,oBAAUG,GAPF;AAQhBb,cAAYU,oBAAUC;AARN,CAAlB;;kBAWef,K","file":"BlurV.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport BlurV1D from \"./BlurV1D\";\nimport directionForPassDefault from \"./directionForPassDefault\";\n\nconst BlurV = ({\n  width,\n  height,\n  map,\n  pixelRatio,\n  factor,\n  children,\n  passes,\n  directionForPass\n}) => {\n  const rec = pass =>\n    pass <= 0 ? (\n      children\n    ) : (\n      <BlurV1D\n        width={width}\n        height={height}\n        map={map}\n        pixelRatio={pixelRatio}\n        direction={directionForPass(pass, factor, passes)}\n      >\n        {rec(pass - 1)}\n      </BlurV1D>\n    );\n  return rec(passes);\n};\n\nBlurV.defaultProps = {\n  passes: 2,\n  directionForPass: directionForPassDefault\n};\n\nBlurV.propTypes = {\n  factor: PropTypes.number.isRequired,\n  children: PropTypes.any.isRequired,\n  passes: PropTypes.number,\n  directionForPass: PropTypes.func,\n  map: PropTypes.any.isRequired,\n  width: PropTypes.any,\n  height: PropTypes.any,\n  pixelRatio: PropTypes.number\n};\n\nexport default BlurV;\n"]}
+{"version":3,"file":"BlurV.js","names":["_react","_interopRequireDefault","require","_glReact","_BlurV1D","_directionForPassDefault","e","__esModule","default","BlurV","connectSize","children","factor","map","passes","directionForPass","directionForPassDefault","rec","pass","createElement","direction","_default","exports"],"sources":["../src/BlurV.tsx"],"sourcesContent":["import React from \"react\";\nimport { connectSize } from \"gl-react\";\nimport BlurV1D from \"./BlurV1D\";\nimport directionForPassDefault, {\n  DirectionForPass,\n} from \"./directionForPassDefault\";\n\nexport type BlurVProps = {\n  /** the content to blur: any gl-react texture input */\n  children: any;\n  /** blur intensity, in pixels */\n  factor: number;\n  /** a texture whose red/green channels scale the blur per-pixel */\n  map: any;\n  /** number of BlurV1D passes to run (default 2: horizontal + vertical) */\n  passes?: number;\n  /** direction vector of a given pass; defaults to cycling H, V and diagonals */\n  directionForPass?: DirectionForPass;\n  width?: number;\n  height?: number;\n};\n\n// Recursively nests BlurV1D passes for variable multi-directional blur\nconst BlurV = connectSize(\n  ({\n    children,\n    factor,\n    map,\n    passes = 2,\n    directionForPass = directionForPassDefault,\n  }: any) => {\n    const rec = (pass: number): any =>\n      pass <= 0 ? (\n        children\n      ) : (\n        <BlurV1D map={map} direction={directionForPass(pass, factor, passes)}>\n          {rec(pass - 1)}\n        </BlurV1D>\n      );\n    return rec(passes);\n  }\n) as unknown as React.ComponentType<BlurVProps>;\n\nexport default BlurV;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,wBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEmC,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAiBnC;AACA,MAAMG,KAAK,GAAG,IAAAC,oBAAW,EACvB,CAAC;EACCC,QAAQ;EACRC,MAAM;EACNC,GAAG;EACHC,MAAM,GAAG,CAAC;EACVC,gBAAgB,GAAGC;AAChB,CAAC,KAAK;EACT,MAAMC,GAAG,GAAIC,IAAY,IACvBA,IAAI,IAAI,CAAC,GACPP,QAAQ,gBAERX,MAAA,CAAAQ,OAAA,CAAAW,aAAA,CAACf,QAAA,CAAAI,OAAO;IAACK,GAAG,EAAEA,GAAI;IAACO,SAAS,EAAEL,gBAAgB,CAACG,IAAI,EAAEN,MAAM,EAAEE,MAAM;EAAE,GAClEG,GAAG,CAACC,IAAI,GAAG,CAAC,CACN,CACV;EACH,OAAOD,GAAG,CAACH,MAAM,CAAC;AACpB,CACF,CAA+C;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAd,OAAA,GAEjCC,KAAK","ignoreList":[]}

package/lib/BlurV1D.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type BlurV1DProps = {
+    /** the content to blur: any gl-react texture input */
+    children: any;
+    /** blur direction & distance vector, in pixels */
+    direction: [number, number];
+    /** a texture whose red/green channels scale the blur per-pixel */
+    map: any;
+    width?: number;
+    height?: number;
+};
+declare const BlurV1D: React.ComponentType<BlurV1DProps>;
+export default BlurV1D;
+//# sourceMappingURL=BlurV1D.d.ts.map

package/lib/BlurV1D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurV1D.d.ts","sourceRoot":"","sources":["../src/BlurV1D.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6B1B,MAAM,MAAM,YAAY,GAAG;IACzB,sDAAsD;IACtD,QAAQ,EAAE,GAAG,CAAC;IACd,kDAAkD;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,kEAAkE;IAClE,GAAG,EAAE,GAAG,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,OAAO,EAOG,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;AAElD,eAAe,OAAO,CAAC"}

package/lib/BlurV1D.js

@@ -3,52 +3,49 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _glReact = require("gl-react");
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var shaders = _glReact.Shaders.create({
-  blur1D: {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const shaders = _glReact.Shaders.create({
+  blurV1D: {
     // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur
-    frag: "precision highp float;\nvarying vec2 uv;\nuniform sampler2D t, map;\nuniform vec2 direction, resolution;\n\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n  vec4 color = vec4(0.0);\n  vec2 off1 = vec2(1.3846153846) * direction;\n  vec2 off2 = vec2(3.2307692308) * direction;\n  color += texture2D(image, uv) * 0.2270270270;\n  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n  return color;\n}\n\nvoid main () {\n  gl_FragColor = blur9(t, uv, resolution, direction * texture2D(map, uv).rg);\n}"
+    frag: (0, _glReact.GLSL)`
+precision highp float;
+varying vec2 uv;
+uniform sampler2D t, map;
+uniform vec2 direction, resolution;
+vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.3846153846) * direction;
+  vec2 off2 = vec2(3.2307692308) * direction;
+  color += texture2D(image, uv) * 0.2270270270;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
+  return color;
+}
+void main() {
+  // Direction scaled by map value makes blur strength vary per-pixel
+  gl_FragColor = blur9(t, uv, resolution, direction * texture2D(map, uv).rg);
+}`
   }
 });
-
-var BlurV1D = function BlurV1D(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      map = _ref.map,
-      pixelRatio = _ref.pixelRatio,
-      direction = _ref.direction,
-      t = _ref.children;
-  return _react2.default.createElement(_glReact.Node, {
-    shader: shaders.blur1D,
-    width: width,
-    height: height,
-    pixelRatio: pixelRatio,
-    uniforms: {
-      direction: direction,
-      resolution: _glReact.Uniform.Resolution,
-      t: t,
-      map: map
-    }
-  });
-};
-
-BlurV1D.propTypes = {
-  direction: _propTypes2.default.array.isRequired,
-  children: _propTypes2.default.any.isRequired,
-  map: _propTypes2.default.any.isRequired
-};
-
-exports.default = BlurV1D;
+const BlurV1D = (0, _glReact.connectSize)(({
+  children: t,
+  direction,
+  map,
+  width,
+  height
+}) => /*#__PURE__*/_react.default.createElement(_glReact.Node, {
+  shader: shaders.blurV1D,
+  uniforms: {
+    t,
+    map,
+    resolution: [width, height],
+    direction
+  }
+}));
+var _default = exports.default = BlurV1D;
 //# sourceMappingURL=BlurV1D.js.map

package/lib/BlurV1D.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/BlurV1D.js"],"names":["shaders","Shaders","create","blur1D","frag","BlurV1D","width","height","map","pixelRatio","direction","t","children","resolution","Uniform","Resolution","propTypes","PropTypes","array","isRequired","any"],"mappings":";;;;;;AAAA;;AACA;;;;AACA;;;;;;AAEA,IAAMA,UAAUC,iBAAQC,MAAR,CAAe;AAC7BC,UAAQ;AACN;AACAC;AAFM;AADqB,CAAf,CAAhB;;AA0BA,IAAMC,UAAU,SAAVA,OAAU;AAAA,MACdC,KADc,QACdA,KADc;AAAA,MAEdC,MAFc,QAEdA,MAFc;AAAA,MAGdC,GAHc,QAGdA,GAHc;AAAA,MAIdC,UAJc,QAIdA,UAJc;AAAA,MAKdC,SALc,QAKdA,SALc;AAAA,MAMJC,CANI,QAMdC,QANc;AAAA,SAQd,8BAAC,aAAD;AACE,YAAQZ,QAAQG,MADlB;AAEE,WAAOG,KAFT;AAGE,YAAQC,MAHV;AAIE,gBAAYE,UAJd;AAKE,cAAU;AACRC,0BADQ;AAERG,kBAAYC,iBAAQC,UAFZ;AAGRJ,UAHQ;AAIRH;AAJQ;AALZ,IARc;AAAA,CAAhB;;AAsBAH,QAAQW,SAAR,GAAoB;AAClBN,aAAWO,oBAAUC,KAAV,CAAgBC,UADT;AAElBP,YAAUK,oBAAUG,GAAV,CAAcD,UAFN;AAGlBX,OAAKS,oBAAUG,GAAV,CAAcD;AAHD,CAApB;;kBAMed,O","file":"BlurV1D.js","sourcesContent":["import { Shaders, Uniform, Node } from \"gl-react\";\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst shaders = Shaders.create({\n  blur1D: {\n    // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur\n    frag: `precision highp float;\nvarying vec2 uv;\nuniform sampler2D t, map;\nuniform vec2 direction, resolution;\n\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n  vec4 color = vec4(0.0);\n  vec2 off1 = vec2(1.3846153846) * direction;\n  vec2 off2 = vec2(3.2307692308) * direction;\n  color += texture2D(image, uv) * 0.2270270270;\n  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n  return color;\n}\n\nvoid main () {\n  gl_FragColor = blur9(t, uv, resolution, direction * texture2D(map, uv).rg);\n}`\n  }\n});\n\nconst BlurV1D = ({\n  width,\n  height,\n  map,\n  pixelRatio,\n  direction,\n  children: t\n}) => (\n  <Node\n    shader={shaders.blur1D}\n    width={width}\n    height={height}\n    pixelRatio={pixelRatio}\n    uniforms={{\n      direction,\n      resolution: Uniform.Resolution,\n      t,\n      map\n    }}\n  />\n);\n\nBlurV1D.propTypes = {\n  direction: PropTypes.array.isRequired,\n  children: PropTypes.any.isRequired,\n  map: PropTypes.any.isRequired\n};\n\nexport default BlurV1D;\n"]}
+{"version":3,"file":"BlurV1D.js","names":["_react","_interopRequireDefault","require","_glReact","e","__esModule","default","shaders","Shaders","create","blurV1D","frag","GLSL","BlurV1D","connectSize","children","t","direction","map","width","height","createElement","Node","shader","uniforms","resolution","_default","exports"],"sources":["../src/BlurV1D.tsx"],"sourcesContent":["import React from \"react\";\nimport { Shaders, Node, GLSL, connectSize } from \"gl-react\";\n\nconst shaders = Shaders.create({\n  blurV1D: {\n    // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur\n    frag: GLSL`\nprecision highp float;\nvarying vec2 uv;\nuniform sampler2D t, map;\nuniform vec2 direction, resolution;\nvec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n  vec4 color = vec4(0.0);\n  vec2 off1 = vec2(1.3846153846) * direction;\n  vec2 off2 = vec2(3.2307692308) * direction;\n  color += texture2D(image, uv) * 0.2270270270;\n  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;\n  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;\n  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;\n  return color;\n}\nvoid main() {\n  // Direction scaled by map value makes blur strength vary per-pixel\n  gl_FragColor = blur9(t, uv, resolution, direction * texture2D(map, uv).rg);\n}`,\n  },\n});\n\nexport type BlurV1DProps = {\n  /** the content to blur: any gl-react texture input */\n  children: any;\n  /** blur direction & distance vector, in pixels */\n  direction: [number, number];\n  /** a texture whose red/green channels scale the blur per-pixel */\n  map: any;\n  width?: number;\n  height?: number;\n};\n\nconst BlurV1D = connectSize(\n  ({ children: t, direction, map, width, height }: any) => (\n    <Node\n      shader={shaders.blurV1D}\n      uniforms={{ t, map, resolution: [width, height], direction }}\n    />\n  )\n) as unknown as React.ComponentType<BlurV1DProps>;\n\nexport default BlurV1D;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAA4D,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5D,MAAMG,OAAO,GAAGC,gBAAO,CAACC,MAAM,CAAC;EAC7BC,OAAO,EAAE;IACP;IACAC,IAAI,EAAE,IAAAC,aAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE;AACF,CAAC,CAAC;AAaF,MAAMC,OAAO,GAAG,IAAAC,oBAAW,EACzB,CAAC;EAAEC,QAAQ,EAAEC,CAAC;EAAEC,SAAS;EAAEC,GAAG;EAAEC,KAAK;EAAEC;AAAY,CAAC,kBAClDpB,MAAA,CAAAM,OAAA,CAAAe,aAAA,CAAClB,QAAA,CAAAmB,IAAI;EACHC,MAAM,EAAEhB,OAAO,CAACG,OAAQ;EACxBc,QAAQ,EAAE;IAAER,CAAC;IAAEE,GAAG;IAAEO,UAAU,EAAE,CAACN,KAAK,EAAEC,MAAM,CAAC;IAAEH;EAAU;AAAE,CAC9D,CAEL,CAAiD;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAArB,OAAA,GAEnCO,OAAO","ignoreList":[]}

package/lib/directionForPassDefault.d.ts

@@ -0,0 +1,4 @@
+export type DirectionForPass = (pass: number, factor: number, total: number) => [number, number];
+declare const directionForPassDefault: DirectionForPass;
+export default directionForPassDefault;
+//# sourceMappingURL=directionForPassDefault.d.ts.map

package/lib/directionForPassDefault.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directionForPassDefault.d.ts","sourceRoot":"","sources":["../src/directionForPassDefault.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAC7B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KACV,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAGtB,QAAA,MAAM,uBAAuB,EAAE,gBAY9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/directionForPassDefault.js

@@ -3,19 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var NORM = Math.sqrt(2) / 2;
-
-exports.default = function (p, factor, total) {
-  var f = factor * 2 * Math.ceil(p / 2) / total;
-  switch ((p - 1) % 4) {// alternate horizontal, vertical and 2 diagonals
+exports.default = void 0;
+const NORM = Math.sqrt(2) / 2;
+// Cycles through horizontal, vertical and the 2 diagonals with increasing radius
+const directionForPassDefault = (p, factor, total) => {
+  const f = factor * 2 * Math.ceil(p / 2) / total;
+  switch ((p - 1) % 4) {
     case 0:
       return [f, 0];
     case 1:
       return [0, f];
     case 2:
       return [f * NORM, f * NORM];
-    case 3:
+    default:
       return [f * NORM, -f * NORM];
   }
 };
+var _default = exports.default = directionForPassDefault;
 //# sourceMappingURL=directionForPassDefault.js.map

package/lib/directionForPassDefault.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/directionForPassDefault.js"],"names":["NORM","Math","sqrt","p","factor","total","f","ceil"],"mappings":";;;;;AAAA,IAAMA,OAAOC,KAAKC,IAAL,CAAU,CAAV,IAAe,CAA5B;;kBAEe,UAACC,CAAD,EAAIC,MAAJ,EAAYC,KAAZ,EAAsB;AACnC,MAAMC,IAAIF,SAAS,CAAT,GAAaH,KAAKM,IAAL,CAAUJ,IAAI,CAAd,CAAb,GAAgCE,KAA1C;AACA,UAAQ,CAACF,IAAI,CAAL,IAAU,CAAlB,GAAuB;AACrB,SAAK,CAAL;AACE,aAAO,CAACG,CAAD,EAAI,CAAJ,CAAP;AACF,SAAK,CAAL;AACE,aAAO,CAAC,CAAD,EAAIA,CAAJ,CAAP;AACF,SAAK,CAAL;AACE,aAAO,CAACA,IAAIN,IAAL,EAAWM,IAAIN,IAAf,CAAP;AACF,SAAK,CAAL;AACE,aAAO,CAACM,IAAIN,IAAL,EAAW,CAACM,CAAD,GAAKN,IAAhB,CAAP;AARJ;AAUD,C","file":"directionForPassDefault.js","sourcesContent":["const NORM = Math.sqrt(2) / 2;\n\nexport default (p, factor, total) => {\n  const f = factor * 2 * Math.ceil(p / 2) / total;\n  switch ((p - 1) % 4) { // alternate horizontal, vertical and 2 diagonals\n    case 0:\n      return [f, 0];\n    case 1:\n      return [0, f];\n    case 2:\n      return [f * NORM, f * NORM];\n    case 3:\n      return [f * NORM, -f * NORM];\n  }\n};\n"]}
+{"version":3,"file":"directionForPassDefault.js","names":["NORM","Math","sqrt","directionForPassDefault","p","factor","total","f","ceil","_default","exports","default"],"sources":["../src/directionForPassDefault.ts"],"sourcesContent":["const NORM = Math.sqrt(2) / 2;\n\nexport type DirectionForPass = (\n  pass: number,\n  factor: number,\n  total: number\n) => [number, number];\n\n// Cycles through horizontal, vertical and the 2 diagonals with increasing radius\nconst directionForPassDefault: DirectionForPass = (p, factor, total) => {\n  const f = (factor * 2 * Math.ceil(p / 2)) / total;\n  switch ((p - 1) % 4) {\n    case 0:\n      return [f, 0];\n    case 1:\n      return [0, f];\n    case 2:\n      return [f * NORM, f * NORM];\n    default:\n      return [f * NORM, -f * NORM];\n  }\n};\n\nexport default directionForPassDefault;\n"],"mappings":";;;;;;AAAA,MAAMA,IAAI,GAAGC,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;AAQ7B;AACA,MAAMC,uBAAyC,GAAGA,CAACC,CAAC,EAAEC,MAAM,EAAEC,KAAK,KAAK;EACtE,MAAMC,CAAC,GAAIF,MAAM,GAAG,CAAC,GAAGJ,IAAI,CAACO,IAAI,CAACJ,CAAC,GAAG,CAAC,CAAC,GAAIE,KAAK;EACjD,QAAQ,CAACF,CAAC,GAAG,CAAC,IAAI,CAAC;IACjB,KAAK,CAAC;MACJ,OAAO,CAACG,CAAC,EAAE,CAAC,CAAC;IACf,KAAK,CAAC;MACJ,OAAO,CAAC,CAAC,EAAEA,CAAC,CAAC;IACf,KAAK,CAAC;MACJ,OAAO,CAACA,CAAC,GAAGP,IAAI,EAAEO,CAAC,GAAGP,IAAI,CAAC;IAC7B;MACE,OAAO,CAACO,CAAC,GAAGP,IAAI,EAAE,CAACO,CAAC,GAAGP,IAAI,CAAC;EAChC;AACF,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaR,uBAAuB","ignoreList":[]}

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+import Blur from "./Blur";
+import Blur1D from "./Blur1D";
+import BlurV from "./BlurV";
+import BlurV1D from "./BlurV1D";
+import directionForPassDefault from "./directionForPassDefault";
+export { Blur, Blur1D, BlurV, BlurV1D, directionForPassDefault };
+export type { BlurProps } from "./Blur";
+export type { Blur1DProps } from "./Blur1D";
+export type { BlurVProps } from "./BlurV";
+export type { BlurV1DProps } from "./BlurV1D";
+export type { DirectionForPass } from "./directionForPassDefault";
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACjE,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/index.js

@@ -3,28 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BlurV1D = exports.BlurV = exports.Blur1D = exports.Blur = undefined;
-
-var _Blur = require("./Blur");
-
-var _Blur2 = _interopRequireDefault(_Blur);
-
-var _Blur1D = require("./Blur1D");
-
-var _Blur1D2 = _interopRequireDefault(_Blur1D);
-
-var _BlurV = require("./BlurV");
-
-var _BlurV2 = _interopRequireDefault(_BlurV);
-
-var _BlurV1D = require("./BlurV1D");
-
-var _BlurV1D2 = _interopRequireDefault(_BlurV1D);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Blur = _Blur2.default;
-exports.Blur1D = _Blur1D2.default;
-exports.BlurV = _BlurV2.default;
-exports.BlurV1D = _BlurV1D2.default;
+Object.defineProperty(exports, "Blur", {
+  enumerable: true,
+  get: function () {
+    return _Blur.default;
+  }
+});
+Object.defineProperty(exports, "Blur1D", {
+  enumerable: true,
+  get: function () {
+    return _Blur1D.default;
+  }
+});
+Object.defineProperty(exports, "BlurV", {
+  enumerable: true,
+  get: function () {
+    return _BlurV.default;
+  }
+});
+Object.defineProperty(exports, "BlurV1D", {
+  enumerable: true,
+  get: function () {
+    return _BlurV1D.default;
+  }
+});
+Object.defineProperty(exports, "directionForPassDefault", {
+  enumerable: true,
+  get: function () {
+    return _directionForPassDefault.default;
+  }
+});
+var _Blur = _interopRequireDefault(require("./Blur"));
+var _Blur1D = _interopRequireDefault(require("./Blur1D"));
+var _BlurV = _interopRequireDefault(require("./BlurV"));
+var _BlurV1D = _interopRequireDefault(require("./BlurV1D"));
+var _directionForPassDefault = _interopRequireDefault(require("./directionForPassDefault"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Blur","Blur1D","BlurV","BlurV1D"],"mappings":";;;;;;;AAAA;;;;AACA;;;;AACA;;;;AACA;;;;;;QACSA,I,GAAAA,c;QAAMC,M,GAAAA,gB;QAAQC,K,GAAAA,e;QAAOC,O,GAAAA,iB","file":"index.js","sourcesContent":["import Blur from \"./Blur\";\nimport Blur1D from \"./Blur1D\";\nimport BlurV from \"./BlurV\";\nimport BlurV1D from \"./BlurV1D\";\nexport { Blur, Blur1D, BlurV, BlurV1D };\n"]}
+{"version":3,"file":"index.js","names":["_Blur","_interopRequireDefault","require","_Blur1D","_BlurV","_BlurV1D","_directionForPassDefault","e","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["import Blur from \"./Blur\";\nimport Blur1D from \"./Blur1D\";\nimport BlurV from \"./BlurV\";\nimport BlurV1D from \"./BlurV1D\";\nimport directionForPassDefault from \"./directionForPassDefault\";\n\nexport { Blur, Blur1D, BlurV, BlurV1D, directionForPassDefault };\nexport type { BlurProps } from \"./Blur\";\nexport type { Blur1DProps } from \"./Blur1D\";\nexport type { BlurVProps } from \"./BlurV\";\nexport type { BlurV1DProps } from \"./BlurV1D\";\nexport type { DirectionForPass } from \"./directionForPassDefault\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,wBAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAgE,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/package.json

@@ -1,40 +1,37 @@
 {
   "name": "gl-react-blur",
-  "version": "2.0.1",
-  "description": "Universal gl-react multi-pass gaussian Blur effect with configurable intensity",
-  "main": "lib/index.js",
-  "scripts": {
-    "compile": "rm -rf lib/ && babel --presets es2015,stage-1,react --source-maps -d lib src",
-    "prepublish": "npm run compile"
-  },
-  "dependencies": {
-    "prop-types": "^15.6.0"
-  },
-  "peerDependencies": {
-    "gl-react": "~2.2.0"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.4.5",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-1": "^6.3.13"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/gre/gl-react-blur.git"
-  },
+  "version": "6.0.0",
+  "license": "MIT",
+  "author": "Gaëtan Renaudeau <renaudeau.gaetan@gmail.com>",
+  "description": "Universal gl-react multi-pass gaussian Blur effect with configurable intensity, also supporting variable blur with a map",
   "keywords": [
     "gl-react",
     "blur",
+    "gaussian",
+    "effect",
     "gl",
+    "opengl",
     "react",
-    "gauss",
-    "gaussian"
+    "react-component"
   ],
-  "author": "Gaëtan Renaudeau",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/gre/gl-react-blur/issues"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gre/gl-react",
+    "directory": "packages/gl-react-blur"
   },
-  "homepage": "https://github.com/gre/gl-react-blur#readme"
-}
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "gl-react": "*",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "gl-react": "^6.0.0"
+  }
+}

package/src/Blur.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { connectSize } from "gl-react";
+import Blur1D from "./Blur1D";
+import directionForPassDefault, {
+  DirectionForPass,
+} from "./directionForPassDefault";
+
+export type BlurProps = {
+  /** the content to blur: any gl-react texture input */
+  children: any;
+  /** blur intensity, in pixels */
+  factor: number;
+  /** number of Blur1D passes to run (default 2: horizontal + vertical) */
+  passes?: number;
+  /** direction vector of a given pass; defaults to cycling H, V and diagonals */
+  directionForPass?: DirectionForPass;
+  width?: number;
+  height?: number;
+};
+
+// Recursively nests Blur1D passes for multi-directional gaussian blur
+const Blur = connectSize(
+  ({
+    children,
+    factor,
+    passes = 2,
+    directionForPass = directionForPassDefault,
+  }: any) => {
+    const rec = (pass: number): any =>
+      pass <= 0 ? (
+        children
+      ) : (
+        <Blur1D direction={directionForPass(pass, factor, passes)}>
+          {rec(pass - 1)}
+        </Blur1D>
+      );
+    return rec(passes);
+  }
+) as unknown as React.ComponentType<BlurProps>;
+
+export default Blur;

package/src/{Blur1D.js → Blur1D.tsx}

@@ -1,15 +1,14 @@
-import { Shaders, Uniform, Node } from "gl-react";
 import React from "react";
-import PropTypes from "prop-types";
+import { Shaders, Node, GLSL, connectSize } from "gl-react";
 
 const shaders = Shaders.create({
   blur1D: {
     // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur
-    frag: `precision highp float;
+    frag: GLSL`
+precision highp float;
 varying vec2 uv;
 uniform sampler2D t;
 uniform vec2 direction, resolution;
-
 vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   vec4 color = vec4(0.0);
   vec2 off1 = vec2(1.3846153846) * direction;
@@ -21,30 +20,29 @@ vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
   return color;
 }
-
-void main () {
+void main() {
   gl_FragColor = blur9(t, uv, resolution, direction);
-}`
-  }
+}`,
+  },
 });
 
-const Blur1D = ({ width, height, pixelRatio, direction, children: t }) => (
-  <Node
-    shader={shaders.blur1D}
-    width={width}
-    height={height}
-    pixelRatio={pixelRatio}
-    uniforms={{
-      direction,
-      resolution: Uniform.Resolution,
-      t
-    }}
-  />
-);
-
-Blur1D.propTypes = {
-  direction: PropTypes.array.isRequired,
-  children: PropTypes.any.isRequired
+export type Blur1DProps = {
+  /** the content to blur: any gl-react texture input */
+  children: any;
+  /** blur direction & distance vector, in pixels */
+  direction: [number, number];
+  width?: number;
+  height?: number;
 };
 
+// connectSize injects width/height for correct texel offset calculation
+const Blur1D = connectSize(
+  ({ children: t, direction, width, height }: any) => (
+    <Node
+      shader={shaders.blur1D}
+      uniforms={{ t, resolution: [width, height], direction }}
+    />
+  )
+) as unknown as React.ComponentType<Blur1DProps>;
+
 export default Blur1D;

package/src/BlurV.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { connectSize } from "gl-react";
+import BlurV1D from "./BlurV1D";
+import directionForPassDefault, {
+  DirectionForPass,
+} from "./directionForPassDefault";
+
+export type BlurVProps = {
+  /** the content to blur: any gl-react texture input */
+  children: any;
+  /** blur intensity, in pixels */
+  factor: number;
+  /** a texture whose red/green channels scale the blur per-pixel */
+  map: any;
+  /** number of BlurV1D passes to run (default 2: horizontal + vertical) */
+  passes?: number;
+  /** direction vector of a given pass; defaults to cycling H, V and diagonals */
+  directionForPass?: DirectionForPass;
+  width?: number;
+  height?: number;
+};
+
+// Recursively nests BlurV1D passes for variable multi-directional blur
+const BlurV = connectSize(
+  ({
+    children,
+    factor,
+    map,
+    passes = 2,
+    directionForPass = directionForPassDefault,
+  }: any) => {
+    const rec = (pass: number): any =>
+      pass <= 0 ? (
+        children
+      ) : (
+        <BlurV1D map={map} direction={directionForPass(pass, factor, passes)}>
+          {rec(pass - 1)}
+        </BlurV1D>
+      );
+    return rec(passes);
+  }
+) as unknown as React.ComponentType<BlurVProps>;
+
+export default BlurV;

package/src/{BlurV1D.js → BlurV1D.tsx}

@@ -1,15 +1,14 @@
-import { Shaders, Uniform, Node } from "gl-react";
 import React from "react";
-import PropTypes from "prop-types";
+import { Shaders, Node, GLSL, connectSize } from "gl-react";
 
 const shaders = Shaders.create({
-  blur1D: {
+  blurV1D: {
     // blur9: from https://github.com/Jam3/glsl-fast-gaussian-blur
-    frag: `precision highp float;
+    frag: GLSL`
+precision highp float;
 varying vec2 uv;
 uniform sampler2D t, map;
 uniform vec2 direction, resolution;
-
 vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   vec4 color = vec4(0.0);
   vec2 off1 = vec2(1.3846153846) * direction;
@@ -21,39 +20,31 @@ vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
   return color;
 }
-
-void main () {
+void main() {
+  // Direction scaled by map value makes blur strength vary per-pixel
   gl_FragColor = blur9(t, uv, resolution, direction * texture2D(map, uv).rg);
-}`
-  }
+}`,
+  },
 });
 
-const BlurV1D = ({
-  width,
-  height,
-  map,
-  pixelRatio,
-  direction,
-  children: t
-}) => (
-  <Node
-    shader={shaders.blur1D}
-    width={width}
-    height={height}
-    pixelRatio={pixelRatio}
-    uniforms={{
-      direction,
-      resolution: Uniform.Resolution,
-      t,
-      map
-    }}
-  />
-);
-
-BlurV1D.propTypes = {
-  direction: PropTypes.array.isRequired,
-  children: PropTypes.any.isRequired,
-  map: PropTypes.any.isRequired
+export type BlurV1DProps = {
+  /** the content to blur: any gl-react texture input */
+  children: any;
+  /** blur direction & distance vector, in pixels */
+  direction: [number, number];
+  /** a texture whose red/green channels scale the blur per-pixel */
+  map: any;
+  width?: number;
+  height?: number;
 };
 
+const BlurV1D = connectSize(
+  ({ children: t, direction, map, width, height }: any) => (
+    <Node
+      shader={shaders.blurV1D}
+      uniforms={{ t, map, resolution: [width, height], direction }}
+    />
+  )
+) as unknown as React.ComponentType<BlurV1DProps>;
+
 export default BlurV1D;

package/src/directionForPassDefault.ts

@@ -0,0 +1,24 @@
+const NORM = Math.sqrt(2) / 2;
+
+export type DirectionForPass = (
+  pass: number,
+  factor: number,
+  total: number
+) => [number, number];
+
+// Cycles through horizontal, vertical and the 2 diagonals with increasing radius
+const directionForPassDefault: DirectionForPass = (p, factor, total) => {
+  const f = (factor * 2 * Math.ceil(p / 2)) / total;
+  switch ((p - 1) % 4) {
+    case 0:
+      return [f, 0];
+    case 1:
+      return [0, f];
+    case 2:
+      return [f * NORM, f * NORM];
+    default:
+      return [f * NORM, -f * NORM];
+  }
+};
+
+export default directionForPassDefault;

package/src/index.ts

@@ -0,0 +1,12 @@
+import Blur from "./Blur";
+import Blur1D from "./Blur1D";
+import BlurV from "./BlurV";
+import BlurV1D from "./BlurV1D";
+import directionForPassDefault from "./directionForPassDefault";
+
+export { Blur, Blur1D, BlurV, BlurV1D, directionForPassDefault };
+export type { BlurProps } from "./Blur";
+export type { Blur1DProps } from "./Blur1D";
+export type { BlurVProps } from "./BlurV";
+export type { BlurV1DProps } from "./BlurV1D";
+export type { DirectionForPass } from "./directionForPassDefault";

package/src/Blur.js

@@ -1,46 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Blur1D from "./Blur1D";
-import directionForPassDefault from "./directionForPassDefault";
-
-const Blur = ({
-  width,
-  height,
-  pixelRatio,
-  factor,
-  children,
-  passes,
-  directionForPass
-}) => {
-  const rec = pass =>
-    pass <= 0 ? (
-      children
-    ) : (
-      <Blur1D
-        width={width}
-        height={height}
-        pixelRatio={pixelRatio}
-        direction={directionForPass(pass, factor, passes)}
-      >
-        {rec(pass - 1)}
-      </Blur1D>
-    );
-  return rec(passes);
-};
-
-Blur.defaultProps = {
-  passes: 2,
-  directionForPass: directionForPassDefault
-};
-
-Blur.propTypes = {
-  factor: PropTypes.number.isRequired,
-  children: PropTypes.any.isRequired,
-  passes: PropTypes.number,
-  directionForPass: PropTypes.func,
-  width: PropTypes.any,
-  height: PropTypes.any,
-  pixelRatio: PropTypes.number
-};
-
-export default Blur;

package/src/BlurV.js

@@ -1,49 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import BlurV1D from "./BlurV1D";
-import directionForPassDefault from "./directionForPassDefault";
-
-const BlurV = ({
-  width,
-  height,
-  map,
-  pixelRatio,
-  factor,
-  children,
-  passes,
-  directionForPass
-}) => {
-  const rec = pass =>
-    pass <= 0 ? (
-      children
-    ) : (
-      <BlurV1D
-        width={width}
-        height={height}
-        map={map}
-        pixelRatio={pixelRatio}
-        direction={directionForPass(pass, factor, passes)}
-      >
-        {rec(pass - 1)}
-      </BlurV1D>
-    );
-  return rec(passes);
-};
-
-BlurV.defaultProps = {
-  passes: 2,
-  directionForPass: directionForPassDefault
-};
-
-BlurV.propTypes = {
-  factor: PropTypes.number.isRequired,
-  children: PropTypes.any.isRequired,
-  passes: PropTypes.number,
-  directionForPass: PropTypes.func,
-  map: PropTypes.any.isRequired,
-  width: PropTypes.any,
-  height: PropTypes.any,
-  pixelRatio: PropTypes.number
-};
-
-export default BlurV;

package/src/directionForPassDefault.js

@@ -1,15 +0,0 @@
-const NORM = Math.sqrt(2) / 2;
-
-export default (p, factor, total) => {
-  const f = factor * 2 * Math.ceil(p / 2) / total;
-  switch ((p - 1) % 4) { // alternate horizontal, vertical and 2 diagonals
-    case 0:
-      return [f, 0];
-    case 1:
-      return [0, f];
-    case 2:
-      return [f * NORM, f * NORM];
-    case 3:
-      return [f * NORM, -f * NORM];
-  }
-};

package/src/index.js

@@ -1,5 +0,0 @@
-import Blur from "./Blur";
-import Blur1D from "./Blur1D";
-import BlurV from "./BlurV";
-import BlurV1D from "./BlurV1D";
-export { Blur, Blur1D, BlurV, BlurV1D };