Type Alias VFXProps

Shader code or preset name.

You can pass the preset name listed in ShaderPreset,
then VFX-JS will use the corresponding shader preset.

You can also write the shader by yourself, and pass the shader code here.

The release time for the element. (Default: 0)

Basically, VFX-JS starts rendering the element when the element entered the viewport,
and it stops rendering after it got out of the viewport by scroll etc.

Setting release will let VFX-JS to continue rendering the element after it goes out the viewport for the given duration.
This is useful when the element has overflow and it has to be rendered after it left the viewport.

Uniform values to be passed to the shader.
uniforms should be a map of the uniform variable name and the value.

vfx.add(element, { shader, uniforms: {
  myParam1: 1,
  myParam2: [1.0, 2.0],
  myColor:  [0, 0, 1, 1], // blue
}});
Copy

Then these values are available inside GLSL shader.

uniform float myParam1;
uniform vec2 myParam2;
uniform vec4 myColor;
Copy

You can also use a function to return the value every frame.
This is useful to make a parameters that can change by time or user interactions.

vfx.add(element, { shader, uniforms: {
  scroll: () => window.scrollY,
}});
Copy

Supported uniform types are defined as VFXUniformValue.

The opacity for the original HTML element. (Default: false)

By default, VFX-JS hides the original element by setting its opacity to 0.
However, in some cases you might want not to hide the original element.
overlay allows you to specify the opacity to be set explicitly.

If you pass true, VFX-JS will preserve the original element's opacity.

You can also specify the opacity by passing a number.
For example, overlay: 0.5 will set the opacity of the orignal element to 0.5.

Options to control transition behaviour.
These properties work similarly to the IntersectionObsrever options.

Allow shader outputs to oveflow the original element area. (Default: 0)

If true, REACT-VFX will render the shader in fullscreen.
If number is specified, REACT-VFX adds paddings with the given value.

You can also specify the overflow size for each direction like CSS's padding property.
If you pass an array, it will be parsed as the top, right, bottom and left overflow.
For example, <VFXImg overflow={[0, 100, 200, 0]} /> will render the image with
100px right padding and 200px bottom padding.

If you pass an object like <VFXImg overflow={{ top: 100 }} />,
REACT-VFX will add paddings only to the given direction (only to the top in this example).

SHADER PATH ONLY. Ignored by the effect path — effects control
their dst rect via each effect's own outputRect return (use
dims.canvasRect to reach canvas edges). Setting both overflow
and effect emits a dev warning.

Texture wrapping mode. (Default: "repeat")

You can pass a single value to specify both horizontal and vertical wrapping at once,
or you can provide a tuple to spefify different modes for horizontal / vertical wrapping.

If not provided, VFX-JS will use "repeat" mode for both horizontal and vertical wrapping.

Z-index inside WebGL world. (Default: 0)

VFX-JS renders elements in ascending order by zIndex.
For example, when we have elements with zIndex: 1 and zIndex: -1, the second element is rendered first.
When elements have the same zIndex, they are rendered in the order they were added.

Whether the shader uses the backbuffer or not.

Whether the input texture should be cropped to the element bounds. (Default: true)
If true, The preset shaders will crop the input texture automatically.

Note: if you use custom shaders, you have to implement the cropping manually.
VFX-JS provides uniform bool autoCrop; to help this.

See GlslVersion.

Effect (or pipeline of effects) applied to this element.

Mutually exclusive with shader. When both are specified, effect
takes precedence and a dev warning is emitted.

A single Effect is normalized internally to a length-1 array. An empty
array emits a dev warning and copies the element capture directly to
the final target (identity chain).

Effect instances are stateful: do NOT reuse the same Effect object
across multiple elements. Use a factory that returns a new Effect
per call.