Here is the summary of the Background Transparency code you need for any engine.js file, and a prompt checklist for future use.

1. The 3 Background Code Blocks

A. The CSS (The “Wall” removal)

The Code:

html, body, #webgl-container { 
    background: transparent !important; 
}

• Why: Standard websites have a white or black “wall” (the body background). This line knocks that wall down so you can see the cms-bg-layer sitting behind the website.

B. The Renderer (The “Glass” canvas)

The Code:

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(0x000000, 0); 

• Why:
  • alpha: true: This turns the 3D canvas into a sheet of glass instead of a solid box.
  • setClearColor(..., 0): This makes the “clear space” in the 3D world 100% transparent.

C. The Scene (The “Sky” removal)

The Code:

scene.background = null;

• Why: Even if the canvas is glass, if you paint the “sky” (scene background) white, you won’t see through it. Setting it to null removes the paint.

---

2. Checklist for Future Implementation

If you get a new engine.js and want to add the background features, follow this prompt:

Step	Check (A)	Add/Change (B)
1	Look for style.innerHTML	Add background: transparent !important; to html, body.
2	Look for new THREE.WebGLRenderer	Add alpha: true inside the { }.
3	Under the renderer definition	Add renderer.setClearColor(0x000000, 0);
4	Look for scene.background = ...	Change the value to null.
5	Look for mousedown listeners	Add if (e.target.closest('#cms-bg-modal')) return; to prevent the 3D scene from moving while you use the background menu.

---

3. Quick “Genie” Note

To keep the Apple macOS Genie effect working in any new script, you must always include:

1. The function: getScreenXY(mesh) (This finds the pixels on the screen).
2. The GSAP animation: Inside the performRaycast (click) function, use gsap.fromTo to animate the scale from 0 to 1 using the coordinates from the function.