Description:
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:
