Install

npm i react-vfx

Usage

REACT-VFX exports VFXImg, VFXVideo, VFXSpan and VFXDiv. These components works just like <img>, <video>, <span> and <div> - 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 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"/>

        {/* Render text as image, then apply the shader effect! */}
        <VFX.VFXSpan shader="rainbow">Hi there!</VFX.VFXSpan>

        {/* Or even inputs! */}
        <VFX.VFXDiv shader="rainbow">
            <input type="text" value="hello" />
        </VFX.VFXDiv>
    </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

LICENSE

MIT