JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q60586F
  • License MIT

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

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>