WebGL Effects For React Elements – react-vfx

react-vfx is a React component library that allows you to add WebGL powered effects (like glitched images, shiny text, stylized videos, etc) to your app.

Install & Import:

# NPM
$ npm i react-vfx --save

import * as VFX from 'react-vfx';

Basic Usage:

export default () => (
  <VFX.VFXProvider>
      {/* Render text as image, then apply the shader effect! */}
      <VFX.VFXSpan shader="rainbow">Hi there!</VFX.VFXSpan>
      {/* Render image with shader */}
      <VFX.VFXImg src="cat.png" alt="image" shader="rgbShift"/>
      {/* It also supports animated GIFs! */}
      <VFX.VFXImg src="doge.gif" shader="pixelate"/>
      {/* and videos! */}
      <VFX.VFXVideo src="mind_blown.mp4"
          autoplay playsinline loop muted
          shader="halftone"/>
  </VFX.VFXProvider>
);

Preview:

Download Details:

Author: fand

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/fand/react-vfx

License: MIT