Feature: Improved mirror fade effect

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;