From 40952b348abeac17b44d1b2e09c4979c3273745b Mon Sep 17 00:00:00 2001
From: Dejvino <scoutmaster@dejvino.cz>
Date: Thu, 20 Nov 2025 10:34:47 +0100
Subject: [PATCH] Feature: Improved mirror fade effect

---
 magic-mirror/index.html                    |   2 +-
 magic-mirror/src/core/video-player.js      |   2 +-
 magic-mirror/src/scene/crystal-ball.js     | 167 --------------
 magic-mirror/src/scene/magic-mirror.js     |  49 ++--
 magic-mirror/src/scene/tv-set.js           | 250 ---------------------
 magic-mirror/src/shaders/screen-shaders.js |  60 +++--
 6 files changed, 67 insertions(+), 463 deletions(-)
 delete mode 100644 magic-mirror/src/scene/crystal-ball.js
 delete mode 100644 magic-mirror/src/scene/tv-set.js
diff --git a/magic-mirror/index.html b/magic-mirror/index.html
index 6738582..d8a2682 100644
--- a/magic-mirror/index.html
+++ b/magic-mirror/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Magical Crystal Ball</title>
+    <title>Magical Mirror</title>
     
     <style>
         /* Cheerful medieval aesthetic */
diff --git a/magic-mirror/src/core/video-player.js b/magic-mirror/src/core/video-player.js
index b37e984..f2fcff0 100644
--- a/magic-mirror/src/core/video-player.js
+++ b/magic-mirror/src/core/video-player.js
@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
-import { turnTvScreenOff, turnTvScreenOn, setScreenEffect } from '../scene/tv-set.js';
+import { turnTvScreenOff, turnTvScreenOn } from '../scene/magic-mirror.js';
 
 // --- Play video by index ---
 export function playVideoByIndex(index) {
diff --git a/magic-mirror/src/scene/crystal-ball.js b/magic-mirror/src/scene/crystal-ball.js
deleted file mode 100644
index 2420a3f..0000000
--- a/magic-mirror/src/scene/crystal-ball.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import * as THREE from 'three';
-import { state } from '../state.js';
-import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
-
-export function createCrystalBall(x, z, rotY) {
-    // --- Materials ---
-    const woodMaterial = new THREE.MeshPhongMaterial({ color: 0x5c4033, shininess: 30 });
-    const standMaterial = new THREE.MeshPhongMaterial({ color: 0x3d2d1d, shininess: 50, specular: 0x444444 });
-
-    const ballGroup = new THREE.Group();
-
-    // --- 1. Small Pedestal Table ---
-    const tableHeight = 0.7;
-    const tableWidth = 1.0;
-    const tableDepth = 1.0;
-    const legThickness = 0.08;
-
-    // Table Top
-    const topGeometry = new THREE.BoxGeometry(tableWidth, 0.05, tableDepth);
-    const tableTop = new THREE.Mesh(topGeometry, woodMaterial);
-    tableTop.position.y = tableHeight;
-    tableTop.castShadow = true;
-    tableTop.receiveShadow = true;
-    ballGroup.add(tableTop);
-
-    // Legs
-    const legHeight = tableHeight;
-    const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
-    const legOffset = (tableWidth / 2) - (legThickness * 1.5);
-    const depthOffset = (tableDepth / 2) - (legThickness * 1.5);
-
-    const createLeg = (lx, lz) => {
-        const leg = new THREE.Mesh(legGeometry, woodMaterial);
-        leg.position.set(lx, legHeight / 2, lz);
-        leg.castShadow = true;
-        leg.receiveShadow = true;
-        return leg;
-    };
-
-    ballGroup.add(createLeg(-legOffset, depthOffset));
-    ballGroup.add(createLeg(legOffset, depthOffset));
-    ballGroup.add(createLeg(-legOffset, -depthOffset));
-    ballGroup.add(createLeg(legOffset, -depthOffset));
-
-    // --- 2. Crystal Ball Stand ---
-    const standBaseGeo = new THREE.CylinderGeometry(0.25, 0.35, 0.1, 16);
-    const standBase = new THREE.Mesh(standBaseGeo, standMaterial);
-    standBase.position.y = tableHeight + 0.05;
-    standBase.castShadow = true;
-    standBase.receiveShadow = true;
-    ballGroup.add(standBase);
-
-    const standNeckGeo = new THREE.CylinderGeometry(0.15, 0.20, 0.2, 12);
-    const standNeck = new THREE.Mesh(standNeckGeo, standMaterial);
-    standNeck.position.y = standBase.position.y + 0.15;
-    standNeck.castShadow = true;
-    standNeck.receiveShadow = true;
-    ballGroup.add(standNeck);
-
-    // --- 3. The Crystal Ball ---
-    const ballRadius = 0.35;
-    const ballGeometry = new THREE.SphereGeometry(ballRadius, 64, 32);
-    
-    // The 'tvScreen' from state will now be our crystal ball
-    state.tvScreen = new THREE.Mesh(ballGeometry, new THREE.MeshBasicMaterial({ color: 0x000000 }));
-    state.tvScreen.position.y = standNeck.position.y + 0.15 + ballRadius * 0.5;
-    setCrystalBallOffMaterial(); // Set its initial "off" state
-    ballGroup.add(state.tvScreen);
-
-    // --- 4. Light from the Crystal Ball ---
-    state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
-    state.screenLight.position.copy(state.tvScreen.position);
-    state.screenLight.position.y += 0.1; // Position light slightly above the center
-    state.screenLight.castShadow = true;
-    state.screenLight.shadow.mapSize.width = 1024;
-    state.screenLight.shadow.mapSize.height = 1024;
-    state.screenLight.shadow.camera.near = 0.2;
-    state.screenLight.shadow.camera.far = 5;
-    ballGroup.add(state.screenLight);
-
-    // Position and rotate the entire group
-    ballGroup.position.set(x, 0, z);
-    ballGroup.rotation.y = rotY;
-
-    state.scene.add(ballGroup);
-}
-
-function setCrystalBallOffMaterial() {
-    if (state.tvScreen.material) {
-        state.tvScreen.material.dispose();
-    }
-    // A slightly reflective, dark, magical-looking material for when it's off
-    state.tvScreen.material = new THREE.MeshPhongMaterial({
-        color: 0x100510,
-        shininess: 100,
-        specular: 0xeeeeff,
-        transparent: true,
-        opacity: 0.85
-    });
-    state.tvScreen.material.needsUpdate = true;
-}
-
-export function turnTvScreenOff() {
-    if (state.tvScreenPowered) {
-        state.tvScreenPowered = false;
-        setScreenEffect(2, () => {
-            setCrystalBallOffMaterial();
-            state.screenLight.intensity = 0.0;
-        }); // Trigger power down effect
-    }
-}
-
-export function turnTvScreenOn() {
-    if (state.tvScreen.material) {
-        state.tvScreen.material.dispose();
-    }
-    // Use the same shader material as the TV for video playback
-    state.tvScreen.material = new THREE.ShaderMaterial({
-        uniforms: {
-            videoTexture: { value: state.videoTexture },
-            u_effect_type: { value: 0.0 },
-            u_effect_strength: { value: 0.0 },
-        },
-        vertexShader: screenVertexShader,
-        fragmentShader: screenFragmentShader,
-        transparent: true,
-    });
-
-    state.tvScreen.material.needsUpdate = true;
-
-    if (!state.tvScreenPowered) {
-        state.tvScreenPowered = true;
-        setScreenEffect(1); // Trigger power on effect
-    }
-}
-
-export function setScreenEffect(effectType, onComplete) {
-    const material = state.tvScreen.material;
-    if (!material.uniforms) return;
-    
-    state.screenEffect.active = true;
-    state.screenEffect.type = effectType;
-    state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
-    state.screenEffect.onComplete = onComplete;
-}
-
-export function updateScreenEffect() {
-    if (!state.screenEffect.active) return;
-    const material = state.tvScreen.material;
-    if (!material.uniforms) return;
-
-    const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
-    const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
-    const easedProgress = state.screenEffect.easing(progress);
-
-    material.uniforms.u_effect_type.value = state.screenEffect.type;
-    material.uniforms.u_effect_strength.value = easedProgress;
-
-    if (progress >= 1.0) {
-        state.screenEffect.active = false;
-        material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0;
-        if (state.screenEffect.onComplete) {
-            state.screenEffect.onComplete();
-        }
-        material.uniforms.u_effect_type.value = 0.0;
-    }
-}
\ No newline at end of file
diff --git a/magic-mirror/src/scene/magic-mirror.js b/magic-mirror/src/scene/magic-mirror.js
index fa7d5db..c84a7e4 100644
--- a/magic-mirror/src/scene/magic-mirror.js
+++ b/magic-mirror/src/scene/magic-mirror.js
@@ -41,12 +41,27 @@ export function createMagicMirror(x, z, rotY) {
     const mirrorRadius = 0.8; // Adjusted radius for scaling
     const mirrorGeo = new THREE.CircleGeometry(mirrorRadius, 64);
     
-    // The 'tvScreen' from state will now be our mirror surface
-    state.tvScreen = new THREE.Mesh(mirrorGeo, new THREE.MeshBasicMaterial({ color: 0x000000 }));
-    state.tvScreen.position.y = 1.4; // Center height
-    state.tvScreen.position.z = 0.1; // Slightly forward in the frame
-    state.tvScreen.scale.set(1, 1.5, 1); // Scale Y to make it a tall ellipse
-    setMirrorOffMaterial(); // Set its initial "off" state
+    // --- 3a. The permanent reflective mirror surface ---
+    const mirrorBackMaterial = new THREE.MeshPhongMaterial({
+        color: 0x051020, // Dark blue tint
+        shininess: 100,
+        specular: 0xcccccc,
+        envMap: state.scene.background, // Reflect the room
+        reflectivity: 0.9 // Increased reflectivity
+    });
+    const mirrorBack = new THREE.Mesh(mirrorGeo, mirrorBackMaterial);
+    mirrorBack.position.y = 1.4; // Center height
+    mirrorBack.position.z = 0.1; // Slightly forward in the frame
+    mirrorBack.scale.set(1, 1.5, 1); // Scale Y to make it a tall ellipse
+    mirrorGroup.add(mirrorBack);
+
+    // --- 3b. The video surface that appears when playing ---
+    // This is what state.tvScreen will now refer to
+    state.tvScreen = new THREE.Mesh(mirrorGeo, new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }));
+    state.tvScreen.position.copy(mirrorBack.position);
+    state.tvScreen.position.z += 0.01; // Place it just in front of the reflective surface
+    state.tvScreen.scale.copy(mirrorBack.scale);
+    state.tvScreen.visible = false; // Start invisible
     mirrorGroup.add(state.tvScreen);
 
     // --- 4. Ornate Elliptical Mirror Frame (Torus) ---
@@ -68,7 +83,7 @@ export function createMagicMirror(x, z, rotY) {
     state.screenLight.shadow.mapSize.height = 1024;
     state.screenLight.shadow.camera.near = 0.2;
     state.screenLight.shadow.camera.far = 5;
-    mirrorGroup.add(state.screenLight);
+    //mirrorGroup.add(state.screenLight);
 
     // Position and rotate the entire group
     mirrorGroup.position.set(x, 0, z);
@@ -77,26 +92,11 @@ export function createMagicMirror(x, z, rotY) {
     state.scene.add(mirrorGroup);
 }
 
-function setMirrorOffMaterial() {
-    if (state.tvScreen.material) {
-        state.tvScreen.material.dispose();
-    }
-    // A reflective, dark material for when it's off
-    state.tvScreen.material = new THREE.MeshPhongMaterial({
-        color: 0x051020, // Dark blue tint
-        shininess: 100,
-        specular: 0xcccccc,
-        envMap: state.scene.background, // Reflect the room
-        reflectivity: 0.9 // Increased reflectivity
-    });
-    state.tvScreen.material.needsUpdate = true;
-}
-
 export function turnTvScreenOff() {
     if (state.tvScreenPowered) {
         state.tvScreenPowered = false;
         setScreenEffect(2, () => {
-            setMirrorOffMaterial();
+            state.tvScreen.visible = false; // Hide the video surface on completion
             state.screenLight.intensity = 0.0;
         }); // Trigger power down effect
     }
@@ -106,6 +106,9 @@ export function turnTvScreenOn() {
     if (state.tvScreen.material) {
         state.tvScreen.material.dispose();
     }
+
+    state.tvScreen.visible = true; // Make the video surface visible
+
     // Use the shader material for video playback
     state.tvScreen.material = new THREE.ShaderMaterial({
         uniforms: {
diff --git a/magic-mirror/src/scene/tv-set.js b/magic-mirror/src/scene/tv-set.js
deleted file mode 100644
index 5a945af..0000000
--- a/magic-mirror/src/scene/tv-set.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import * as THREE from 'three';
-import { state } from '../state.js';
-import { createVcr } from './vcr.js';
-import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
-
-export function createTvSet(x, z, rotY) {
-    // --- Materials (MeshPhongMaterial) ---
-    const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x4d4d4d, shininess: 30 });
-
-    const tvGroup = new THREE.Group();
-
-    // --- TV Table Dimensions & Material ---
-    const woodColor = 0x5a3e36; // Dark brown wood
-    const tableHeight = 0.7;    // Height from floor to top surface
-    const tableWidth = 2.0;
-    const tableDepth = 1.0;
-    const legThickness = 0.05;
-    const shelfThickness = 0.03;
-    // Use standard material for realistic shadowing
-    const material = new THREE.MeshStandardMaterial({ color: woodColor, roughness: 0.8, metalness: 0.1 });
-
-    // VCR gap dimensions calculation
-    const shelfGap = 0.2; // Height of the VCR opening
-    const shelfY = tableHeight - shelfGap - (shelfThickness / 2); // Y position of the bottom shelf
-
-
-    // 2. Table Top 
-    const topGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
-    const tableTop = new THREE.Mesh(topGeometry, material);
-    tableTop.position.set(0, tableHeight, 0);
-    tableTop.castShadow = true;
-    tableTop.receiveShadow = true;
-    tvGroup.add(tableTop);
-
-    // 3. VCR Shelf (Middle Shelf)
-    const shelfGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
-    const vcrShelf = new THREE.Mesh(shelfGeometry, material);
-    vcrShelf.position.set(0, shelfY, 0);
-    vcrShelf.castShadow = true; 
-    vcrShelf.receiveShadow = true;
-    tvGroup.add(vcrShelf);
-
-    // 4. Side Walls for VCR Compartment (NEW CODE)
-    const wallHeight = shelfGap; // Height is the gap itself
-    const wallThickness = shelfThickness; // Reuse the shelf thickness for the wall width/depth
-    const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, tableDepth);
-    
-    // Calculate the Y center position for the wall
-    const wallYCenter = tableHeight - (shelfThickness / 2) - (wallHeight / 2); 
-    
-    // Calculate the X position to be flush with the table sides
-    const wallXPosition = (tableWidth / 2) - (wallThickness / 2);
-
-    // Left Wall
-    const sideWallLeft = new THREE.Mesh(wallGeometry, material);
-    sideWallLeft.position.set(-wallXPosition, wallYCenter, 0);
-    sideWallLeft.castShadow = true;
-    sideWallLeft.receiveShadow = true;
-    tvGroup.add(sideWallLeft);
-
-    // Right Wall
-    const sideWallRight = new THREE.Mesh(wallGeometry, material);
-    sideWallRight.position.set(wallXPosition, wallYCenter, 0);
-    sideWallRight.castShadow = true;
-    sideWallRight.receiveShadow = true;
-    tvGroup.add(sideWallRight);
-
-    // 5. Legs
-    const legHeight = shelfY; // Legs go from the floor (y=0) to the shelf (y=shelfY)
-    const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
-    
-    // Utility function to create and position a leg
-    const createLeg = (x, z) => {
-        const leg = new THREE.Mesh(legGeometry, material);
-        // Position the leg so the center is at half its height
-        leg.position.set(x, legHeight / 2, z);
-        leg.castShadow = true;
-        leg.receiveShadow = true;
-        return leg;
-    };
-
-    // Calculate offsets for positioning the legs near the corners
-    const offset = (tableWidth / 2) - (legThickness * 2); 
-    const depthOffset = (tableDepth / 2) - (legThickness * 2);
-
-    // Front Left
-    tvGroup.add(createLeg(-offset, depthOffset)); 
-    // Front Right
-    tvGroup.add(createLeg(offset, depthOffset)); 
-    // Back Left
-    tvGroup.add(createLeg(-offset, -depthOffset)); 
-    // Back Right
-    tvGroup.add(createLeg(offset, -depthOffset)); 
-
-    // --- 2. The TV box ---
-    const cabinetGeometry = new THREE.BoxGeometry(1.9, 1.5, 1.0);
-    const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
-    cabinet.position.y = 1.51;
-    cabinet.castShadow = true; 
-    cabinet.receiveShadow = true;
-    tvGroup.add(cabinet);
-
-    // --- 3. Screen Frame ---
-    const frameGeometry = new THREE.BoxGeometry(1.7, 1.3, 0.1);
-    const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
-    const frame = new THREE.Mesh(frameGeometry, frameMaterial);
-    frame.position.set(0, 1.5, 0.68);
-    frame.castShadow = true;
-    frame.receiveShadow = true;
-    tvGroup.add(frame);
-
-    // --- 4. Curved Screen (CRT Effect) ---
-    const screenRadius = 3.0; // Radius for the subtle curve
-    const screenWidth = 1.6;
-    const screenHeight = 1.2;
-    const thetaLength = screenWidth / screenRadius; // Calculate angle needed for the arc
-
-    // Use CylinderGeometry as a segment
-    const screenGeometry = new THREE.CylinderGeometry(
-        screenRadius, screenRadius, 
-        screenHeight, // Cylinder height is the vertical dimension of the screen
-        32, 
-        1, 
-        true, 
-        (Math.PI / 2) - (thetaLength / 2), // Start angle to center the arc
-        thetaLength                        // Arc length (width)
-    ); 
-
-    // Rotate the cylinder segment:
-    // 1. Rotate around X-axis by 90 degrees to lay the height (Y) along Z (depth).
-    //screenGeometry.rotateX(Math.PI / 2); 
-    // 2. Rotate around Y-axis by 90 degrees to align the segment's arc across the X-axis (width).
-    screenGeometry.rotateY(-Math.PI/2);
-
-    const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
-    state.tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
-    
-    // Position the curved screen
-    state.tvScreen.position.set(0.0, 1.5, -2.1); 
-    setTvScreenOffMaterial();
-    tvGroup.add(state.tvScreen);
-
-    tvGroup.position.set(x, 0, z);
-    tvGroup.rotation.y = rotY;
-
-    // Light from the screen (initially low intensity, will increase when video loads)
-    state.screenLight = new THREE.PointLight(0xffffff, 0, 10); 
-    state.screenLight.position.set(0, 1.5, 1.0); 
-    // Screen light casts shadows
-    state.screenLight.castShadow = true;
-    state.screenLight.shadow.mapSize.width = 1024;
-    state.screenLight.shadow.mapSize.height = 1024;
-    state.screenLight.shadow.camera.near = 0.2;
-    state.screenLight.shadow.camera.far = 5;
-    tvGroup.add(state.screenLight);
-
-    // -- VCR --
-    const vcr = createVcr();
-    vcr.position.set(-0.3, 0.6, 0.05);
-    tvGroup.add(vcr);
-
-    state.scene.add(tvGroup);
-}
-
-function setTvScreenOffMaterial() {
-    if (state.tvScreen.material) {
-        state.tvScreen.material.dispose();
-    }
-    state.tvScreen.material = new THREE.MeshPhongMaterial({
-        color: 0x203530,
-        shininess: 45,
-        specular: 0x111111,
-    });
-    state.tvScreen.material.needsUpdate = true;
-}
-
-export function turnTvScreenOff() {
-    if (state.tvScreenPowered) {
-        state.tvScreenPowered = false;
-        setScreenEffect(2, () => {
-            setTvScreenOffMaterial();
-            state.screenLight.intensity = 0.0;
-        }); // Trigger power down
-    }
-}
-
-export function turnTvScreenOn() {
-    if (state.tvScreen.material) {
-        state.tvScreen.material.dispose();
-    }
-    state.tvScreen.material = new THREE.ShaderMaterial({
-        uniforms: {
-            videoTexture: { value: state.videoTexture },
-            u_effect_type: { value: 0.0 },
-            u_effect_strength: { value: 0.0 },
-        },
-        vertexShader: screenVertexShader,
-        fragmentShader: screenFragmentShader,
-        transparent: true,
-    });
-
-    state.tvScreen.material.needsUpdate = true;
-
-    if (!state.tvScreenPowered) {
-        state.tvScreenPowered = true;
-        setScreenEffect(1); // Trigger warm-up
-    }
-}
-
-/**
- * Controls the warm-up and power-down effects on the TV screen.
- * @param {number} effectType - 0 normal, 1 for warm-up, 2 for power-down.
- * @param {function} onComplete - Optional callback when the animation finishes.
- */
-export function setScreenEffect(effectType, onComplete) {
-    const material = state.tvScreen.material;
-    if (!material.uniforms) return;
-    
-    state.screenEffect.active = true;
-    state.screenEffect.type = effectType;
-    state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
-    state.screenEffect.onComplete = onComplete;
-}
-
-/**
- * Updates the screen effect animation. Should be called in the main render loop.
- */
-export function updateScreenEffect() {
-    if (!state.screenEffect.active) return;
-
-    const material = state.tvScreen.material;
-    if (!material.uniforms) return;
-
-    const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
-    const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
-    
-    const easedProgress = state.screenEffect.easing(progress);
-
-    material.uniforms.u_effect_type.value = state.screenEffect.type;
-    material.uniforms.u_effect_strength.value = easedProgress;
-
-    if (progress >= 1.0) {
-        state.screenEffect.active = false;
-        material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0; // Final state
-        if (state.screenEffect.onComplete) {
-            state.screenEffect.onComplete();
-        }
-        material.uniforms.u_effect_type.value = 0.0; // Reset effect type
-    }
-}
\ No newline at end of file
diff --git a/magic-mirror/src/shaders/screen-shaders.js b/magic-mirror/src/shaders/screen-shaders.js
index 9dce4e8..8186b07 100644
--- a/magic-mirror/src/shaders/screen-shaders.js
+++ b/magic-mirror/src/shaders/screen-shaders.js
@@ -35,40 +35,58 @@ float noise (vec2 st) {
     return mix(a, b, u.x) +
             (c - a)* u.y * (1.0 - u.x) +
             (d - b) * u.x * u.y;
-}
+} 
 
 void main() {
     vec4 finalColor;
 
-    if (u_effect_type < 0.5) { // No effect
-        vec4 videoColor = texture2D(videoTexture, vUv);
+    // Shimmering edge effect - ALWAYS ON
+    vec4 videoColor = texture2D(videoTexture, vUv);
 
-        // Shimmering edge effect
-        float dist = distance(vUv, vec2(0.5));
-        float shimmer = noise(vUv * 20.0 + vec2(u_time * 2.0, 0.0));
-        float edgeFactor = smoothstep(0.3, 0.5, dist);
-        
-        vec3 shimmerColor = vec3(0.7, 0.8, 1.0) * shimmer * edgeFactor * 0.5;
+    // Shimmering edge effect
+    float dist = distance(vUv, vec2(0.5));
+    float shimmer = noise(vUv * 20.0 + vec2(u_time * 2.0, 0.0));
+    float edgeFactor = smoothstep(0.3, 0.5, dist);
+    
+    vec3 shimmerColor = vec3(0.7, 0.8, 1.0) * shimmer * edgeFactor * 0.5;
 
-        finalColor = vec4(videoColor.rgb + shimmerColor, videoColor.a);
+    vec4 baseColor = vec4(videoColor.rgb + shimmerColor, videoColor.a);
 
-    } else if (u_effect_type < 1.5) { // "Summon Vision" (Warm-up) effect
-        // Swirling mist clears to reveal the video
+    if (u_effect_type < 0.9) {
+        //  normal video
+        finalColor = baseColor;
+    } else if (u_effect_type < 1.9) { // "Summon Vision" (Warm-up) effect
+        // This is now a multi-stage effect controlled by u_effect_strength (0.0 -> 1.0)
         float noiseVal = noise(vUv * 10.0);
-        float revealFactor = smoothstep(0.0, 0.7, u_effect_strength);
-        float mist = smoothstep(revealFactor - 0.2, revealFactor, noiseVal);
-
+        vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
         vec4 videoColor = texture2D(videoTexture, vUv);
-        finalColor = mix(vec4(0.8, 0.7, 1.0, 1.0) * noiseVal, videoColor, mist);
+
+        // Stage 1: Fade in the mist (u_effect_strength: 0.0 -> 0.5)
+        // The overall opacity of the surface fades from 0 to 1.
+        float fadeInOpacity = smoothstep(0.0, 0.5, u_effect_strength);
+
+        // Stage 2: Fade out the mist to reveal the video (u_effect_strength: 0.5 -> 1.0)
+        // The mix factor between mist and video goes from 0 (all mist) to 1 (all video).
+        float revealMix = smoothstep(0.5, 1.0, u_effect_strength);
+
+        vec3 mixedColor = mix(mistColor, baseColor.rgb, revealMix);
+        finalColor = vec4(mixedColor, fadeInOpacity);
 
     } else { // "Vision Fades" (Power-down) effect
-        // Video dissolves into a magical fog
-        float noiseVal = noise(vUv * 10.0);
-        float dissolveFactor = smoothstep(0.3, 1.0, u_effect_strength);
-        float mist = smoothstep(dissolveFactor - 0.2, dissolveFactor, noiseVal);
+        // Multi-stage effect: Last frame -> fade to mist -> fade to transparent
 
+        float noiseVal = noise(vUv * 10.0);
+        vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
         vec4 videoColor = texture2D(videoTexture, vUv);
-        finalColor = mix(videoColor, vec4(0.8, 0.7, 1.0, 1.0) * noiseVal, mist);
+
+        // Stage 1: Fade in the mist over the last frame (u_effect_strength: 0.0 -> 0.5)
+        float mistMix = smoothstep(0.0, 0.5, u_effect_strength);
+        vec3 mixedColor = mix(baseColor.rgb, mistColor, mistMix);
+
+        // Stage 2: Fade out the entire surface to transparent (u_effect_strength: 0.5 -> 1.0)
+        float fadeOutOpacity = smoothstep(1.0, 0.5, u_effect_strength);
+
+        finalColor = vec4(mixedColor, fadeOutOpacity);
     }
 
     gl_FragColor = finalColor;
