Skip to content
WebGL effects for React elements
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
fand Merge pull request #3 from vzvu3k6k/patch-1
Fix dimension error in shader sample in README
Latest commit b5ae3d5 Feb 12, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs perf: prevent dropping frames of video elements on Chrome Jan 27, 2020
docs_src perf: prevent dropping frames of video elements on Chrome Jan 27, 2020
src perf: prevent dropping frames of video elements on Chrome Jan 27, 2020
.eslintrc docs: Fix bg animation and styling Dec 25, 2019
.gitattributes Treat built files as binary Dec 14, 2019
.gitignore Ignore built files Dec 27, 2019
.prettierrc.js init Dec 12, 2019
README.md chore: fix dimension error in shader sample Feb 11, 2020
package-lock.json
package.json
tsconfig.json Support GIF animation using gifuct-js Dec 16, 2019

README.md

REACT-VFX

REACT-VFX: WebGL effects for React elements!!



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

LICENSE

MIT

You can’t perform that action at this time.