Universal gl-react multi-pass gaussian Blur effect with configurable intensity
JavaScript
Clone or download
Latest commit 8568eac May 12, 2018
Permalink
Failed to load latest commit information.
src bugfix: GL was not defined May 3, 2018
.gitignore init Dec 5, 2015
.npmignore init Dec 5, 2015
README.md
package.json

README.md

gl-react-blur

Universal gl-react multi-pass gaussian Blur effect with configurable intensity.

{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

var Blur = require("gl-react-blur").Blur;
// or
import { Blur } from "gl-react-blur";

Small blur on an image

<Blur factor={0.5} passes={2}>
  http://i.imgur.com/zJIxPEo.jpg
</Blur>

Medium blur on a video

<Blur factor={2} passes={4}>
  <video ... />
</Blur>

Powerful blur on another stack of effects

<Blur factor={20} passes={6}>
  <EffectA>
    <EffectB>
      ...
    </EffectB>
  </EffectA>
</Blur>

Variable Blur

<BlurV factor={3} passes={6} map="http://i.imgur.com/SzbbUvX.png">
  ...
</BlurV>