Update app.py

app.py

@@ -743,6 +743,18 @@ font-family: var(--terminal-font) !important;
   text-shadow: 0 0 4px rgba(0,255,65,0.35);
 }
 
+/* Binary rain canvas (background layer) */
+#pb-binary {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;              /* stars: 0, binary: 1, ui: 2+ */
+  pointer-events: none;
+  opacity: 0.55;           /* istersen 0.35-0.7 arası */
+  mix-blend-mode: screen;  /* neon daha iyi durur */
+}
+
 </style>
 """
 
@@ -754,6 +766,84 @@ with gr.Blocks(title="PrettyBird – Behavioral Consciousness Engine (BCE)") as
     <div id="stars2"></div>
     <div id="stars3"></div>
     """)
+    gr.HTML("""
+<canvas id="pb-binary"></canvas>
+
+<script>
+(() => {
+  const canvas = document.getElementById("pb-binary");
+  if (!canvas) return;
+
+  const ctx = canvas.getContext("2d", { alpha: true });
+
+  const COLORS = ["#118188", "#233cad"]; // camgöbeği + codeblue
+  const PHRASE = "CICIKUŞ  PROMETECH  DAVRANIŞSAL  BİLİNÇ  MOTORU";
+
+  let w, h, cols, drops, fontSize;
+
+  function resize() {
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+    w = Math.floor(window.innerWidth);
+    h = Math.floor(window.innerHeight);
+
+    canvas.style.width = w + "px";
+    canvas.style.height = h + "px";
+    canvas.width = Math.floor(w * dpr);
+    canvas.height = Math.floor(h * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    fontSize = Math.max(14, Math.min(20, Math.floor(w / 80))); // responsive
+    cols = Math.floor(w / fontSize);
+    drops = new Array(cols).fill(0).map(() => Math.random() * h);
+  }
+
+  // random: 0/1 ve araya nadiren phrase’ten karakter
+  function pickChar() {
+    if (Math.random() < 0.06) {
+      return PHRASE[Math.floor(Math.random() * PHRASE.length)];
+    }
+    return Math.random() < 0.5 ? "0" : "1";
+  }
+
+  function draw() {
+    // fade (iz bırakma)
+    ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
+    ctx.fillRect(0, 0, w, h);
+
+    ctx.font = fontSize + "px VT323, monospace";
+
+    for (let i = 0; i < cols; i++) {
+      const x = i * fontSize;
+      const y = drops[i];
+
+      const ch = pickChar();
+      const c = COLORS[(i + Math.floor(y / fontSize)) % COLORS.length];
+
+      // glow
+      ctx.shadowColor = c;
+      ctx.shadowBlur = 10;
+
+      ctx.fillStyle = c;
+      ctx.fillText(ch, x, y);
+
+      // hız (orta): 0.9–1.4 arası
+      drops[i] += fontSize * (0.9 + Math.random() * 0.5);
+
+      // reset
+      if (drops[i] > h + 50 && Math.random() > 0.985) {
+        drops[i] = -Math.random() * 300;
+      }
+    }
+
+    requestAnimationFrame(draw);
+  }
+
+  resize();
+  window.addEventListener("resize", resize, { passive: true });
+  draw();
+})();
+</script>
+""")
 
     gr.Markdown(HEADER_MD)