diff --git a/experiments/videos_superposition.html b/experiments/videos_superposition.html
new file mode 100644
index 0000000..f780bec
--- /dev/null
+++ b/experiments/videos_superposition.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vidéos d'archive</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: black;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Hydra -->
+    <script src="https://unpkg.com/hydra-synth"></script>
+
+    <script>
+      const hydra = new Hydra();
+
+      // Man Lab
+      s0.initVideo("../videos/video1.mp4");
+
+      // Lady Lab
+      s1.initVideo("../videos/video2.mp4");
+
+      src(s0).out(o0);
+      src(s1).out(o1);
+
+      src(s0)
+        .blend(src(s1).scale(0.5), 0.3)
+        .color(1, 0, 3)
+        //.modulateRotate(src(s0).kaleid(10), () => 0.1 + mouse.x * 0.002)
+        // .modulate(noise(3), 0.2)
+        //     .kaleid(20)
+        //     .scale(({time})=>Math.sin(time*1)*0.5+1)
+        //     .modulate(noise(0.6,0.5))
+        .out();
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
index efd4105..a1fc940 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,209 @@
 <!DOCTYPE html>
 <html lang="fr">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
-    <title>Hydra Local</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hydra Labs</title>
     <style>
-        html,
-        body {
-            margin: 0;
-            padding: 0;
-            background: black;
-            overflow: hidden;
-        }
-    </style>
-</head>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: black;
+        overflow: hidden;
+        font-family: "Courier New", monospace;
+        width: 100%;
+        height: 100%;
+      }
 
-<body>
+      canvas {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100% !important;
+        height: 100% !important;
+        z-index: 1;
+      }
+
+      #welcome {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 4rem;
+        font-weight: bold;
+        color: white;
+        z-index: 10;
+        text-transform: uppercase;
+        letter-spacing: 0.5rem;
+        animation: glitch 3s infinite;
+        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
+          0 0 20px rgba(0, 255, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.4);
+      }
+
+      @keyframes glitch {
+        0%,
+        100% {
+          transform: translate(-50%, -50%);
+          opacity: 1;
+        }
+        20% {
+          transform: translate(-49%, -50%);
+          text-shadow: 2px 0 red, -2px 0 cyan, 0 0 20px rgba(255, 255, 255, 0.8);
+        }
+        40% {
+          transform: translate(-51%, -50%);
+          opacity: 0.9;
+        }
+        60% {
+          transform: translate(-50%, -49%);
+          text-shadow: -2px 0 red, 2px 0 cyan, 0 0 30px rgba(0, 255, 255, 0.6);
+        }
+        80% {
+          transform: translate(-50%, -51%);
+          opacity: 1;
+        }
+      }
+
+      #subtitle {
+        position: absolute;
+        top: 60%;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 1.2rem;
+        color: rgba(255, 255, 255, 0.7);
+        z-index: 10;
+        letter-spacing: 0.3rem;
+        animation: fadeInOut 4s ease-in-out infinite;
+      }
+
+      #author {
+        position: absolute;
+        top: 65%;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 0.9rem;
+        color: rgba(255, 255, 255, 0.5);
+        z-index: 10;
+        letter-spacing: 0.2rem;
+        font-style: italic;
+      }
+
+      #experiments {
+        position: absolute;
+        top: 72%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 1.5rem 2rem;
+        border: 2px solid rgba(0, 255, 0, 0.5);
+        border-radius: 5px;
+        box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
+      }
+
+      #experiments h3 {
+        margin: 0 0 1rem 0;
+        color: #ffffff;
+        font-size: 1rem;
+        letter-spacing: 0.1rem;
+      }
+
+      #experiments h3::before {
+        content: "> ";
+        color: #00ff00;
+      }
+
+      .experiment-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .experiment-list li {
+        margin: 0.5rem 0;
+      }
+
+      .experiment-list a {
+        color: #00ffff;
+        text-decoration: none;
+        font-size: 0.95rem;
+        transition: all 0.3s ease;
+        display: inline-block;
+      }
+
+      .experiment-list a::before {
+        content: "$ ./";
+        color: #00ff00;
+        margin-right: 0.5rem;
+      }
+
+      .experiment-list a:hover {
+        color: #ffffff;
+        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
+        transform: translateX(5px);
+      }
+
+      .experiment-list a:hover::before {
+        content: "$ ./";
+        color: #ffffff;
+        animation: blink 0.8s infinite;
+      }
+
+      @keyframes blink {
+        0%,
+        50% {
+          opacity: 1;
+        }
+        51%,
+        100% {
+          opacity: 0.3;
+        }
+      }
+
+      @keyframes fadeInOut {
+        0%,
+        100% {
+          opacity: 0.5;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="welcome">Bienvenue</div>
+    <div id="subtitle">Hydra Labs</div>
+    <div id="author">by Nebulae Design</div>
+
+    <div id="experiments">
+      <h3>Expérimentations récentes</h3>
+      <ul class="experiment-list">
+        <li>
+          <a href="experiments/videos_superposition.html">Vidéos d'archives</a>
+        </li>
+        <li><a href="#">À venir..</a></li>
+        <li><a href="#">À venir..</a></li>
+        <li><a href="#">À venir...</a></li>
+      </ul>
+    </div>
 
     <!-- Hydra -->
     <script src="https://unpkg.com/hydra-synth"></script>
 
-    <!-- Ton code -->
+    <!-- Animation Hydra -->
     <script>
-        const hydra = new Hydra()
+      const hydra = new Hydra({ detectAudio: false });
 
-        // White Man Lab
-        s0.initVideo("videos/video1.mp4")
-
-        // White Woman Lab
-        s1.initVideo("videos/video2.mp4")
-
-        src(s0).out(o0)
-        src(s1).out(o1)
-
-        src(s0)
-            .scale(0.4)
-            .scrollX(0.5)
-            .scrollY(0.3)
-            .blend(src(s1), 0.3)
-            .color(1, 0, 3)
-            .modulateRotate(src(s0).kaleid(10), () => 0.1 + mouse.x * 0.002)
-            // .modulate(noise(3), 0.2)
-            //     .kaleid(20)
-            //     .scale(({time})=>Math.sin(time*1)*0.5+1)
-            //     .modulate(noise(0.6,0.5))
-            .out()
+      // Animation de fond psychédélique
+      osc(10, 0.1, 1.5)
+        .kaleid(5)
+        .color(1.5, 0.5, 1.5)
+        .rotate(0.5, 0.1)
+        .modulateScale(osc(8).rotate(1.5, 0.5), 0.5)
+        .blend(osc(20, 0.01, 2).kaleid(50))
+        .out();
     </script>
-
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
