WebGL effects for React elements

by React

REACT-VFX

WebGL effects for React elements!!

View Demo View Github

Install

npm i -S react-vfx

Usage

REACT-VFX exports VFXSpan, VFXImg and VFXVideo.
These components works just like <span>, <img> and <video> - accepts all properties they have, but they are rendered in WebGL world with shader effects!

import * as VFX from 'react-vfx';

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>
);

NOTE: VFXSpan doesn't work if the content includes child nodes.

// OK
<a href="https://example.com"><VFXSpan>Yo</VFXSpan></a>

// NG: link styles are not rendered correctly
<VFXSpan><a href="https://example.com">Yo</a></VFXSpan>

Custom Shader

import { VFXSpan } from 'react-vfx';

const blink = `
uniform vec2 resolution;
uniform vec2 offset;
uniform float time;
uniform sampler2D src;

void main() {
    vec2 uv = (gl_FragCoord.xy - offset) / resolution;
    gl_FragColor = texture2D(src, uv) * step(.5, fract(time));
}
`;

export default = () => (
    <VFXSpan shader={blink}></VFXSpan>
);

Future work

  • Passing custom uniforms
  • Passing custom textures

Author

AMAGI

GitHub