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