WebGL effects for React elements!!


npm i -S react-vfx


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 () => (
        {/* 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

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

// OK
<a href=""><VFXSpan>Yo</VFXSpan></a>

// NG: link styles are not rendered correctly
<VFXSpan><a href="">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