is a component library. It allows you to add powered effects to your application. You can easily add

glitched images,
stylized videos
and
shiny texts
to your website!!

Examples

Add effects to your images!!

âš¡Animated GIFs are also supported!!âš¡

Videos work well!

You can also add effects to
plain text!!!!!

... and make Transition Effects!




Install

npm i react-vfx

See GitHub for more info.

Usage

REACT-VFX consists of VFX Provider and VFX Elements.

First, wrap your entire app with <VFXProvider>.

import { VFXProvider } from 'react-vfx';

function App {
  return (
    <VFXProvider>
      {/* Place your app here */}
    </VFXProvider>
  );
}

Then you can use VFX Elements anywhere in you app. Use <VFXImg>, <VFXVideo> or <VFXSpan> instead of <img>, <video> or <span>.

VFX Elements have shader property. etc. All available shaders are listed here.

import { VFXImg } from 'react-vfx';

function Component {
  return (
    <VFXImg
      src="react-logo.png"
      shader="rainbow"/>
  );
}

Image

Use <VFXImg> instead of <img>.

import { VFXImg } from 'react-vfx';

<VFXImg src="react-logo.png" shader="rainbow"/>

// or add attributes
<VFXImg
  src="react-logo.png"
  alt="React Logo"
  shader="rainbow"/>

Video

Use <VFXVideo> instead of <video>.

import { VFXVideo } from 'react-vfx';

<VFXVideo src="mind_blown.mp4" shader="halftone"/>

Text

Use <VFXSpan> instead of <span>.

import { VFXSpan } from 'react-vfx';

<VFXSpan>Hello world!</VFXSpan>

<VFXSpan> automatically re-renders when its content is updated.

Try editing text!

NOTE: VFXSpan doesn't work with nested elements.

Custom Shaders

You can use your own shader in REACT-VFX.

import { VFXSpan } from 'react-vfx';

const blink = `
uniform vec2 resolution; // Resolution of the element
uniform vec2 offset;     // Position of the element in the screen
uniform float time;      // Time passed since mount
uniform sampler2D src;   // Input texture

void main() {
    // Get UV in the element
    vec2 uv = (gl_FragCoord.xy - offset) / resolution;

    gl_FragColor = texture2D(src, uv) * step(.5, fract(time));
}
`;

export default = () => (
    <VFXSpan shader={blink}>I'm blinking!</VFXSpan>
);

This renders like this:

I'm blinking!

Transition

REACT-VFX provides a uniform variable float enterTime; to write transition effects. 

import { VFXImg } from 'react-vfx';

const fadeIn = `
uniform vec2 resolution;
uniform vec2 offset;
uniform float time;
uniform float enterTime; // Time since entering the viewport
uniform sampler2D src;

void main() {
    vec2 uv = (gl_FragCoord.xy - offset) / resolution;
    gl_FragColor = texture2D(src, uv);

    // Fade alpha by enterTime
    gl_FragColor.a *= smoothstep(0.0, 3.0, enterTime);
}
`;

export default = () => (
    <VFXSpan shader={fadeIn}>I'm fading!</VFXSpan>
);

This renders like this:

I'm fading!

Made by AMAGI