Type Alias VFXProps

Type declaration

• Optionalshader?: ShaderPreset | string

  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.

• Optionalrelease?: number

  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.

• Optionaluniforms?: VFXUniforms

  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.

• Optionaloverlay?: true | number

  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.

• Optionalintersection?: {
      threshold?: number;
      rootMargin?: RectOpts;
  }

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

  • Optionalthreshold?: number

    Threshold for the element to be considered "entered" to the viewport.

  • OptionalrootMargin?: RectOpts

    Margin of the viewport to be used in intersection calculcation.

• Optionaloverflow?: true | RectOpts

  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).

• Optionalwrap?: VFXWrap | [VFXWrap, VFXWrap]

  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.

• OptionalzIndex?: number

  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.

• OptionalglslVersion?: "100" | "300 es"

  GLSL version of the given shader. (Default: "300 es")
  If you want to use GLSL 100 (≒ WebGL 1) shader, pass "100" to this property.