diff --git a/background-video/screenshot.png b/background-video/screenshot.png
new file mode 100644
index 0000000..be6a1bc
Binary files /dev/null and b/background-video/screenshot.png differ
diff --git a/v1-com-officielle/index.html b/v1-com-officielle/index.html
index 0b2deba..d4b4be8 100644
--- a/v1-com-officielle/index.html
+++ b/v1-com-officielle/index.html
@@ -13,8 +13,6 @@
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:type" content="website">
-    <!--GUI for background experiments haha-->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
   </head>
   <body>
     <!--TEST REFERENCE-->
@@ -29,379 +27,13 @@
       <strong>nerds</strong>
     </h1>
     <!--BACKGROUND CONTAINER-->
-    <canvas id="canvas"></canvas>
+    <div id="canvas">
+        <video autoplay muted loop src="./background.webm"></video>
+        <div class="overlay"></div>
+    </div>
     <!--VUE ROOT APP CONTAINER-->
     <div id="app"></div>
-    <!--SCRIPT BACKGROUND SHADER-->
-    <script id="vertexShader" type="x-shader/x-vertex">
-        attribute vec2 position;
-        void main() {
-            gl_Position = vec4(position, 0.0, 1.0);
-        }
-    </script>
-    <script id="fragmentShader" type="x-shader/x-fragment">
-        precision highp float;
-
-        uniform vec2 resolution;
-        uniform float time;
-        uniform float seed;
-
-        // GUI-controlled parameters
-        uniform float timeScale;
-        uniform float patternAmp;
-        uniform float patternFreq;
-        uniform float bloomStrength;
-        uniform float saturation;
-        uniform float grainAmount;
-        uniform vec3 colorTint;
-        uniform float minCircleSize;
-        uniform float circleStrength;
-        uniform float distortX;
-        uniform float distortY;
-
-        // Noise functions for 3D simplex noise
-        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-        vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-        vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
-        vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
-
-        // Random function that uses the seed
-        float rand(vec3 co) {
-            return fract(sin(dot(co.xyz + vec3(seed * 0.1), vec3(12.9898, 78.233, 53.539))) * 43758.5453);
-        }
-
-        // Pseudo-random function for noise generation
-        float random(vec2 st) {
-            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
-        }
-
-        // 3D Simplex noise implementation
-        float snoise3D(vec3 v) {
-          const vec2 C = vec2(1.0/6.0, 1.0/3.0);
-          const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
-
-          // First corner
-          vec3 i  = floor(v + dot(v, C.yyy));
-          vec3 x0 = v - i + dot(i, C.xxx);
-
-          // Other corners
-          vec3 g = step(x0.yzx, x0.xyz);
-          vec3 l = 1.0 - g;
-          vec3 i1 = min(g.xyz, l.zxy);
-          vec3 i2 = max(g.xyz, l.zxy);
-
-          vec3 x1 = x0 - i1 + C.xxx;
-          vec3 x2 = x0 - i2 + C.yyy;
-          vec3 x3 = x0 - D.yyy;
-
-          // Permutations
-          i = mod289(i);
-          vec4 p = permute(permute(permute(
-                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
-                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
-                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));
-
-          // Gradients: 7x7 points over a square, mapped onto an octahedron.
-          // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
-          float n_ = 0.142857142857; // 1.0/7.0
-          vec3 ns = n_ * D.wyz - D.xzx;
-
-          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
-
-          vec4 x_ = floor(j * ns.z);
-          vec4 y_ = floor(j - 7.0 * x_);
-
-          vec4 x = x_ *ns.x + ns.yyyy;
-          vec4 y = y_ *ns.x + ns.yyyy;
-          vec4 h = 1.0 - abs(x) - abs(y);
-
-          vec4 b0 = vec4(x.xy, y.xy);
-          vec4 b1 = vec4(x.zw, y.zw);
-
-          vec4 s0 = floor(b0)*2.0 + 1.0;
-          vec4 s1 = floor(b1)*2.0 + 1.0;
-          vec4 sh = -step(h, vec4(0.0));
-
-          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
-          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
-
-          vec3 p0 = vec3(a0.xy, h.x);
-          vec3 p1 = vec3(a0.zw, h.y);
-          vec3 p2 = vec3(a1.xy, h.z);
-          vec3 p3 = vec3(a1.zw, h.w);
-
-          // Normalise gradients
-          vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
-          p0 *= norm.x;
-          p1 *= norm.y;
-          p2 *= norm.z;
-          p3 *= norm.w;
-
-          // Mix final noise value
-          vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
-          m = m * m;
-          return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
-        }
-
-        // Modified fbm function to use 3D noise
-        float fbm3D(vec3 p) {
-            float sum = 0.0;
-            float amp = patternAmp;
-            float freq = patternFreq;
-
-            // Create seed-based offsets using prime multipliers
-            vec3 seedOffset = vec3(
-                sin(seed * 0.731) * cos(seed * 0.293) * 1.0,
-                cos(seed * 0.897) * sin(seed * 0.413) * 1.0,
-                sin(seed * 0.529) * cos(seed * 0.671) * 1.0
-            );
-
-            // Use octaves with better frequency scaling
-            for(int i = 0; i < 2; i++) {
-                // Create unique rotation for each octave to break grid patterns
-                float angle = seed * 0.1 + float(i) * 0.01;
-                mat2 rotation = mat2(
-                    cos(angle), -sin(angle),
-                    sin(angle), cos(angle)
-                );
-
-                // Rotate coordinates slightly for each octave
-                vec2 rotatedP = rotation * p.xy;
-                vec3 rotated3D = vec3(rotatedP, p.z);
-
-                // Use prime-number-based offsets to avoid repeating patterns
-                vec3 octaveOffset = seedOffset + vec3(
-                    sin(float(i) * 1.731 + seed * 0.47),
-                    cos(float(i) * 1.293 + seed * 0.83),
-                    sin(float(i) * 1.453 + seed * 0.61)
-                );
-
-                // Apply progressive domain warping for more organic results
-                vec3 warpedP = rotated3D + octaveOffset;
-                if (i > 0) {
-                    // Add slight domain warping based on previous octave
-                    warpedP += vec3(
-                        sin(sum * 2.14 + warpedP.y * 1.5),
-                        cos(sum * 1.71 + warpedP.x * 1.5),
-                        sin(sum * 1.93 + warpedP.z * 1.5)
-                    ) * 0.1 * float(i);
-                }
-
-                // Add contribution from this octave
-                sum += amp * snoise3D(warpedP * freq);
-
-                // Use better persistence values (slower amplitude reduction)
-                amp *= 0.8;
-
-                // Use better lacunarity values (more moderate frequency increase)
-                freq *= 0.8;
-            }
-
-            // Normalize and add slight contrast adjustment
-            return sum * 0.5 + 0.5;
-        }
-
-        void main() {
-            vec2 uv = gl_FragCoord.xy / resolution.xy;
-
-            // Adjust aspect ratio
-            uv.x *= resolution.x / resolution.y;
-
-            // Apply timeScale from GUI
-            float slowTime = time * timeScale;
-
-            // Create seed-influenced flow vectors for different pattern on each refresh
-            vec2 flow1 = vec2(
-                sin(slowTime * 0.25 + seed * 0.42) * 0.3 + sin(slowTime * 0.14 + seed * 0.23) * 0.2,
-                cos(slowTime * 0.22 + seed * 0.31) * 0.3 + cos(slowTime * 0.11 + seed * 0.17) * 0.2
-            );
-
-            vec2 flow2 = vec2(
-                sin(slowTime * 0.16 + 1.7 + seed * 0.13) * 0.4 + sin(slowTime * 0.18 + seed * 0.29) * 0.1,
-                cos(slowTime * 0.19 + 2.3 + seed * 0.19) * 0.4 + cos(slowTime * 0.11 + seed * 0.33) * 0.1
-            );
-
-            vec2 flow3 = vec2(
-                sin(slowTime * 0.13 + 3.4 + seed * 0.25) * 0.25 + sin(slowTime * 0.22 + seed * 0.11) * 0.15,
-                cos(slowTime * 0.18 + 1.2 + seed * 0.37) * 0.25 + cos(slowTime * 0.25 + seed * 0.27) * 0.15
-            );
-
-            float noiseScale1 = 10000.0;
-
-            // Main light layer with enhanced 3D liquid motion - using 3D noise
-            // The third component determines how the pattern changes over time
-            float timeComponent = slowTime * 5.5 + sin(seed * 0.63) * 0.2;
-            float lightPattern = fbm3D(vec3(uv * noiseScale1, timeComponent));
-
-            float combinedPattern = lightPattern * 0.25;
-
-            // Start with a seed-influenced base color
-            vec3 baseColor = vec3(
-                0.6 + sin(seed * 0.4) * 0.1,
-                0.9 + cos(seed * 0.3) * 0.05,
-                0.92 + sin(seed * 0.5) * 0.05
-            );
-
-            // Define pastel colors with slight seed-based variations
-            float colorSeed1 = sin(seed * 0.73) * 0.88;
-            float colorSeed2 = cos(seed * 0.51) * 0.28;
-            float colorSeed3 = sin(seed * 0.92) * 0.48;
-
-            vec3 pastelGreen = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.85 + colorSeed3);
-            vec3 pastelBlue = vec3(0.85 + colorSeed3, 0.9 + colorSeed1, 0.98 + colorSeed2);
-            vec3 pastelPink = vec3(0.98 + colorSeed2, 0.88 + colorSeed3, 0.92 + colorSeed1);
-            vec3 pastelYellow = vec3(0.98 + colorSeed3, 0.95 + colorSeed1, 0.85 + colorSeed2);
-            vec3 brightPink = vec3(0.98 + colorSeed1, 0.85 + colorSeed2, 0.92 + colorSeed3);
-            vec3 pastelLavender = vec3(0.92 + colorSeed2, 0.88 + colorSeed3, 0.98 + colorSeed1);
-            vec3 pastelPeach = vec3(0.98 + colorSeed3, 0.92 + colorSeed1, 0.87 + colorSeed2);
-            vec3 pastelTeal = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.95 + colorSeed3);
-            vec3 pastelCoral = vec3(0.98 + colorSeed2, 0.88 + colorSeed1, 0.85 + colorSeed3);
-            vec3 pastelMint = vec3(0.88 + colorSeed3, 0.98 + colorSeed2, 0.91 + colorSeed1);
-            vec3 pastelLilac = vec3(0.91 + colorSeed1, 0.85 + colorSeed3, 0.98 + colorSeed2);
-            vec3 pastelSkyBlue = vec3(0.85 + colorSeed2, 0.91 + colorSeed1, 0.98 + colorSeed3);
-
-            // Using larger color patches with 3D liquid-like noise and seed influence
-            float verticalFlow = sin(uv.y * 3.0 + slowTime * 0.2 + seed * 0.4) * 1.0;
-
-            // Creating more complex flow patterns for liquid movement
-            vec2 liquidFlow1 = flow1 + vec2(verticalFlow, sin(uv.x * 2.5 + slowTime * 0.10 + seed * 0.3) * 0.2);
-            vec2 liquidFlow2 = flow2 + vec2(cos(uv.y * 2.2 + slowTime * 0.05 + seed * 0.5) * 0.15, verticalFlow);
-            vec2 liquidFlow3 = flow3 + vec2(verticalFlow * 0.5, cos(uv.x * 1.8 - slowTime * 0.07 + seed * 0.7) * 0.25);
-
-            // Add seed-dependent scale factors for noise
-            float noiseSeedFactor1 = 0.15 * (1.0 + sin(seed * 0.3) * 0.3);
-            float noiseSeedFactor2 = 0.2 * (1.0 + cos(seed * 0.5) * 0.3);
-            float noiseSeedFactor3 = 0.12 * (1.0 + sin(seed * 0.7) * 0.3);
-
-            // Using 3D noise for color patterns with different time components for variety
-            float colorNoise1 = fbm3D(vec3(uv * noiseSeedFactor1 + liquidFlow1 * 0.03, slowTime * 0.02 + seed * 0.27));
-
-            // Adjust thresholds with seed influence for variety
-            float threshSeed1 = 0.0 + sin(seed * 0.4) * 0.15;
-            float threshSeed2 = 0.15 + cos(seed * 0.6) * 0.15;
-            float threshSeed3 = 0.25 + sin(seed * 0.8) * 0.15;
-
-            float colorMixValue1 = smoothstep(0.0, threshSeed1, colorNoise1);
-            float colorMixValue2 = smoothstep(0.0, threshSeed2, colorNoise1);
-            float colorMixValue3 = smoothstep(0.0, threshSeed3, colorNoise1);
-
-            // Start with base color and mix in expanded pastel palette
-            vec3 colorVariation = baseColor;
-
-            // Layer 1: Primary colors with seed-influenced mix factors
-            float mixFactor1 = 2.2 + sin(seed * 0.3) * 0.5;
-            float mixFactor2 = 2.0 + cos(seed * 0.5) * 0.5;
-            float mixFactor3 = 2.0 + sin(seed * 0.7) * 0.5;
-            float mixFactor4 = 2.0 + cos(seed * 0.9) * 0.5;
-
-            colorVariation = mix(colorVariation, pastelBlue, colorMixValue1 * mixFactor1);
-            colorVariation = mix(colorVariation, pastelPink, (1.0 - colorMixValue1) * colorMixValue2 * mixFactor2);
-            colorVariation = mix(colorVariation, pastelGreen, colorMixValue2 * (1.0 - colorMixValue1) * mixFactor3);
-            colorVariation = mix(colorVariation, pastelYellow, (1.0 - colorMixValue2) * colorMixValue1 * mixFactor4);
-
-            // Layer 2: New pastel colors with seed-influenced mix factors
-            float mixFactor5 = 1.8 + sin(seed * 1.1) * 0.4;
-            float mixFactor6 = 1.8 + cos(seed * 1.3) * 0.4;
-            float mixFactor7 = 1.7 + sin(seed * 1.5) * 0.4;
-            float mixFactor8 = 1.6 + cos(seed * 1.7) * 0.4;
-            float mixFactor9 = 1.5 + sin(seed * 1.9) * 0.4;
-
-            colorVariation = mix(colorVariation, brightPink, (colorMixValue1 * colorMixValue2) * mixFactor5);
-            colorVariation = mix(colorVariation, pastelLavender, (1.0 - colorMixValue3) * colorMixValue1 * mixFactor6);
-            colorVariation = mix(colorVariation, pastelPeach, colorMixValue3 * (1.0 - colorMixValue2) * mixFactor7);
-            colorVariation = mix(colorVariation, pastelTeal, (colorMixValue2 * colorMixValue3) * mixFactor8);
-            colorVariation = mix(colorVariation, pastelCoral, ((1.0 - colorMixValue1) * colorMixValue3) * mixFactor9);
-
-            // Layer 3: Additional colors with seed-influenced noise combinations
-            float seedOffset1 = sin(seed * 2.1) * 0.05;
-            float seedOffset2 = cos(seed * 2.3) * 0.05;
-
-            float mixValue4 = smoothstep(0.0, 1.0, float(uv * (0.18 + seedOffset1)));
-            float mixValue5 = mixValue4 - (sin(seed*0.6)*0.4);
-
-            float mixFactor10 = 1.7 + sin(seed * 2.5) * 0.4;
-            float mixFactor11 = 1.8 + cos(seed * 2.7) * 0.4;
-            float mixFactor12 = 1.5 + sin(seed * 2.9) * 0.4;
-
-            colorVariation = mix(colorVariation, pastelMint, mixValue4 * (1.0 - mixValue5) * mixFactor10);
-            colorVariation = mix(colorVariation, pastelLilac, (1.0 - mixValue4) * mixValue5 * mixFactor11);
-            colorVariation = mix(colorVariation, pastelSkyBlue, mixValue4 * mixValue5 * mixFactor12);
-
-            // Adjust pattern brightness with seed influence
-            float brightnessFactor = 1.0 + sin(seed * 0.5) * 2.1;
-            combinedPattern = pow(combinedPattern * 0.2 + 0.8, brightnessFactor);
-
-            // Create light spots with seed-influenced threshold
-            float lightThreshold = 1.0 + sin(seed * 0.6) * 0.8;
-            float lightSpots = smoothstep(0.0, lightThreshold, combinedPattern);
-
-            // Enhanced circular light patterns with seed-influenced distortion
-            float distortionAmount = 1.0 + cos(seed * 0.7) * 5.05;
-            float distortion = sin(slowTime * 0.1 + seed) * distortionAmount;
-
-            vec2 distortedUV = fract(uv * 1.0 + vec2(
-                sin(uv.y * 2.0 + slowTime * 0.15 + seed * 0.8) * distortY,
-                cos(uv.x * 1.8 + slowTime * 0.1 + seed * 0.9) * distortX
-            ));
-
-            // Adjust circular spots with seed influence
-            float circleSize = minCircleSize + sin(seed) * 1.3;
-            float circleThreshold = 0.0 + cos(seed * 1.3) * 2.05;
-            float circularSpots = smoothstep(0.0, circleThreshold, 1.0 - length((distortedUV - 0.5) * (circleSize + distortion)));
-
-            // Mix with liquid movement
-            float mixRatio = 0.0 + sin(seed * 1.5) * circleStrength;
-            lightSpots = mix(lightSpots, circularSpots * lightSpots, mixRatio);
-
-            // Apply liquid-like diffusion with seed influence and 3D noise
-            float diffusionScale = 0.0 + cos(seed * 1.7) * 5.0;
-            float diffusedLightSpots = fbm3D(vec3(
-                uv * diffusionScale + vec2(
-                    sin(slowTime * 0.03 + uv.x + seed * 1.9) * 0.2,
-                    cos(slowTime * 0.02 + uv.y + seed * 2.1) * 0.2
-                ),
-                slowTime * 0.05 + sin(seed * 0.76) * 0.5
-            )) * lightSpots;
-
-            // Mix diffusion with seed influence
-            //float diffusionMix = 0.7 + sin(seed * 2.3) * 0.1;
-            float diffusionMix = 1.0;
-            lightSpots = mix(lightSpots, diffusedLightSpots, diffusionMix);
-
-            // Final pattern mix
-            float patternMix = 1.0;
-            combinedPattern = mix(combinedPattern, lightSpots, patternMix);
-
-            float finalValue = combinedPattern;
-
-            // Use the color variation and apply color tint from GUI
-            vec3 color = finalValue * colorVariation * colorTint;
-
-            // Bloom with GUI-controlled bloomStrength
-            float bloomThreshold = 1.0;
-            float bloom = smoothstep(0.0, bloomThreshold, finalValue) * bloomStrength;
-            color += bloom;
-
-            // Grain with GUI-controlled grainAmount
-            vec2 noiseCoord = uv;
-            float noise = random(noiseCoord + time * 0.0015) * grainAmount;
-            color = color + vec3(noise);
-
-            // Saturation with GUI control
-            float luminance = dot(color, vec3(0.299, 0.587, 0.114));
-            vec3 saturatedColor = mix(vec3(luminance), color, saturation);
-            float satMix = 1.0;
-            color = mix(color, saturatedColor, satMix);
-
-            gl_FragColor = vec4(color, 1.0);
-        }
-    </script>
     <!--LINK SCRIPT VUE ROOT APP-->
     <script type="module" src="/src/main.js"></script>
   </body>
-  <!--LINK SCRIPT BACKGROUND-->
-  <script src="mp4-muxer-main/build/mp4-muxer.js"></script>
-  <script src="helperFunctions.js"></script>
-  <script src="canvasVideoExport.js"></script>
-  <script src="main.js"></script>
 </html>
diff --git a/v1-com-officielle/index.webgl.html b/v1-com-officielle/index.webgl.html
new file mode 100644
index 0000000..30a8bdc
--- /dev/null
+++ b/v1-com-officielle/index.webgl.html
@@ -0,0 +1,408 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DRAGS AND NERDS #2</title>
+    <link rel="icon" type="image/x-icon" href="./favicon.jpg">
+    <!--OPENGRAPH-->
+    <meta property="og:title" content="Drags and Nerds #2">
+    <meta property="og:description" content="Drag shows, musique électronique, synthés vidéos et autre performances nerds">
+    <meta property="og:url" content="https://drags-nerds.net/">
+    <meta property="og:image" content="https://drags-nerds.net/dnn-screen.png">
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:type" content="website">
+    <!--GUI for background experiments haha-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
+  </head>
+  <body>
+    <!--TEST REFERENCE-->
+    <h1 class="referenceText">
+      <strong>drags and nerds</strong>
+      <p>
+        Drag shows, musique électronique, synthés vidéos et autre performances nerds
+      </p>
+      <strong>drag</strong>
+      <strong>nerd</strong>
+      <strong>drags</strong>
+      <strong>nerds</strong>
+    </h1>
+    <!--BACKGROUND CONTAINER-->
+    <canvas id="canvas"></canvas>
+    <!--VUE ROOT APP CONTAINER-->
+    <div id="app"></div>
+    <!--SCRIPT BACKGROUND SHADER-->
+    <script id="vertexShader" type="x-shader/x-vertex">
+        attribute vec2 position;
+        void main() {
+            gl_Position = vec4(position, 0.0, 1.0);
+        }
+    </script>
+    <script id="fragmentShader" type="x-shader/x-fragment">
+        precision highp float;
+
+        uniform vec2 resolution;
+        uniform float time;
+        uniform float seed;
+
+        // GUI-controlled parameters
+        uniform float timeScale;
+        uniform float patternAmp;
+        uniform float patternFreq;
+        uniform float bloomStrength;
+        uniform float saturation;
+        uniform float grainAmount;
+        uniform vec3 colorTint;
+        uniform float minCircleSize;
+        uniform float circleStrength;
+        uniform float distortX;
+        uniform float distortY;
+
+        // Noise functions for 3D simplex noise
+        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+        vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+        vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+        vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+        // Random function that uses the seed
+        float rand(vec3 co) {
+            return fract(sin(dot(co.xyz + vec3(seed * 0.1), vec3(12.9898, 78.233, 53.539))) * 43758.5453);
+        }
+
+        // Pseudo-random function for noise generation
+        float random(vec2 st) {
+            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+        }
+
+        // 3D Simplex noise implementation
+        float snoise3D(vec3 v) {
+          const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+          const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+          // First corner
+          vec3 i  = floor(v + dot(v, C.yyy));
+          vec3 x0 = v - i + dot(i, C.xxx);
+
+          // Other corners
+          vec3 g = step(x0.yzx, x0.xyz);
+          vec3 l = 1.0 - g;
+          vec3 i1 = min(g.xyz, l.zxy);
+          vec3 i2 = max(g.xyz, l.zxy);
+
+          vec3 x1 = x0 - i1 + C.xxx;
+          vec3 x2 = x0 - i2 + C.yyy;
+          vec3 x3 = x0 - D.yyy;
+
+          // Permutations
+          i = mod289(i);
+          vec4 p = permute(permute(permute(
+                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
+                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+          // Gradients: 7x7 points over a square, mapped onto an octahedron.
+          // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+          float n_ = 0.142857142857; // 1.0/7.0
+          vec3 ns = n_ * D.wyz - D.xzx;
+
+          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+          vec4 x_ = floor(j * ns.z);
+          vec4 y_ = floor(j - 7.0 * x_);
+
+          vec4 x = x_ *ns.x + ns.yyyy;
+          vec4 y = y_ *ns.x + ns.yyyy;
+          vec4 h = 1.0 - abs(x) - abs(y);
+
+          vec4 b0 = vec4(x.xy, y.xy);
+          vec4 b1 = vec4(x.zw, y.zw);
+
+          vec4 s0 = floor(b0)*2.0 + 1.0;
+          vec4 s1 = floor(b1)*2.0 + 1.0;
+          vec4 sh = -step(h, vec4(0.0));
+
+          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
+          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
+
+          vec3 p0 = vec3(a0.xy, h.x);
+          vec3 p1 = vec3(a0.zw, h.y);
+          vec3 p2 = vec3(a1.xy, h.z);
+          vec3 p3 = vec3(a1.zw, h.w);
+
+          // Normalise gradients
+          vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+          p0 *= norm.x;
+          p1 *= norm.y;
+          p2 *= norm.z;
+          p3 *= norm.w;
+
+          // Mix final noise value
+          vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+          m = m * m;
+          return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+        }
+
+        // Modified fbm function to use 3D noise
+        float fbm3D(vec3 p) {
+            float sum = 0.0;
+            float amp = patternAmp;
+            float freq = patternFreq;
+
+            // Create seed-based offsets using prime multipliers
+            vec3 seedOffset = vec3(
+                sin(seed * 0.731) * cos(seed * 0.293) * 1.0,
+                cos(seed * 0.897) * sin(seed * 0.413) * 1.0,
+                sin(seed * 0.529) * cos(seed * 0.671) * 1.0
+            );
+
+            // Use octaves with better frequency scaling
+            for(int i = 0; i < 2; i++) {
+                // Create unique rotation for each octave to break grid patterns
+                float angle = seed * 0.1 + float(i) * 0.01;
+                mat2 rotation = mat2(
+                    cos(angle), -sin(angle),
+                    sin(angle), cos(angle)
+                );
+
+                // Rotate coordinates slightly for each octave
+                vec2 rotatedP = rotation * p.xy;
+                vec3 rotated3D = vec3(rotatedP, p.z);
+
+                // Use prime-number-based offsets to avoid repeating patterns
+                vec3 octaveOffset = seedOffset + vec3(
+                    sin(float(i) * 1.731 + seed * 0.47),
+                    cos(float(i) * 1.293 + seed * 0.83),
+                    sin(float(i) * 1.453 + seed * 0.61)
+                );
+
+                // Apply progressive domain warping for more organic results
+                vec3 warpedP = rotated3D + octaveOffset;
+                if (i > 0) {
+                    // Add slight domain warping based on previous octave
+                    warpedP += vec3(
+                        sin(sum * 2.14 + warpedP.y * 1.5),
+                        cos(sum * 1.71 + warpedP.x * 1.5),
+                        sin(sum * 1.93 + warpedP.z * 1.5)
+                    ) * 0.1 * float(i);
+                }
+
+                // Add contribution from this octave
+                sum += amp * snoise3D(warpedP * freq);
+
+                // Use better persistence values (slower amplitude reduction)
+                amp *= 0.8;
+
+                // Use better lacunarity values (more moderate frequency increase)
+                freq *= 0.8;
+            }
+
+            // Normalize and add slight contrast adjustment
+            return sum * 0.5 + 0.5;
+        }
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+
+            // Adjust aspect ratio
+            uv.x *= resolution.x / resolution.y;
+
+            // Apply timeScale from GUI
+            float slowTime = time * timeScale;
+
+            // Create seed-influenced flow vectors for different pattern on each refresh
+            vec2 flow1 = vec2(
+                sin(slowTime * 0.25 + seed * 0.42) * 0.3 + sin(slowTime * 0.14 + seed * 0.23) * 0.2,
+                cos(slowTime * 0.22 + seed * 0.31) * 0.3 + cos(slowTime * 0.11 + seed * 0.17) * 0.2
+            );
+
+            vec2 flow2 = vec2(
+                sin(slowTime * 0.16 + 1.7 + seed * 0.13) * 0.4 + sin(slowTime * 0.18 + seed * 0.29) * 0.1,
+                cos(slowTime * 0.19 + 2.3 + seed * 0.19) * 0.4 + cos(slowTime * 0.11 + seed * 0.33) * 0.1
+            );
+
+            vec2 flow3 = vec2(
+                sin(slowTime * 0.13 + 3.4 + seed * 0.25) * 0.25 + sin(slowTime * 0.22 + seed * 0.11) * 0.15,
+                cos(slowTime * 0.18 + 1.2 + seed * 0.37) * 0.25 + cos(slowTime * 0.25 + seed * 0.27) * 0.15
+            );
+
+            float noiseScale1 = 10000.0;
+
+            // Main light layer with enhanced 3D liquid motion - using 3D noise
+            // The third component determines how the pattern changes over time
+            float timeComponent = slowTime * 5.5 + sin(seed * 0.63) * 0.2;
+            float lightPattern = fbm3D(vec3(uv * noiseScale1, timeComponent));
+            //float lightPattern = 1.0;//fbm3D(vec3(uv * noiseScale1, timeComponent));
+
+            float combinedPattern = lightPattern * 0.25;
+
+            // Start with a seed-influenced base color
+            vec3 baseColor = vec3(
+                0.6 + sin(seed * 0.4) * 0.1,
+                0.9 + cos(seed * 0.3) * 0.05,
+                0.92 + sin(seed * 0.5) * 0.05
+            );
+
+            // Define pastel colors with slight seed-based variations
+            float colorSeed1 = sin(seed * 0.73) * 0.88;
+            float colorSeed2 = cos(seed * 0.51) * 0.28;
+            float colorSeed3 = sin(seed * 0.92) * 0.48;
+
+            vec3 pastelGreen = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.85 + colorSeed3);
+            vec3 pastelBlue = vec3(0.85 + colorSeed3, 0.9 + colorSeed1, 0.98 + colorSeed2);
+            vec3 pastelPink = vec3(0.98 + colorSeed2, 0.88 + colorSeed3, 0.92 + colorSeed1);
+            vec3 pastelYellow = vec3(0.98 + colorSeed3, 0.95 + colorSeed1, 0.85 + colorSeed2);
+            vec3 brightPink = vec3(0.98 + colorSeed1, 0.85 + colorSeed2, 0.92 + colorSeed3);
+            vec3 pastelLavender = vec3(0.92 + colorSeed2, 0.88 + colorSeed3, 0.98 + colorSeed1);
+            vec3 pastelPeach = vec3(0.98 + colorSeed3, 0.92 + colorSeed1, 0.87 + colorSeed2);
+            vec3 pastelTeal = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.95 + colorSeed3);
+            vec3 pastelCoral = vec3(0.98 + colorSeed2, 0.88 + colorSeed1, 0.85 + colorSeed3);
+            vec3 pastelMint = vec3(0.88 + colorSeed3, 0.98 + colorSeed2, 0.91 + colorSeed1);
+            vec3 pastelLilac = vec3(0.91 + colorSeed1, 0.85 + colorSeed3, 0.98 + colorSeed2);
+            vec3 pastelSkyBlue = vec3(0.85 + colorSeed2, 0.91 + colorSeed1, 0.98 + colorSeed3);
+
+            // Using larger color patches with 3D liquid-like noise and seed influence
+            float verticalFlow = sin(uv.y * 3.0 + slowTime * 0.2 + seed * 0.4) * 1.0;
+
+            // Creating more complex flow patterns for liquid movement
+            vec2 liquidFlow1 = flow1 + vec2(verticalFlow, sin(uv.x * 2.5 + slowTime * 0.10 + seed * 0.3) * 0.2);
+            vec2 liquidFlow2 = flow2 + vec2(cos(uv.y * 2.2 + slowTime * 0.05 + seed * 0.5) * 0.15, verticalFlow);
+            vec2 liquidFlow3 = flow3 + vec2(verticalFlow * 0.5, cos(uv.x * 1.8 - slowTime * 0.07 + seed * 0.7) * 0.25);
+
+            // Add seed-dependent scale factors for noise
+            float noiseSeedFactor1 = 0.15 * (1.0 + sin(seed * 0.3) * 0.3);
+            float noiseSeedFactor2 = 0.2 * (1.0 + cos(seed * 0.5) * 0.3);
+            float noiseSeedFactor3 = 0.12 * (1.0 + sin(seed * 0.7) * 0.3);
+
+            // Using 3D noise for color patterns with different time components for variety
+            float colorNoise1 = fbm3D(vec3(uv * noiseSeedFactor1 + liquidFlow1 * 0.03, slowTime * 0.02 + seed * 0.27));
+
+            // Adjust thresholds with seed influence for variety
+            float threshSeed1 = 0.0 + sin(seed * 0.4) * 0.15;
+            float threshSeed2 = 0.15 + cos(seed * 0.6) * 0.15;
+            float threshSeed3 = 0.25 + sin(seed * 0.8) * 0.15;
+
+            float colorMixValue1 = smoothstep(0.0, threshSeed1, colorNoise1);
+            float colorMixValue2 = smoothstep(0.0, threshSeed2, colorNoise1);
+            float colorMixValue3 = smoothstep(0.0, threshSeed3, colorNoise1);
+
+            // Start with base color and mix in expanded pastel palette
+            vec3 colorVariation = baseColor;
+
+            // Layer 1: Primary colors with seed-influenced mix factors
+            float mixFactor1 = 2.2 + sin(seed * 0.3) * 0.5;
+            float mixFactor2 = 2.0 + cos(seed * 0.5) * 0.5;
+            float mixFactor3 = 2.0 + sin(seed * 0.7) * 0.5;
+            float mixFactor4 = 2.0 + cos(seed * 0.9) * 0.5;
+
+            colorVariation = mix(colorVariation, pastelBlue, colorMixValue1 * mixFactor1);
+            colorVariation = mix(colorVariation, pastelPink, (1.0 - colorMixValue1) * colorMixValue2 * mixFactor2);
+            colorVariation = mix(colorVariation, pastelGreen, colorMixValue2 * (1.0 - colorMixValue1) * mixFactor3);
+            colorVariation = mix(colorVariation, pastelYellow, (1.0 - colorMixValue2) * colorMixValue1 * mixFactor4);
+
+            // Layer 2: New pastel colors with seed-influenced mix factors
+            float mixFactor5 = 1.8 + sin(seed * 1.1) * 0.4;
+            float mixFactor6 = 1.8 + cos(seed * 1.3) * 0.4;
+            float mixFactor7 = 1.7 + sin(seed * 1.5) * 0.4;
+            float mixFactor8 = 1.6 + cos(seed * 1.7) * 0.4;
+            float mixFactor9 = 1.5 + sin(seed * 1.9) * 0.4;
+
+            colorVariation = mix(colorVariation, brightPink, (colorMixValue1 * colorMixValue2) * mixFactor5);
+            colorVariation = mix(colorVariation, pastelLavender, (1.0 - colorMixValue3) * colorMixValue1 * mixFactor6);
+            colorVariation = mix(colorVariation, pastelPeach, colorMixValue3 * (1.0 - colorMixValue2) * mixFactor7);
+            colorVariation = mix(colorVariation, pastelTeal, (colorMixValue2 * colorMixValue3) * mixFactor8);
+            colorVariation = mix(colorVariation, pastelCoral, ((1.0 - colorMixValue1) * colorMixValue3) * mixFactor9);
+
+            // Layer 3: Additional colors with seed-influenced noise combinations
+            float seedOffset1 = sin(seed * 2.1) * 0.05;
+            float seedOffset2 = cos(seed * 2.3) * 0.05;
+
+            float mixValue4 = smoothstep(0.0, 1.0, float(uv * (0.18 + seedOffset1)));
+            float mixValue5 = mixValue4 - (sin(seed*0.6)*0.4);
+
+            float mixFactor10 = 1.7 + sin(seed * 2.5) * 0.4;
+            float mixFactor11 = 1.8 + cos(seed * 2.7) * 0.4;
+            float mixFactor12 = 1.5 + sin(seed * 2.9) * 0.4;
+
+            colorVariation = mix(colorVariation, pastelMint, mixValue4 * (1.0 - mixValue5) * mixFactor10);
+            colorVariation = mix(colorVariation, pastelLilac, (1.0 - mixValue4) * mixValue5 * mixFactor11);
+            colorVariation = mix(colorVariation, pastelSkyBlue, mixValue4 * mixValue5 * mixFactor12);
+
+            // Adjust pattern brightness with seed influence
+            float brightnessFactor = 1.0 + sin(seed * 0.5) * 2.1;
+            combinedPattern = pow(combinedPattern * 0.2 + 0.8, brightnessFactor);
+
+            // Create light spots with seed-influenced threshold
+            float lightThreshold = 1.0 + sin(seed * 0.6) * 0.8;
+            float lightSpots = smoothstep(0.0, lightThreshold, combinedPattern);
+
+            // Enhanced circular light patterns with seed-influenced distortion
+            float distortionAmount = 1.0 + cos(seed * 0.7) * 5.05;
+            float distortion = sin(slowTime * 0.1 + seed) * distortionAmount;
+
+            vec2 distortedUV = fract(uv * 1.0 + vec2(
+                sin(uv.y * 2.0 + slowTime * 0.15 + seed * 0.8) * distortY,
+                cos(uv.x * 1.8 + slowTime * 0.1 + seed * 0.9) * distortX
+            ));
+
+            // Adjust circular spots with seed influence
+            float circleSize = minCircleSize + sin(seed) * 1.3;
+            float circleThreshold = 0.0 + cos(seed * 1.3) * 2.05;
+            float circularSpots = smoothstep(0.0, circleThreshold, 1.0 - length((distortedUV - 0.5) * (circleSize + distortion)));
+
+            // Mix with liquid movement
+            float mixRatio = 0.0 + sin(seed * 1.5) * circleStrength;
+            lightSpots = mix(lightSpots, circularSpots * lightSpots, mixRatio);
+
+            // Apply liquid-like diffusion with seed influence and 3D noise
+            float diffusionScale = 0.0 + cos(seed * 1.7) * 5.0;
+            float diffusedLightSpots = fbm3D(vec3(
+                uv * diffusionScale + vec2(
+                    sin(slowTime * 0.03 + uv.x + seed * 1.9) * 0.2,
+                    cos(slowTime * 0.02 + uv.y + seed * 2.1) * 0.2
+                ),
+                slowTime * 0.05 + sin(seed * 0.76) * 0.5
+            )) * lightSpots;
+
+            // Mix diffusion with seed influence
+            //float diffusionMix = 0.7 + sin(seed * 2.3) * 0.1;
+            float diffusionMix = 1.0;
+            lightSpots = mix(lightSpots, diffusedLightSpots, diffusionMix);
+
+            // Final pattern mix
+            float patternMix = 1.0;
+            combinedPattern = mix(combinedPattern, lightSpots, patternMix);
+
+            float finalValue = combinedPattern;
+
+            // Use the color variation and apply color tint from GUI
+            vec3 color = finalValue * colorVariation * colorTint;
+
+            // Bloom with GUI-controlled bloomStrength
+            float bloomThreshold = 1.0;
+            float bloom = smoothstep(0.0, bloomThreshold, finalValue) * bloomStrength;
+            color += bloom;
+
+            // Grain with GUI-controlled grainAmount
+            vec2 noiseCoord = uv;
+            float noise =  random(noiseCoord + time * 0.0015) * grainAmount;
+            color = color + vec3(noise);
+
+            // Saturation with GUI control
+            float luminance = dot(color, vec3(0.299, 0.587, 0.114));
+            vec3 saturatedColor = mix(vec3(luminance), color, saturation);
+            float satMix = 1.0;
+            color = mix(color, saturatedColor, satMix);
+
+            gl_FragColor = vec4(color, 1.0);
+        }
+    </script>
+    <!--LINK SCRIPT VUE ROOT APP-->
+    <script type="module" src="/src/main.js"></script>
+  </body>
+  <!--LINK SCRIPT BACKGROUND-->
+  <script src="mp4-muxer-main/build/mp4-muxer.js"></script>
+  <script src="helperFunctions.js"></script>
+  <script src="canvasVideoExport.js"></script>
+  <script src="main.js"></script>
+</html>
diff --git a/v1-com-officielle/public/background-noise.png b/v1-com-officielle/public/background-noise.png
new file mode 100644
index 0000000..aed4755
Binary files /dev/null and b/v1-com-officielle/public/background-noise.png differ
diff --git a/v1-com-officielle/public/background.webm b/v1-com-officielle/public/background.webm
new file mode 100644
index 0000000..e0c24ae
Binary files /dev/null and b/v1-com-officielle/public/background.webm differ
diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css
index 9624b4f..204fb9d 100644
--- a/v1-com-officielle/src/assets/style.css
+++ b/v1-com-officielle/src/assets/style.css
@@ -118,7 +118,7 @@ html, body{
   scrollbar-width: thin;
 }
 
-canvas {
+#canvas {
     display: block;
     max-width: 100%;
     position: fixed;
@@ -126,7 +126,25 @@ canvas {
     padding: 0;
     /* margin-top: 0vh; */
     text-align: center;
-    /* height: 100vh; */
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+#canvas video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+#canvas .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: multiply;
+  background: url("./background-noise.png");
 }
 
 
