Package Exports
- gl-react-blur
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gl-react-blur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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>