feat: add VFXProps.overlay (#78)

Author: fand

packages/vfx-js/src/types.ts

@@ -85,6 +85,20 @@ export type VFXProps = {
      */
     uniforms?: VFXUniforms;
 
+    /**
+     * The opacity for the original HTML element.
+     *
+     * 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.
+     */
+    overlay?: true | number;
+
     /**
      * Allow shader outputs to oveflow the original element area.
      * If true, REACT-VFX will render the shader in fullscreen.

packages/vfx-js/src/vfx-player.ts

@@ -217,8 +217,14 @@ export class VFXPlayer {
         texture.needsUpdate = true;
 
         // Hide original element
-        const opacity = type === "video" ? "0.0001" : "0"; // don't hide video element completely to prevent jank frames
-        element.style.setProperty("opacity", opacity);
+        if (opts.overlay === true) {
+            /* Overlay mode. Do not hide the element */
+        } else if (typeof opts.overlay === "number") {
+            element.style.setProperty("opacity", opts.overlay.toString());
+        } else {
+            const opacity = type === "video" ? "0.0001" : "0"; // don't hide video element completely to prevent jank frames
+            element.style.setProperty("opacity", opacity.toString());
+        }
 
         const uniforms: { [name: string]: THREE.IUniform } = {
             src: { value: texture },