feat: unify code-like components with shared CodeWindow, fix blog re-render loop, and stabilize layouts

2026-02-15 17:34:07 +01:00
parent 7c774f65bc
commit c1295546a6
32 changed files with 3293 additions and 1235 deletions
--- a/apps/web/src/components/Button.tsx
+++ b/apps/web/src/components/Button.tsx
@@ -1,67 +1,166 @@
-import * as React from 'react';
-import { ArrowRight } from 'lucide-react';
-import { motion } from 'framer-motion';
-import Link from 'next/link';
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";

 interface ButtonProps {
  href: string;
  children: React.ReactNode;
-  variant?: 'primary' | 'outline';
+  variant?: "primary" | "outline" | "ghost";
+  size?: "normal" | "large";
  className?: string;
  showArrow?: boolean;
 }

+/**
+ * Premium Button: Pill-shaped, binary-accent hover effect, unified design.
+ *
+ * On hover:
+ * - A stream of binary characters scrolls across the button background
+ * - Primary: white binary on dark bg
+ * - Outline: blue binary on transparent bg
+ * - Subtle, fast, and satisfying
+ */
 export const Button: React.FC<ButtonProps> = ({
  href,
  children,
-  variant = 'primary',
+  variant = "primary",
+  size = "normal",
  className = "",
-  showArrow = true
+  showArrow = true,
 }) => {
-  const baseStyles = "inline-flex items-center gap-4 rounded-full font-bold uppercase tracking-widest transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group";
-  
-  const variants = {
-    primary: "px-10 py-5 bg-slate-900 text-white hover:bg-slate-800 hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 text-sm",
-    outline: "px-8 py-4 border border-slate-200 bg-white text-slate-900 hover:border-slate-400 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 text-sm"
-  };
+  const [hovered, setHovered] = React.useState(false);
+  const [displayText, setDisplayText] = React.useState<string | null>(null);
+  const contentRef = React.useRef<HTMLSpanElement>(null);

-  const content = (
-    <>
-      {children}
-      {showArrow && <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />}
-    </>
+  // Binary scramble on hover
+  React.useEffect(() => {
+    if (!hovered) {
+      setDisplayText(null);
+      return;
+    }
+    const original = contentRef.current?.textContent || "";
+    if (!original) return;
+    const chars = original.split("");
+    const total = 20;
+    let frame = 0;
+    const iv = setInterval(() => {
+      frame++;
+      const s = chars.map((c, i) => {
+        if (c === " ") return " ";
+        const settle = (frame / total) * chars.length;
+        if (i < settle) return c;
+        return Math.random() > 0.5 ? "1" : "0";
+      });
+      setDisplayText(s.join(""));
+      if (frame >= total) {
+        setDisplayText(null);
+        clearInterval(iv);
+      }
+    }, 1000 / 60);
+    return () => clearInterval(iv);
+  }, [hovered]);
+
+  const [binaryStr, setBinaryStr] = React.useState(
+    "0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1",
  );

-  if (href.startsWith('#')) {
+  React.useEffect(() => {
+    setBinaryStr(
+      Array.from({ length: 60 }, () => (Math.random() > 0.5 ? "0" : "1")).join(
+        " ",
+      ),
+    );
+  }, []);
+
+  const base =
+    "relative inline-flex items-center justify-center gap-3 overflow-hidden rounded-full font-bold uppercase tracking-[0.15em] transition-all duration-300 group cursor-pointer";
+
+  const sizes: Record<string, string> = {
+    normal: "px-8 py-4 text-[10px]",
+    large: "px-10 py-5 text-[11px]",
+  };
+
+  const variants: Record<string, string> = {
+    primary:
+      "bg-slate-900 text-white hover:shadow-xl hover:shadow-slate-900/20 hover:-translate-y-0.5",
+    outline:
+      "border border-slate-200 bg-transparent text-slate-900 hover:border-slate-400 hover:-translate-y-0.5",
+    ghost: "bg-transparent text-slate-500 hover:text-slate-900",
+  };
+
+  // Binary stream overlay colors by variant
+  const binaryColor =
+    variant === "primary"
+      ? "rgba(255,255,255,0.06)"
+      : variant === "outline"
+        ? "rgba(59,130,246,0.08)"
+        : "rgba(148,163,184,0.06)";
+
+  const inner = (
+    <motion.span
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}
+    >
+      {/* Binary stream hover overlay */}
+      <span
+        className="absolute inset-0 flex items-center pointer-events-none overflow-hidden"
+        style={{ opacity: hovered ? 1 : 0, transition: "opacity 0.3s ease" }}
+      >
+        <motion.span
+          className="whitespace-nowrap font-mono text-[8px] tracking-[0.3em] select-none"
+          style={{ color: binaryColor }}
+          animate={hovered ? { x: [0, -200] } : { x: 0 }}
+          transition={
+            hovered ? { duration: 3, repeat: Infinity, ease: "linear" } : {}
+          }
+        >
+          {binaryStr}&nbsp;{binaryStr}
+        </motion.span>
+      </span>
+
+      {/* Shimmer line on hover (top edge) */}
+      <span
+        className="absolute top-0 left-0 right-0 h-px pointer-events-none"
+        style={{
+          opacity: hovered ? 1 : 0,
+          transition: "opacity 0.5s ease",
+          background:
+            variant === "primary"
+              ? "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)"
+              : "linear-gradient(90deg, transparent, rgba(59,130,246,0.15), transparent)",
+        }}
+      />
+
+      {/* Content */}
+      <span
+        className="relative z-10 flex items-center gap-3"
+        style={{ fontVariantNumeric: "tabular-nums" }}
+      >
+        <span ref={contentRef}>{displayText ?? children}</span>
+        {showArrow && (
+          <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform duration-300" />
+        )}
+      </span>
+    </motion.span>
+  );
+
+  if (href.startsWith("#")) {
    return (
-      <a href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
-        {content}
+      <a
+        href={href}
+        onClick={(e) => {
+          e.preventDefault();
+          document.querySelector(href)?.scrollIntoView({ behavior: "smooth" });
+        }}
+      >
+        {inner}
      </a>
    );
  }

-  return (
-    <Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
-      {content}
-    </Link>
-  );
-};
-
-export const MotionButton: React.FC<ButtonProps> = ({
-  href,
-  children,
-  variant = 'primary',
-  className = "",
-  showArrow = true
-}) => {
-  return (
-    <motion.div
-      whileHover={{ scale: 1.02 }}
-      whileTap={{ scale: 0.98 }}
-    >
-      <Button href={href} variant={variant} className={className} showArrow={showArrow}>
-        {children}
-      </Button>
-    </motion.div>
-  );
+  return <Link href={href}>{inner}</Link>;
 };
--- a/apps/web/src/components/Effects/AbstractCircuit.tsx
+++ b/apps/web/src/components/Effects/AbstractCircuit.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * AbstractCircuit: Premium Canvas Binary Data Flow
+ *
+ * - Binary 0/1 characters flow in structured horizontal lanes
+ * - Vertical cross-traffic for depth
+ * - Characters "breathe" with sine-wave opacity
+ * - High performance: uses requestAnimationFrame, minimal allocations per frame
+ */
+
+interface Char {
+  x: number;
+  y: number;
+  val: number; // 0 or 1
+  speed: number; // px per frame
+  vertical: boolean;
+  size: number;
+  baseAlpha: number;
+  phase: number; // sine-wave phase offset
+  flipIn: number; // frames until next flip
+}
+
+export const AbstractCircuit: React.FC<{
+  invert?: boolean;
+  className?: string;
+}> = ({ invert = false, className = "" }) => {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const stateRef = React.useRef({
+    chars: [] as Char[],
+    frame: 0,
+    dpr: 1,
+    w: 0,
+    h: 0,
+  });
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d", { alpha: true })!;
+    const s = stateRef.current;
+    let raf = 0;
+
+    // ── Sizing ──
+    const resize = () => {
+      s.dpr = Math.min(window.devicePixelRatio || 1, 2);
+      s.w = canvas.offsetWidth;
+      s.h = canvas.offsetHeight;
+      canvas.width = s.w * s.dpr;
+      canvas.height = s.h * s.dpr;
+      seed();
+    };
+
+    // ── Seed characters ──
+    const LANE = 28;
+    const GAP = 20;
+
+    const seed = () => {
+      const chars: Char[] = [];
+      const { w, h } = s;
+
+      // Horizontal lanes
+      for (let y = 0; y < h; y += LANE) {
+        const dir = Math.floor(y / LANE) % 3 === 0 ? -1 : 1;
+        const spd = (0.15 + Math.random() * 0.6) * dir;
+        for (let x = 0; x < w + GAP; x += GAP) {
+          if (Math.random() > 0.45) continue;
+          chars.push({
+            x: x + (Math.random() - 0.5) * 6,
+            y: y + LANE / 2 + (Math.random() - 0.5) * 4,
+            val: Math.random() > 0.5 ? 1 : 0,
+            speed: spd,
+            vertical: false,
+            size: 9 + Math.floor(Math.random() * 2),
+            baseAlpha: 0.035 + Math.random() * 0.045,
+            phase: Math.random() * Math.PI * 2,
+            flipIn: 120 + Math.floor(Math.random() * 400),
+          });
+        }
+      }
+
+      // Vertical lanes (sparser)
+      for (let x = 0; x < w; x += LANE * 2.5) {
+        const dir = Math.floor(x / LANE) % 2 === 0 ? 1 : -1;
+        const spd = (0.1 + Math.random() * 0.4) * dir;
+        for (let y = 0; y < h + GAP; y += GAP) {
+          if (Math.random() > 0.3) continue;
+          chars.push({
+            x: x + (Math.random() - 0.5) * 4,
+            y: y + (Math.random() - 0.5) * 6,
+            val: Math.random() > 0.5 ? 1 : 0,
+            speed: spd,
+            vertical: true,
+            size: 8 + Math.floor(Math.random() * 2),
+            baseAlpha: 0.025 + Math.random() * 0.035,
+            phase: Math.random() * Math.PI * 2,
+            flipIn: 150 + Math.floor(Math.random() * 500),
+          });
+        }
+      }
+      s.chars = chars;
+    };
+
+    // ── Mouse tracking — use canvas-relative coordinates ──
+
+    // ── Render loop ──
+    const render = () => {
+      const { w, h, dpr, chars } = s;
+      s.frame++;
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+
+      const t = s.frame * 0.02; // global time
+
+      // ── Draw characters ──
+      for (let i = 0, len = chars.length; i < len; i++) {
+        const c = chars[i];
+
+        // Move
+        if (c.vertical) {
+          c.y += c.speed;
+          if (c.y > h + 15) c.y = -15;
+          else if (c.y < -15) c.y = h + 15;
+        } else {
+          c.x += c.speed;
+          if (c.x > w + 15) c.x = -15;
+          else if (c.x < -15) c.x = w + 15;
+        }
+
+        // Flip timer
+        if (--c.flipIn <= 0) {
+          c.val ^= 1;
+          c.flipIn = 120 + Math.floor(Math.random() * 400);
+        }
+
+        // Sine-wave "breathing"
+        const breath = Math.sin(t + c.phase) * 0.015;
+
+        let alpha = c.baseAlpha + breath;
+
+        // ── Draw ──
+        const sz = c.size;
+        ctx.font = `bold ${sz}px "SF Mono", "Fira Code", "Cascadia Code", "Menlo", monospace`;
+
+        ctx.fillStyle = invert
+          ? `rgba(255,255,255,${Math.max(alpha, 0)})`
+          : `rgba(100,116,139,${Math.max(alpha, 0)})`;
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+
+        ctx.fillText(c.val ? "1" : "0", c.x, c.y);
+      }
+
+      raf = requestAnimationFrame(render);
+    };
+
+    // ── Event listeners ──
+    // Listen on the PARENT element (the section) to capture all mouse movement
+    window.addEventListener("resize", resize);
+
+    resize();
+    raf = requestAnimationFrame(render);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", resize);
+    };
+  }, [invert]);
+
+  return (
+    <div
+      className={`absolute inset-0 overflow-hidden ${className}`}
+      aria-hidden="true"
+    >
+      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
+    </div>
+  );
+};
--- a/apps/web/src/components/Effects/BinaryStream.tsx
+++ b/apps/web/src/components/Effects/BinaryStream.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+
+interface BinaryStreamProps {
+  className?: string;
+  columns?: number;
+  side?: "left" | "right" | "both";
+}
+
+export const BinaryStream: React.FC<BinaryStreamProps> = ({
+  className = "",
+  columns = 4,
+  side = "both",
+}) => {
+  // Generate deterministic binary strings
+  const generateColumn = (seed: number) => {
+    const chars: string[] = [];
+    for (let i = 0; i < 60; i++) {
+      chars.push(((seed * 137 + i * 31) % 2).toString());
+    }
+    return chars.join(" ");
+  };
+
+  const renderColumns = (position: "left" | "right") => (
+    <div
+      className={`absolute top-0 ${position === "left" ? "left-0" : "right-0"} flex gap-3 pointer-events-none select-none overflow-hidden`}
+      style={{ height: "100%", width: `${columns * 16}px` }}
+    >
+      {Array.from({ length: columns }).map((_, i) => {
+        const offset = position === "left" ? i : i + columns;
+        const duration = 20 + (i % 3) * 8;
+        const delay = i * 2.5;
+        return (
+          <div
+            key={`${position}-${i}`}
+            className="binary-column text-[10px] font-mono leading-[1.6] whitespace-pre tracking-widest"
+            style={{
+              color: "rgba(203, 213, 225, 0.12)",
+              writingMode: "vertical-lr",
+              animation: `binary-scroll ${duration}s linear ${delay}s infinite`,
+              animationFillMode: "backwards",
+            }}
+          >
+            {generateColumn(offset + 42)}
+            {"\n"}
+            {generateColumn(offset + 99)}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div
+      className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}
+      aria-hidden="true"
+    >
+      {(side === "left" || side === "both") && renderColumns("left")}
+      {(side === "right" || side === "both") && renderColumns("right")}
+    </div>
+  );
+};
--- a/apps/web/src/components/Effects/CircuitBoard.tsx
+++ b/apps/web/src/components/Effects/CircuitBoard.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import * as React from "react";
+import { useEffect, useRef, useCallback } from "react";
+
+interface Node {
+  x: number;
+  y: number;
+  connections: number[];
+  pulsePhase: number;
+  pulseSpeed: number;
+  size: number;
+}
+
+interface Trace {
+  from: number;
+  to: number;
+  progress: number;
+  speed: number;
+  active: boolean;
+  delay: number;
+}
+
+interface CircuitBoardProps {
+  className?: string;
+  density?: "low" | "medium" | "high";
+  animate?: boolean;
+}
+
+export const CircuitBoard: React.FC<CircuitBoardProps> = ({
+  className = "",
+  density = "medium",
+  animate = true,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const nodesRef = useRef<Node[]>([]);
+  const tracesRef = useRef<Trace[]>([]);
+  const animationFrameRef = useRef<number>(0);
+  const timeRef = useRef<number>(0);
+  const dimensionsRef = useRef<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  });
+
+  const densityMap = { low: 12, medium: 20, high: 30 };
+
+  const initCircuit = useCallback(
+    (width: number, height: number) => {
+      const nodeCount = densityMap[density];
+      const nodes: Node[] = [];
+      const traces: Trace[] = [];
+      const gridCols = Math.ceil(Math.sqrt(nodeCount * (width / height)));
+      const gridRows = Math.ceil(nodeCount / gridCols);
+      const cellW = width / gridCols;
+      const cellH = height / gridRows;
+
+      // Create nodes on a jittered grid
+      for (let row = 0; row < gridRows; row++) {
+        for (let col = 0; col < gridCols; col++) {
+          if (nodes.length >= nodeCount) break;
+          nodes.push({
+            x: cellW * (col + 0.3 + Math.random() * 0.4),
+            y: cellH * (row + 0.3 + Math.random() * 0.4),
+            connections: [],
+            pulsePhase: Math.random() * Math.PI * 2,
+            pulseSpeed: 0.5 + Math.random() * 1.5,
+            size: 1.5 + Math.random() * 2,
+          });
+        }
+      }
+
+      // Connect nearby nodes with orthogonal traces (PCB style)
+      for (let i = 0; i < nodes.length; i++) {
+        const maxConnections = 2 + Math.floor(Math.random() * 2);
+        const distances: { idx: number; dist: number }[] = [];
+
+        for (let j = 0; j < nodes.length; j++) {
+          if (i === j) continue;
+          const dx = nodes[j].x - nodes[i].x;
+          const dy = nodes[j].y - nodes[i].y;
+          distances.push({ idx: j, dist: Math.sqrt(dx * dx + dy * dy) });
+        }
+
+        distances.sort((a, b) => a.dist - b.dist);
+        let connected = 0;
+
+        for (const d of distances) {
+          if (connected >= maxConnections) break;
+          if (d.dist > Math.max(cellW, cellH) * 2) break;
+
+          // Avoid duplicate traces
+          const exists = traces.some(
+            (t) =>
+              (t.from === i && t.to === d.idx) ||
+              (t.from === d.idx && t.to === i),
+          );
+          if (exists) continue;
+
+          nodes[i].connections.push(d.idx);
+          nodes[d.idx].connections.push(i);
+          traces.push({
+            from: i,
+            to: d.idx,
+            progress: 0,
+            speed: 0.002 + Math.random() * 0.004,
+            active: Math.random() > 0.6,
+            delay: Math.random() * 3000,
+          });
+          connected++;
+        }
+      }
+
+      nodesRef.current = nodes;
+      tracesRef.current = traces;
+    },
+    [density],
+  );
+
+  const drawTrace = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      x1: number,
+      y1: number,
+      x2: number,
+      y2: number,
+      alpha: number,
+    ) => {
+      // Draw orthogonal PCB-style trace (L-shaped)
+      const midX = Math.random() > 0.5 ? x2 : x1;
+      const midY = Math.random() > 0.5 ? y1 : y2;
+
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      if (Math.abs(x2 - x1) > Math.abs(y2 - y1)) {
+        ctx.lineTo(x2, y1);
+        ctx.lineTo(x2, y2);
+      } else {
+        ctx.lineTo(x1, y2);
+        ctx.lineTo(x2, y2);
+      }
+      ctx.strokeStyle = `rgba(203, 213, 225, ${alpha})`;
+      ctx.lineWidth = 0.5;
+      ctx.stroke();
+    },
+    [],
+  );
+
+  const animateFrame = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+
+    const { width, height } = dimensionsRef.current;
+    const nodes = nodesRef.current;
+    const traces = tracesRef.current;
+    timeRef.current += 16;
+    const time = timeRef.current;
+
+    ctx.clearRect(0, 0, width, height);
+
+    // Draw static traces
+    traces.forEach((trace) => {
+      const from = nodes[trace.from];
+      const to = nodes[trace.to];
+      if (!from || !to) return;
+
+      // Static trace line
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      if (Math.abs(to.x - from.x) > Math.abs(to.y - from.y)) {
+        ctx.lineTo(to.x, from.y);
+        ctx.lineTo(to.x, to.y);
+      } else {
+        ctx.lineTo(from.x, to.y);
+        ctx.lineTo(to.x, to.y);
+      }
+      ctx.strokeStyle = "rgba(226, 232, 240, 0.4)";
+      ctx.lineWidth = 0.5;
+      ctx.stroke();
+
+      // Animated data packet traveling along trace
+      if (animate && trace.active && time > trace.delay) {
+        trace.progress += trace.speed;
+        if (trace.progress > 1) {
+          trace.progress = 0;
+          trace.active = Math.random() > 0.3;
+          trace.delay = time + Math.random() * 5000;
+        }
+
+        const p = trace.progress;
+        let px: number, py: number;
+
+        if (Math.abs(to.x - from.x) > Math.abs(to.y - from.y)) {
+          if (p < 0.5) {
+            px = from.x + (to.x - from.x) * (p * 2);
+            py = from.y;
+          } else {
+            px = to.x;
+            py = from.y + (to.y - from.y) * ((p - 0.5) * 2);
+          }
+        } else {
+          if (p < 0.5) {
+            px = from.x;
+            py = from.y + (to.y - from.y) * (p * 2);
+          } else {
+            px = from.x + (to.x - from.x) * ((p - 0.5) * 2);
+            py = to.y;
+          }
+        }
+
+        // Data packet glow
+        const gradient = ctx.createRadialGradient(px, py, 0, px, py, 8);
+        gradient.addColorStop(0, "rgba(148, 163, 184, 0.6)");
+        gradient.addColorStop(1, "rgba(148, 163, 184, 0)");
+        ctx.fillStyle = gradient;
+        ctx.fillRect(px - 8, py - 8, 16, 16);
+
+        // Data packet dot
+        ctx.beginPath();
+        ctx.arc(px, py, 1.5, 0, Math.PI * 2);
+        ctx.fillStyle = "rgba(148, 163, 184, 0.8)";
+        ctx.fill();
+      }
+    });
+
+    // Draw nodes
+    nodes.forEach((node) => {
+      const pulse = animate
+        ? 0.3 + Math.sin(time * 0.001 * node.pulseSpeed + node.pulsePhase) * 0.2
+        : 0.4;
+
+      // Node glow
+      const gradient = ctx.createRadialGradient(
+        node.x,
+        node.y,
+        0,
+        node.x,
+        node.y,
+        node.size * 4,
+      );
+      gradient.addColorStop(0, `rgba(191, 203, 219, ${pulse * 0.3})`);
+      gradient.addColorStop(1, "rgba(191, 203, 219, 0)");
+      ctx.fillStyle = gradient;
+      ctx.fillRect(
+        node.x - node.size * 4,
+        node.y - node.size * 4,
+        node.size * 8,
+        node.size * 8,
+      );
+
+      // Node dot
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, node.size, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(203, 213, 225, ${pulse + 0.2})`;
+      ctx.fill();
+    });
+
+    // Draw subtle binary text near some nodes
+    if (animate) {
+      ctx.font = "9px ui-monospace, monospace";
+      nodes.forEach((node, i) => {
+        if (i % 4 !== 0) return; // Only every 4th node
+        const binaryAlpha =
+          0.06 + Math.sin(time * 0.0008 + node.pulsePhase) * 0.04;
+        ctx.fillStyle = `rgba(148, 163, 184, ${binaryAlpha})`;
+        const binary = ((time * 0.01 + i * 137) % 256)
+          .toString(2)
+          .padStart(8, "0");
+        ctx.fillText(binary, node.x + node.size * 3, node.y + 3);
+      });
+    }
+
+    animationFrameRef.current = requestAnimationFrame(animateFrame);
+  }, [animate]);
+
+  const handleResize = useCallback(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+
+    const rect = container.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
+
+    const ctx = canvas.getContext("2d");
+    if (ctx) ctx.scale(dpr, dpr);
+
+    dimensionsRef.current = { width: rect.width, height: rect.height };
+    initCircuit(rect.width, rect.height);
+  }, [initCircuit]);
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    animationFrameRef.current = requestAnimationFrame(animateFrame);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [handleResize, animateFrame]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`absolute inset-0 pointer-events-none ${className}`}
+      aria-hidden="true"
+    >
+      <canvas ref={canvasRef} className="w-full h-full" />
+    </div>
+  );
+};
--- a/apps/web/src/components/Effects/CodeSnippet.tsx
+++ b/apps/web/src/components/Effects/CodeSnippet.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import * as React from "react";
+import { useEffect, useState, useRef } from "react";
+import { motion, useInView } from "framer-motion";
+
+interface CodeSnippetProps {
+  className?: string;
+  variant?: "code" | "git" | "terminal";
+}
+
+const codeLines = [
+  { indent: 0, text: "async deploy(config) {", color: "text-slate-500" },
+  { indent: 1, text: "const build = await compile({", color: "text-slate-400" },
+  { indent: 2, text: 'target: "production",', color: "text-slate-300" },
+  { indent: 2, text: "optimize: true,", color: "text-slate-300" },
+  { indent: 2, text: 'performance: "maximum"', color: "text-slate-300" },
+  { indent: 1, text: "});", color: "text-slate-400" },
+  { indent: 1, text: "", color: "" },
+  { indent: 1, text: "await pipeline.run([", color: "text-slate-400" },
+  { indent: 2, text: "lint, test, build, stage", color: "text-slate-300" },
+  { indent: 1, text: "]);", color: "text-slate-400" },
+  { indent: 1, text: "", color: "" },
+  { indent: 1, text: 'return { status: "live" };', color: "text-slate-400" },
+  { indent: 0, text: "}", color: "text-slate-500" },
+];
+
+const gitBranches = [
+  {
+    type: "commit",
+    branch: "main",
+    label: "v2.1.0 – Production",
+    active: false,
+  },
+  {
+    type: "branch",
+    branch: "feature",
+    label: "feature/redesign",
+    active: true,
+  },
+  { type: "commit", branch: "feature", label: "Neues Layout", active: true },
+  {
+    type: "commit",
+    branch: "feature",
+    label: "Performance-Optimierung",
+    active: true,
+  },
+  { type: "merge", branch: "main", label: "Merge → Production", active: false },
+  { type: "commit", branch: "main", label: "v2.2.0 – Live", active: false },
+];
+
+const terminalLines = [
+  { prompt: true, text: "npm run build", delay: 0 },
+  { prompt: false, text: "✓ Compiled successfully", delay: 0.3 },
+  { prompt: false, text: "✓ Lighthouse: 98/100", delay: 0.6 },
+  { prompt: false, text: "✓ Bundle: 42kb gzipped", delay: 0.9 },
+  { prompt: true, text: "git push origin main", delay: 1.5 },
+  { prompt: false, text: "→ Deploying to production...", delay: 1.8 },
+  { prompt: false, text: "✓ Live in 12s", delay: 2.4 },
+];
+
+import { CodeWindow } from "./CodeWindow";
+
+export const CodeSnippet: React.FC<CodeSnippetProps> = ({
+  className = "",
+  variant = "code",
+}) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-10%" });
+  const [visibleLineIndex, setVisibleLineIndex] = useState(-1);
+  const [displayText, setDisplayText] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!isInView) return;
+
+    const lines =
+      variant === "code"
+        ? codeLines
+        : variant === "git"
+          ? gitBranches.map((b) => ({ text: b.label }))
+          : terminalLines;
+
+    const animate = async () => {
+      for (let i = 0; i < lines.length; i++) {
+        setVisibleLineIndex(i);
+        const line = lines[i];
+        const text = "text" in line ? line.text : (line as any).label || "";
+
+        for (let j = 0; j <= text.length; j++) {
+          setDisplayText((prev) => {
+            const next = [...prev];
+            next[i] = text.slice(0, j);
+            return next;
+          });
+          const speed = "prompt" in line && line.prompt ? 40 : 25;
+          await new Promise((r) => setTimeout(r, speed));
+        }
+
+        const pause = "delay" in line ? (line as any).delay * 1000 : 150;
+        await new Promise((r) => setTimeout(r, pause));
+      }
+    };
+
+    animate();
+  }, [isInView, variant]);
+
+  const title =
+    variant === "code"
+      ? "deploy.ts"
+      : variant === "git"
+        ? "git log"
+        : "terminal";
+
+  return (
+    <CodeWindow title={title} className={className} minHeight="380px">
+      <div ref={ref}>
+        {variant === "code" &&
+          codeLines.map((line, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0 }}
+              animate={i <= visibleLineIndex ? { opacity: 1 } : { opacity: 0 }}
+              className={`${line.color} whitespace-pre flex items-center h-6`}
+              style={{ paddingLeft: `${line.indent * 20}px` }}
+            >
+              <span>{displayText[i] || ""}</span>
+              {i === visibleLineIndex && (
+                <motion.span
+                  animate={{ opacity: [1, 0] }}
+                  transition={{ repeat: Infinity, duration: 0.6 }}
+                  className="inline-block w-1.5 h-4 bg-slate-300 ml-1 shrink-0"
+                />
+              )}
+            </motion.div>
+          ))}
+
+        {variant === "git" && (
+          <div className="relative">
+            <div className="absolute left-[7px] top-3 bottom-3 w-px bg-slate-200" />
+            {gitBranches.map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, x: -5 }}
+                animate={i <= visibleLineIndex ? { opacity: 1, x: 0 } : {}}
+                className="flex items-center gap-4 py-1.5 relative h-8"
+              >
+                <div
+                  className={`w-4 h-4 rounded-full border-2 z-10 shrink-0 ${item.type === "merge" ? "border-slate-400 bg-slate-100" : item.active ? "border-slate-300 bg-white" : "border-slate-200 bg-slate-50"}`}
+                />
+                {item.type === "branch" && (
+                  <span className="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 border border-slate-200 text-slate-400 font-bold shrink-0">
+                    {item.branch}
+                  </span>
+                )}
+                <span
+                  className={`text-xs ${item.active ? "text-slate-500" : "text-slate-300"} truncate`}
+                >
+                  {displayText[i] || ""}
+                </span>
+              </motion.div>
+            ))}
+          </div>
+        )}
+
+        {variant === "terminal" &&
+          terminalLines.map((line, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0 }}
+              animate={i <= visibleLineIndex ? { opacity: 1 } : {}}
+              className="flex items-start gap-2 py-0.5 min-h-[1.5rem]"
+            >
+              {line.prompt && (
+                <span className="text-slate-300 select-none shrink-0">❯</span>
+              )}
+              <span
+                className={
+                  line.prompt ? "text-slate-500 font-medium" : "text-slate-300"
+                }
+              >
+                {displayText[i] || ""}
+              </span>
+              {i === visibleLineIndex && (
+                <motion.span
+                  animate={{ opacity: [1, 0] }}
+                  transition={{ repeat: Infinity, duration: 0.6 }}
+                  className="inline-block w-1.5 h-4 bg-slate-300 ml-0.5 shrink-0"
+                />
+              )}
+            </motion.div>
+          ))}
+      </div>
+    </CodeWindow>
+  );
+};
--- a/apps/web/src/components/Effects/CodeWindow.tsx
+++ b/apps/web/src/components/Effects/CodeWindow.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+interface CodeWindowProps {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+  actions?: React.ReactNode;
+  fixedHeight?: boolean;
+  minHeight?: string;
+}
+
+/**
+ * CodeWindow: A shared, stable browser-frame chassis for code, terminal, and diagrams.
+ * - Enforces dimension stability to prevent layout shifts.
+ * - Standardizes the "Systems, not Brochures" aesthetic.
+ */
+export const CodeWindow: React.FC<CodeWindowProps> = ({
+  title,
+  children,
+  className = "",
+  actions,
+  fixedHeight = false,
+  minHeight = "380px",
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative rounded-xl border border-slate-100 bg-slate-50/50 backdrop-blur-sm overflow-hidden w-full max-w-[600px] mx-auto flex-shrink-0 flex flex-col",
+        fixedHeight && "h-[400px]",
+        className,
+      )}
+      style={!fixedHeight && minHeight ? { minHeight } : {}}
+    >
+      {/* Window chrome */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-white/50 shrink-0">
+        <div className="flex items-center gap-1.5">
+          <div className="w-2 h-2 rounded-full bg-slate-200" />
+          <div className="w-2 h-2 rounded-full bg-slate-200" />
+          <div className="w-2 h-2 rounded-full bg-slate-200" />
+          <span className="ml-3 text-[9px] font-mono text-slate-300 uppercase tracking-widest select-none">
+            {title}
+          </span>
+        </div>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+
+      {/* Content area */}
+      <div className="flex-1 overflow-x-auto overflow-y-auto p-4 md:p-6 font-mono text-xs md:text-sm leading-relaxed relative">
+        {children}
+      </div>
+
+      {/* Bottom gradient fade for aesthetics/depth */}
+      <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-slate-50/80 to-transparent pointer-events-none" />
+    </div>
+  );
+};
--- a/apps/web/src/components/Effects/DataFlow.tsx
+++ b/apps/web/src/components/Effects/DataFlow.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import * as React from "react";
+
+interface DataFlowProps {
+  className?: string;
+  lines?: number;
+  speed?: "slow" | "normal" | "fast";
+}
+
+export const DataFlow: React.FC<DataFlowProps> = ({
+  className = "",
+  lines = 3,
+  speed = "normal",
+}) => {
+  const speedMap = { slow: "8s", normal: "5s", fast: "3s" };
+  const duration = speedMap[speed];
+
+  return (
+    <div
+      className={`relative w-full overflow-hidden ${className}`}
+      aria-hidden="true"
+    >
+      <svg
+        viewBox="0 0 1200 40"
+        className="w-full h-8 md:h-10"
+        preserveAspectRatio="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {Array.from({ length: lines }).map((_, i) => {
+          const y = 8 + (i * 24) / lines;
+          const delay = i * 0.8;
+          return (
+            <g key={i}>
+              {/* Static trace line */}
+              <line
+                x1="0"
+                y1={y}
+                x2="1200"
+                y2={y}
+                stroke="rgba(226, 232, 240, 0.3)"
+                strokeWidth="0.5"
+              />
+              {/* Animated data packet */}
+              <circle r="2" fill="rgba(148, 163, 184, 0.6)">
+                <animateMotion
+                  dur={duration}
+                  repeatCount="indefinite"
+                  begin={`${delay}s`}
+                  path={`M-20,${y} L1220,${y}`}
+                />
+              </circle>
+              {/* Trailing glow */}
+              <circle r="6" fill="rgba(148, 163, 184, 0.08)">
+                <animateMotion
+                  dur={duration}
+                  repeatCount="indefinite"
+                  begin={`${delay}s`}
+                  path={`M-20,${y} L1220,${y}`}
+                />
+              </circle>
+              {/* Secondary packet (opposite direction, slower) */}
+              <rect
+                width="12"
+                height="1"
+                rx="0.5"
+                fill="rgba(203, 213, 225, 0.3)"
+              >
+                <animateMotion
+                  dur={`${parseFloat(duration) * 1.4}s`}
+                  repeatCount="indefinite"
+                  begin={`${delay + 2}s`}
+                  path={`M1220,${y + 2} L-20,${y + 2}`}
+                />
+              </rect>
+            </g>
+          );
+        })}
+
+        {/* Junction nodes */}
+        {[200, 500, 800, 1050].map((x, i) => (
+          <g key={`node-${i}`}>
+            <circle cx={x} cy="20" r="2" fill="rgba(203, 213, 225, 0.4)">
+              <animate
+                attributeName="r"
+                values="1.5;2.5;1.5"
+                dur="3s"
+                begin={`${i * 0.7}s`}
+                repeatCount="indefinite"
+              />
+            </circle>
+            <circle
+              cx={x}
+              cy="20"
+              r="6"
+              fill="none"
+              stroke="rgba(203, 213, 225, 0.15)"
+              strokeWidth="0.5"
+            >
+              <animate
+                attributeName="r"
+                values="4;8;4"
+                dur="3s"
+                begin={`${i * 0.7}s`}
+                repeatCount="indefinite"
+              />
+              <animate
+                attributeName="opacity"
+                values="0.3;0;0.3"
+                dur="3s"
+                begin={`${i * 0.7}s`}
+                repeatCount="indefinite"
+              />
+            </circle>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+};
--- a/apps/web/src/components/Effects/GradientMesh.tsx
+++ b/apps/web/src/components/Effects/GradientMesh.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+
+interface GradientMeshProps {
+  className?: string;
+  variant?: "subtle" | "metallic" | "warm";
+  animate?: boolean;
+}
+
+export const GradientMesh: React.FC<GradientMeshProps> = ({
+  className = "",
+  variant = "subtle",
+  animate = true,
+}) => {
+  const gradients = {
+    subtle: {
+      bg: "transparent",
+      blob1: "rgba(226, 232, 240, 0.6)",
+      blob2: "rgba(241, 245, 249, 0.7)",
+      blob3: "rgba(203, 213, 225, 0.35)",
+    },
+    metallic: {
+      bg: "transparent",
+      blob1: "rgba(186, 206, 235, 0.4)",
+      blob2: "rgba(214, 224, 240, 0.5)",
+      blob3: "rgba(170, 190, 220, 0.25)",
+    },
+    warm: {
+      bg: "transparent",
+      blob1: "rgba(241, 245, 249, 0.6)",
+      blob2: "rgba(248, 250, 252, 0.7)",
+      blob3: "rgba(226, 232, 240, 0.4)",
+    },
+  };
+
+  const colors = gradients[variant];
+
+  return (
+    <div
+      className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}
+      aria-hidden="true"
+    >
+      {/* Large Blob 1 */}
+      <div
+        className={`absolute rounded-full ${animate ? "animate-gradient-blob-1" : ""}`}
+        style={{
+          width: "900px",
+          height: "900px",
+          background: `radial-gradient(circle, ${colors.blob1} 0%, transparent 65%)`,
+          top: "-20%",
+          left: "-10%",
+          filter: "blur(80px)",
+        }}
+      />
+      {/* Large Blob 2 */}
+      <div
+        className={`absolute rounded-full ${animate ? "animate-gradient-blob-2" : ""}`}
+        style={{
+          width: "800px",
+          height: "800px",
+          background: `radial-gradient(circle, ${colors.blob2} 0%, transparent 65%)`,
+          bottom: "-25%",
+          right: "-10%",
+          filter: "blur(70px)",
+        }}
+      />
+      {/* Accent Blob 3 */}
+      <div
+        className={`absolute rounded-full ${animate ? "animate-gradient-blob-3" : ""}`}
+        style={{
+          width: "600px",
+          height: "600px",
+          background: `radial-gradient(circle, ${colors.blob3} 0%, transparent 65%)`,
+          top: "30%",
+          left: "25%",
+          filter: "blur(60px)",
+        }}
+      />
+    </div>
+  );
+};
--- a/apps/web/src/components/Effects/index.ts
+++ b/apps/web/src/components/Effects/index.ts
@@ -0,0 +1,6 @@
+export { CircuitBoard } from "./CircuitBoard";
+export { DataFlow } from "./DataFlow";
+export { BinaryStream } from "./BinaryStream";
+export { GradientMesh } from "./GradientMesh";
+export { CodeSnippet } from "./CodeSnippet";
+export { AbstractCircuit } from "./AbstractCircuit";
--- a/apps/web/src/components/FileExample.tsx
+++ b/apps/web/src/components/FileExample.tsx
@@ -1,20 +1,23 @@
-'use client';
+"use client";

-import React, { useState, useRef } from 'react';
-import * as Prism from 'prismjs';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-tsx';
-import 'prismjs/components/prism-docker';
-import 'prismjs/components/prism-yaml';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-markdown';
+import React, { useState, useRef } from "react";
+import * as Prism from "prismjs";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-docker";
+import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-markdown";
+
+import { cn } from "../utils/cn";
+import { CodeWindow } from "./Effects/CodeWindow";

 interface FileExampleProps {
  filename: string;
@@ -26,40 +29,34 @@ interface FileExampleProps {
 }

 const prismLanguageMap: Record<string, string> = {
-  py: 'python',
-  ts: 'typescript',
-  tsx: 'tsx',
-  js: 'javascript',
-  jsx: 'jsx',
-  dockerfile: 'docker',
-  docker: 'docker',
-  yml: 'yaml',
-  yaml: 'yaml',
-  json: 'json',
-  html: 'markup',
-  css: 'css',
-  sql: 'sql',
-  sh: 'bash',
-  bash: 'bash',
-  md: 'markdown',
+  py: "python",
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  dockerfile: "docker",
+  docker: "docker",
+  yml: "yaml",
+  yaml: "yaml",
+  json: "json",
+  html: "markup",
+  css: "css",
+  sql: "sql",
+  sh: "bash",
+  bash: "bash",
+  md: "markdown",
 };

 export const FileExample: React.FC<FileExampleProps> = ({
  filename,
  content,
  language,
-  id
 }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [isCopied, setIsCopied] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);

-  const safeId = String(id).replace(/[^a-zA-Z0-9_-]/g, '');
-  const headerId = `file-example-header-${safeId}`;
-  const contentId = `file-example-content-${safeId}`;
-
-  const fileExtension = filename.split('.').pop() || language;
-  const prismLanguage = prismLanguageMap[fileExtension] || 'markup';
+  const fileExtension = filename.split(".").pop() || language;
+  const prismLanguage = prismLanguageMap[fileExtension] || "markup";

  const highlightedCode = Prism.highlight(
    content,
@@ -67,15 +64,6 @@ export const FileExample: React.FC<FileExampleProps> = ({
    prismLanguage,
  );

-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-    if (!isExpanded) {
-      setTimeout(() => {
-        contentRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      }, 120);
-    }
-  };
-
  const handleCopy = async (e: React.MouseEvent) => {
    e.stopPropagation();
    try {
@@ -83,15 +71,15 @@ export const FileExample: React.FC<FileExampleProps> = ({
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 900);
    } catch (err) {
-      console.error('Failed to copy:', err);
+      console.error("Failed to copy:", err);
    }
  };

  const handleDownload = (e: React.MouseEvent) => {
    e.stopPropagation();
-    const blob = new Blob([content], { type: 'text/plain' });
+    const blob = new Blob([content], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
+    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
@@ -100,93 +88,93 @@ export const FileExample: React.FC<FileExampleProps> = ({
    URL.revokeObjectURL(url);
  };

-  return (
-    <div
-      className="file-example w-full bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300"
-      data-file-example
-      data-expanded={isExpanded}
-    >
-      <div
-        className="px-4 py-3 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50 transition-colors"
-        onClick={toggleExpand}
-        role="button"
-        tabIndex={0}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggleExpand();
-          }
-        }}
-        aria-expanded={isExpanded}
-        aria-controls={contentId}
-        id={headerId}
+  const actions = (
+    <>
+      <button
+        type="button"
+        className={`h-7 w-7 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 transition-all ${isCopied ? "text-green-500 border-green-200" : ""}`}
+        onClick={handleCopy}
+        title="Copy to clipboard"
      >
-        <div className="flex items-center gap-2 min-w-0">
-          <svg
-            className={`w-3 h-3 text-slate-400 flex-shrink-0 transition-transform ${isExpanded ? 'rotate-0' : '-rotate-90'}`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-          </svg>
-
-          <span className="text-xs font-mono text-slate-900 truncate" title={filename}>{filename}</span>
-        </div>
-
-        <div className="flex items-center gap-1 flex-shrink-0">
-          <button
-            type="button"
-            className={`copy-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${isCopied ? 'copied' : ''}`}
-            onClick={handleCopy}
-            title="Copy to clipboard"
-            aria-label={`Copy ${filename} to clipboard`}
-            data-copied={isCopied}
-          >
-            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-              />
-            </svg>
-          </button>
-
-          <button
-            type="button"
-            className="download-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
-            onClick={handleDownload}
-            title="Download file"
-            aria-label={`Download ${filename}`}
-          >
-            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div
-        ref={contentRef}
-        className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-white ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
-        id={contentId}
-        role="region"
-        aria-labelledby={headerId}
-      >
-        <pre
-          className="m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border-t border-slate-200"
-          style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
+        <svg
+          className="w-3 h-3"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
        >
-          <code className={`language-${prismLanguage}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>
-        </pre>
-      </div>
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
+        </svg>
+      </button>
+      <button
+        type="button"
+        className="h-7 w-7 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 transition-all"
+        onClick={handleDownload}
+        title="Download file"
+      >
+        <svg
+          className="w-3 h-3"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+      </button>
+    </>
+  );
+
+  return (
+    <div className="my-8 group/file">
+      <CodeWindow
+        title={filename}
+        actions={actions}
+        className={cn(
+          "transition-all duration-300",
+          isExpanded
+            ? "max-w-4xl"
+            : "max-w-[600px] cursor-pointer hover:border-slate-200",
+        )}
+        minHeight={isExpanded ? "auto" : "80px"}
+      >
+        <div
+          onClick={() => setIsExpanded(!isExpanded)}
+          className={cn(
+            "relative",
+            !isExpanded && "max-h-[80px] overflow-hidden",
+          )}
+        >
+          <pre
+            className="m-0 p-0 overflow-x-auto text-[13px] leading-[1.65] font-mono text-slate-800"
+            style={{
+              fontFamily:
+                "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            }}
+          >
+            <code
+              className={`language-${prismLanguage}`}
+              dangerouslySetInnerHTML={{ __html: highlightedCode }}
+            ></code>
+          </pre>
+
+          {!isExpanded && (
+            <div className="absolute inset-0 bg-gradient-to-t from-white/80 to-transparent flex items-end justify-center pb-2">
+              <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+                Click to expand
+              </span>
+            </div>
+          )}
+        </div>
+      </CodeWindow>
    </div>
  );
 };
--- a/apps/web/src/components/Footer.tsx
+++ b/apps/web/src/components/Footer.tsx
@@ -1,32 +1,61 @@
-import Image from 'next/image';
-import * as React from 'react';
+import Image from "next/image";
+import * as React from "react";

-import LogoBlack from '../assets/logo/Logo Black Transparent.svg';
+import LogoBlack from "../assets/logo/Logo Black Transparent.svg";

 export const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
-    <footer className="py-16 mt-24 border-t border-slate-100 bg-white relative z-10">
+    <footer className="relative py-16 mt-24 border-t border-slate-100 bg-white z-10">
+      {/* Tech border at top */}
+      <div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
+        <div
+          className="h-full w-full"
+          style={{
+            background:
+              "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.15) 25%, rgba(191, 206, 228, 0.1) 50%, rgba(148, 163, 184, 0.15) 75%, transparent 100%)",
+          }}
+        />
+      </div>
+
      <div className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
          <div className="space-y-8">
            <div className="flex items-center gap-3">
-              <Image
-                src={LogoBlack}
-                alt="Marc Mintel"
-                height={72}
-              />
+              <Image src={LogoBlack} alt="Marc Mintel" height={72} />
            </div>
          </div>
-          
+
          <div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
            <span>© {currentYear}</span>
            <div className="flex gap-8">
-              <a href="/about" className="hover:text-slate-900 transition-colors no-underline">Über mich</a>
-              <a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
-              <a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
+              <a
+                href="/about"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Über mich
+              </a>
+              <a
+                href="/contact"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Kontakt
+              </a>
+              <a
+                href="https://github.com/marcmintel"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                GitHub
+              </a>
            </div>
+            {/* Subtle binary decoration */}
+            <span
+              className="text-[8px] text-slate-200 tracking-[0.5em] select-none font-mono"
+              aria-hidden="true"
+            >
+              01001101 01001001 01001110
+            </span>
          </div>
        </div>
      </div>
--- a/apps/web/src/components/GlitchText.tsx
+++ b/apps/web/src/components/GlitchText.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import * as React from "react";
+import { useInView } from "framer-motion";
+
+/**
+ * GlitchText: Binary scramble reveal effect
+ *
+ * Text characters scramble through random binary (0/1) before settling
+ * into the final text. Creates a "decoding" feel.
+ *
+ * Can also be triggered on hover for buttons.
+ */
+
+interface GlitchTextProps {
+  children: string;
+  className?: string;
+  delay?: number;
+  duration?: number;
+  trigger?: "inView" | "hover" | "mount";
+  as?: "span" | "div" | "h1" | "h2" | "p";
+}
+
+const CHARS = "01";
+
+export const GlitchText: React.FC<GlitchTextProps> = ({
+  children,
+  className = "",
+  delay = 0,
+  duration = 0.8,
+  trigger = "inView",
+  as: Tag = "span",
+}) => {
+  const text = children;
+  const [display, setDisplay] = React.useState(text);
+  const [isRevealed, setIsRevealed] = React.useState(false);
+  const [isHovering, setIsHovering] = React.useState(false);
+  const ref = React.useRef<any>(null);
+  const isInView = useInView(ref, { once: true, margin: "-10%" });
+
+  // Initial scramble reveal (on mount or in-view)
+  React.useEffect(() => {
+    if (isRevealed) return;
+
+    const shouldStart =
+      trigger === "mount" || (trigger === "inView" && isInView);
+    if (!shouldStart) return;
+
+    const chars = text.split("");
+    const totalFrames = Math.ceil(duration * 60); // ~60fps
+    const staggerPerChar = totalFrames / chars.length;
+    let frame = 0;
+
+    const delayMs = delay * 1000;
+
+    const timeout = setTimeout(() => {
+      const interval = setInterval(() => {
+        frame++;
+        const revealed = chars.map((char, i) => {
+          if (char === " ") return " ";
+          const charFrame = i * staggerPerChar;
+          if (frame > charFrame + staggerPerChar * 2) return char; // Settled
+          if (frame > charFrame) {
+            // Scrambling phase
+            return CHARS[Math.floor(Math.random() * CHARS.length)];
+          }
+          return CHARS[Math.floor(Math.random() * CHARS.length)];
+        });
+        setDisplay(revealed.join(""));
+
+        if (frame >= totalFrames + staggerPerChar * 2) {
+          setDisplay(text);
+          setIsRevealed(true);
+          clearInterval(interval);
+        }
+      }, 1000 / 60);
+
+      return () => clearInterval(interval);
+    }, delayMs);
+
+    return () => clearTimeout(timeout);
+  }, [isInView, trigger, text, delay, duration, isRevealed]);
+
+  // Hover re-scramble (for buttons)
+  React.useEffect(() => {
+    if (!isHovering || trigger !== "hover") return;
+
+    const chars = text.split("");
+    const totalFrames = 20; // Quick scramble
+    let frame = 0;
+
+    const interval = setInterval(() => {
+      frame++;
+      const scrambled = chars.map((char, i) => {
+        if (char === " ") return " ";
+        const settle = (frame / totalFrames) * chars.length;
+        if (i < settle) return char;
+        return CHARS[Math.floor(Math.random() * CHARS.length)];
+      });
+      setDisplay(scrambled.join(""));
+
+      if (frame >= totalFrames) {
+        setDisplay(text);
+        clearInterval(interval);
+      }
+    }, 1000 / 60);
+
+    return () => clearInterval(interval);
+  }, [isHovering, trigger, text]);
+
+  return (
+    <Tag
+      ref={ref}
+      className={`${className}`}
+      onMouseEnter={trigger === "hover" ? () => setIsHovering(true) : undefined}
+      onMouseLeave={
+        trigger === "hover" ? () => setIsHovering(false) : undefined
+      }
+      style={{ fontVariantNumeric: "tabular-nums" }} // Prevent layout shift during scramble
+    >
+      {display}
+    </Tag>
+  );
+};
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -1,75 +1,98 @@
-'use client';
+"use client";

-import Image from 'next/image';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import * as React from 'react';
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React from "react";

-import IconWhite from '../assets/logo/Icon White Transparent.svg';
+import IconWhite from "../assets/logo/Icon White Transparent.svg";

 export const Header: React.FC = () => {
  const pathname = usePathname();
-  const [, setIsScrolled] = React.useState(false);
+  const [isScrolled, setIsScrolled] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const isActive = (path: string) => pathname === path;

  return (
-    <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
+    <header
+      className={`sticky top-0 z-50 transition-all duration-500 ${
+        isScrolled
+          ? "bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50"
+          : "bg-white/80 backdrop-blur-md border-b border-slate-50"
+      }`}
+    >
+      {/* Animated tech border at bottom */}
+      <div className="absolute bottom-0 left-0 right-0 h-px overflow-hidden">
+        <div
+          className="h-full w-full"
+          style={{
+            background: isScrolled
+              ? "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.15) 30%, rgba(191, 206, 228, 0.1) 50%, rgba(148, 163, 184, 0.15) 70%, transparent 100%)"
+              : "transparent",
+            transition: "background 0.5s ease",
+          }}
+        />
+      </div>
+
      <div className="narrow-container py-4 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-4 group">
          <div className="flex items-center gap-3">
-            <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0">
+            <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0 relative overflow-hidden">
              <Image
                src={IconWhite}
                alt="Marc Mintel Icon"
                width={32}
                height={32}
-                className="w-8 h-8"
+                className="w-8 h-8 relative z-10"
              />
            </div>
          </div>
        </Link>

        <nav className="flex items-center gap-8">
-          <Link
-            href="/about"
-            className={`text-xs font-bold uppercase tracking-widest transition-colors ${isActive('/about') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
-              }`}
-          >
-            Über mich
-          </Link>
-          <Link
-            href="/websites"
-            className={`text-xs font-bold uppercase tracking-widest transition-colors ${isActive('/websites') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
-              }`}
-          >
-            Websites
-          </Link>
-          <Link
-            href="/case-studies"
-            className={`text-xs font-bold uppercase tracking-widest transition-colors ${isActive('/case-studies') || pathname?.startsWith('/case-studies/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
-              }`}
-          >
-            Case Studies
-          </Link>
-          <Link
-            href="/blog"
-            className={`text-xs font-bold uppercase tracking-widest transition-colors ${isActive('/blog') || pathname?.startsWith('/blog/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
-              }`}
-          >
-            Blog
-          </Link>
+          {[
+            { href: "/about", label: "Über mich" },
+            { href: "/websites", label: "Websites" },
+            { href: "/case-studies", label: "Case Studies", prefix: true },
+            { href: "/blog", label: "Blog", prefix: true },
+          ].map((link) => {
+            const active = link.prefix
+              ? isActive(link.href) || pathname?.startsWith(`${link.href}/`)
+              : isActive(link.href);
+
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`text-xs font-bold uppercase tracking-widest transition-colors duration-300 relative ${
+                  active
+                    ? "text-slate-900"
+                    : "text-slate-400 hover:text-slate-900"
+                }`}
+              >
+                {active && (
+                  <span className="absolute -bottom-1 left-0 right-0 flex justify-center">
+                    <span className="w-1 h-1 rounded-full bg-slate-900 animate-circuit-pulse" />
+                  </span>
+                )}
+                {link.label}
+              </Link>
+            );
+          })}
          <Link
            href="/contact"
-            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
+            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
+            style={{
+              transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
+            }}
          >
            Anfrage
          </Link>
--- a/apps/web/src/components/HeroSection.tsx
+++ b/apps/web/src/components/HeroSection.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { Button } from "./Button";
+import { AbstractCircuit } from "./Effects";
+import { GlitchText } from "./GlitchText";
+
+/**
+ * HeroSection: "Binary Architecture / The Blueprint"
+ *
+ * - **Concept**: The website as a technical blueprint being rendered in real-time.
+ * - **Typography**: Massive scale, mixing black Sans and technical Mono.
+ * - **Details**: Coordinate markers, blueprint lines, and binary data integration.
+ */
+
+export const HeroSection: React.FC = () => {
+  const { scrollY } = useScroll();
+  const y = useTransform(scrollY, [0, 800], [0, 300]);
+  const opacity = useTransform(scrollY, [0, 600], [1, 0]);
+
+  return (
+    <section className="relative min-h-[100vh] flex items-center justify-center overflow-hidden bg-white">
+      {/* 1. The Binary Architecture (Background) */}
+      <div className="absolute inset-0 z-0">
+        <AbstractCircuit />
+      </div>
+
+      {/* 2. Content Layer */}
+      <div className="relative z-10 container mx-auto px-6 h-full flex flex-col justify-center items-center">
+        <motion.div
+          style={{ y, opacity }}
+          className="text-center relative max-w-[90vw]"
+        >
+          {/* Architectural Coordinate Labels */}
+          <div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4">
+                <span className="text-[10px] font-mono">0x00{i}A</span>
+                <div className="w-12 h-[1px] bg-slate-400" />
+              </div>
+            ))}
+          </div>
+
+          {/* Badge */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 1, delay: 0.2 }}
+            className="mb-10 inline-flex items-center gap-4 px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
+          >
+            <div className="flex gap-1">
+              <div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
+              <div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
+            </div>
+            <span className="text-[10px] font-mono font-bold tracking-[0.4em] text-slate-500 uppercase">
+              Digital_Architect // v.2026
+            </span>
+          </motion.div>
+
+          {/* Headline */}
+          <h1 className="text-7xl md:text-[11rem] font-black tracking-tighter leading-[0.8] text-slate-900 mb-12 uppercase">
+            <div className="block">
+              <GlitchText delay={0.5} duration={1.2}>
+                Websites
+              </GlitchText>
+            </div>
+            <div
+              className="block font-mono text-transparent bg-clip-text bg-gradient-to-r from-slate-400 via-slate-300 to-slate-400 font-light italic"
+              style={{ letterSpacing: "-0.02em" }}
+            >
+              <GlitchText delay={0.9} duration={1}>
+                ohne overhead.
+              </GlitchText>
+            </div>
+          </h1>
+
+          {/* Subtext */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, delay: 0.8 }}
+            className="flex flex-col items-center gap-12"
+          >
+            <p className="text-xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed">
+              Ein Entwickler. Ein Ansprechpartner. <br />
+              <span className="text-slate-900 font-bold tracking-tight">
+                Systematische Architekturen für das Web.
+              </span>
+            </p>
+
+            <div className="flex flex-wrap items-center justify-center gap-6">
+              <Button href="/contact" size="large">
+                Projekt anfragen
+              </Button>
+              <Button href="/websites" variant="outline" size="large">
+                Prozess ansehen
+              </Button>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* 3. Blueprint Frame (Decorative Borders) */}
+      <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-8 opacity-40" />
+      <div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
+        <span className="text-[10px] font-mono tracking-widest text-slate-400">
+          POS_TRANSMISSION_001
+        </span>
+      </div>
+      <div className="absolute bottom-8 right-8 p-4 hidden md:block opacity-20 transition-opacity hover:opacity-100">
+        <span className="text-[10px] font-mono tracking-widest text-slate-400">
+          EST_2026 // M-ARCH
+        </span>
+      </div>
+
+      {/* 4. Scroll Indicator */}
+      <motion.div
+        className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
+        style={{ opacity }}
+      >
+        <div className="w-[1px] h-12 bg-slate-200" />
+        <span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
+          Scroll
+        </span>
+      </motion.div>
+    </section>
+  );
+};
--- a/apps/web/src/components/IconList.tsx
+++ b/apps/web/src/components/IconList.tsx
@@ -33,10 +33,12 @@ export const IconListItem: React.FC<IconListItemProps> = ({
  let renderIcon = icon;

  if (bullet) {
-    renderIcon = <div className="w-1.5 h-1.5 bg-slate-900 rounded-full" />;
+    renderIcon = (
+      <div className="w-2 h-2 bg-slate-900 rounded-full shrink-0 group-hover:bg-blue-500 transition-colors duration-300" />
+    );
  } else if (check) {
    renderIcon = (
-      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform">
+      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
        <Check className="w-4 h-4 text-white" />
      </div>
    );
--- a/apps/web/src/components/IframeSection.tsx
+++ b/apps/web/src/components/IframeSection.tsx
@@ -3,8 +3,9 @@
 /* eslint-disable no-unused-vars */
 import * as React from "react";
 import { cn } from "../utils/cn";
-import { ShieldCheck } from "lucide-react";
-import { MonoLabel } from "./Typography";
+import { ShieldCheck, ArrowLeft, ArrowRight, RefreshCw } from "lucide-react";
+import { MonoLabel, Label } from "./Typography";
+import { motion, AnimatePresence } from "framer-motion";

 interface IframeSectionProps {
  src: string;
@@ -24,42 +25,90 @@ interface IframeSectionProps {
  delay?: number;
  noScale?: boolean;
  dynamicGlow?: boolean;
+  minHeight?: number;
+  mobileWidth?: number;
 }

+import PropTypes from "prop-types";
+
 /**
 * Reusable Browser UI components to maintain consistency
 */
-const BrowserChrome: React.FC<{ url: string; minimal?: boolean }> = ({
+const BrowserChromeComponent: React.FC<{ url: string; minimal?: boolean }> = ({
  url,
  minimal,
 }) => {
  if (minimal) return null;
  return (
-    <div className="h-14 bg-white/90 backdrop-blur-2xl border-b border-slate-200/40 flex items-center px-6 gap-8 z-[100] flex-shrink-0 relative">
-      {/* Status Indicators (Traffic Lights) */}
-      <div className="flex gap-1.5 opacity-40">
-        <div className="w-1.5 h-1.5 rounded-full bg-slate-900" />
-        <div className="w-1.5 h-1.5 rounded-full bg-slate-900" />
+    <div
+      className="h-12 md:h-14 bg-slate-50 border-b border-slate-200/60 flex items-center px-4 md:px-6 gap-4 md:gap-8 z-[100] flex-shrink-0 relative isolation-auto"
+      style={{ isolation: "isolate", minHeight: "48px" }}
+    >
+      {/* 3D Rim Highlight */}
+      <div className="absolute top-0 left-0 right-0 h-[1px] bg-white opacity-80" />
+
+      {/* Status Indicators (Traffic Lights) - Enhanced with subtle depth */}
+      <div className="flex gap-1.5 md:gap-2.5">
+        {[
+          "bg-slate-300 from-slate-200 to-slate-400",
+          "bg-slate-300 from-slate-200 to-slate-400",
+          "bg-slate-300 from-slate-200 to-slate-400",
+        ].map((cls, i) => (
+          <div
+            key={i}
+            className={cn(
+              "w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-gradient-to-br shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),0_1.5px_1px_rgba(255,255,255,0.7)] relative flex items-center justify-center",
+              cls,
+            )}
+          >
+            {/* Subtle glint, soft blur */}
+            <div className="absolute top-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-white/30 blur-[0.7px]" />
+          </div>
+        ))}
      </div>

-      {/* URL Bar */}
-      <div className="flex-1 max-w-[600px] mx-auto bg-white/30 backdrop-blur-3xl rounded-full flex items-center justify-center px-6 h-8 border border-white/60 shadow-[0_2px_12px_-4px_rgba(0,0,0,0.08)]">
-        <div className="flex items-center gap-3 opacity-80 group-hover:opacity-100 transition-all duration-700">
-          <ShieldCheck className="w-3.5 h-3.5 text-slate-900" />
-          <span className="text-[10px] font-mono font-bold tracking-[0.25em] uppercase truncate whitespace-nowrap text-slate-900">
-            {url}
+      {/* Navigation Controls - Hidden on mobile */}
+      <div className="hidden lg:flex items-center gap-4 opacity-30">
+        <ArrowLeft className="w-3.5 h-3.5" />
+        <ArrowRight className="w-3.5 h-3.5" />
+        <RefreshCw className="w-3 h-3 ml-1" />
+      </div>
+
+      {/* URL Bar - Solid high-fidelity layer instead of expensive backdrop-blur */}
+      <div className="flex-1 max-w-[700px] mx-auto bg-white shadow-[inset_0_1px_3px_rgba(0,0,0,0.06),0_0_0_1px_rgba(255,255,255,0.4)] rounded-xl flex items-center justify-between px-3 md:px-6 h-8 md:h-9 border border-slate-200/40 group">
+        <div className="flex items-center gap-2 md:gap-3 opacity-60 group-hover:opacity-100 transition-opacity duration-700 overflow-hidden">
+          <ShieldCheck className="w-3 md:w-3.5 h-3 md:h-3.5 text-blue-500 shrink-0" />
+          <span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.1em] md:tracking-[0.2em] uppercase truncate whitespace-nowrap text-slate-900 md:border-r border-slate-200 md:pr-4 md:mr-1">
+            {url.replace("varnish-cache://", "")}
+          </span>
+          <span className="text-[8px] font-mono text-slate-400 tracking-widest hidden xl:block">
+            VARNISH_TUNNEL // ALPHA_NODE_04
          </span>
        </div>
+
+        <div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse hidden sm:block shadow-[0_0_8px_rgba(74,222,128,0.4)]" />
      </div>

-      {/* Industrial Accent */}
-      <div className="flex items-center gap-2 opacity-30">
-        <div className="w-8 h-1 bg-slate-400 rounded-full" />
+      {/* Industrial Accent / Technical ID - Hidden on mobile */}
+      <div className="hidden md:flex flex-col items-end opacity-20 pointer-events-none select-none">
+        <div className="text-[6px] font-mono font-bold tracking-widest uppercase mb-0.5">
+          SECURE_LINK // ID: VARNISH_4X
+        </div>
+        <div className="w-12 h-0.5 bg-slate-900 rounded-full" />
      </div>
    </div>
  );
 };

+BrowserChromeComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+  minimal: PropTypes.bool,
+};
+
+const BrowserChrome = React.memo(BrowserChromeComponent);
+
+BrowserChrome.displayName = "BrowserChrome";
+
 export const IframeSection: React.FC<IframeSectionProps> = ({
  src,
  title,
@@ -78,12 +127,18 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
  delay = 0,
  noScale = false,
  dynamicGlow = true,
+  minHeight = 400,
+  mobileWidth = 390,
 }) => {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const iframeRef = React.useRef<HTMLIFrameElement>(null);
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const [scale, setScale] = React.useState(1);
+  const [activeInternalWidth, setActiveInternalWidth] =
+    React.useState(desktopWidth);
  const [isLoading, setIsLoading] = React.useState(true);
+  const [isIframeLoaded, setIsIframeLoaded] = React.useState(false);
+  const [isMinTimePassed, setIsMinTimePassed] = React.useState(false);
  const [glowColors, setGlowColors] = React.useState<string[]>([
    "rgba(148, 163, 184, 0.1)",
    "rgba(148, 163, 184, 0.1)",
@@ -97,28 +152,52 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
    isScrollable: false,
  });

-  // Scaling Logic
+  const [headerHeightPx, setHeaderHeightPx] = React.useState(0);
+
+  // Responsive Header Height Calculation
+  React.useEffect(() => {
+    if (browserFrame && !minimal) {
+      const updateHeaderHeight = () => {
+        setHeaderHeightPx(window.innerWidth < 768 ? 48 : 56);
+      };
+      updateHeaderHeight();
+      window.addEventListener("resize", updateHeaderHeight);
+      return () => window.removeEventListener("resize", updateHeaderHeight);
+    } else {
+      setHeaderHeightPx(0);
+    }
+  }, [browserFrame, minimal]);
+
+  // Scaling & Adaptive Viewport Logic
  React.useEffect(() => {
    if (!containerRef.current || noScale) {
      setScale(1);
+      setActiveInternalWidth(desktopWidth);
      return;
    }

-    const updateScale = () => {
+    const updateDimensions = () => {
      if (containerRef.current) {
-        const currentWidth = containerRef.current.offsetWidth;
-        if (currentWidth > 0) {
-          const newScale = zoom || currentWidth / desktopWidth;
+        const containerWidth = containerRef.current.offsetWidth;
+        if (containerWidth > 0) {
+          // Adaptive threshold: Switch to mobile width if container is small
+          const useMobile = containerWidth < 500;
+          const internalWidth = useMobile ? mobileWidth : desktopWidth;
+
+          setActiveInternalWidth(internalWidth);
+
+          // Calculate scale based on the active target width
+          const newScale = zoom || containerWidth / internalWidth;
          setScale(newScale);
        }
      }
    };

-    updateScale();
-    const observer = new ResizeObserver(updateScale);
+    updateDimensions();
+    const observer = new ResizeObserver(updateDimensions);
    observer.observe(containerRef.current);
    return () => observer.disconnect();
-  }, [desktopWidth, zoom, noScale]);
+  }, [desktopWidth, mobileWidth, zoom, noScale]);

  const updateScrollState = React.useCallback(() => {
    try {
@@ -178,8 +257,6 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
    } catch (e) {}
  }, [dynamicGlow, offsetY, updateScrollState]);

-  const headerHeightPx = browserFrame && !minimal ? 56 : 0;
-
  // Height parse helper
  const parseNumericHeight = (h: string | number) => {
    if (typeof h === "number") return h;
@@ -201,8 +278,57 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
        : finalScaledHeight
          ? `${finalScaledHeight + headerHeightPx}px`
          : `calc(${height} + ${headerHeightPx}px)`,
+    minHeight: minHeight ? `${minHeight}px` : undefined,
  };

+  const [loadingPhase, setLoadingPhase] = React.useState(0);
+  const loadingPhases = [
+    "DETERMINING ROUTE",
+    "INITIALIZING HANDSHAKE",
+    "ESTABLISHING ENCRYPTED LINK",
+    "SYNCING ASSETS",
+    "FINALIZING...",
+  ];
+
+  // 1. Safety Trigger: Force-stop loading after 2.5s no matter what
+  React.useEffect(() => {
+    if (!isLoading) return;
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2500);
+    return () => clearTimeout(timer);
+  }, [isLoading]);
+
+  // 2. Sync Trigger: Cleanup when BOTH phases and iframe load complete
+  React.useEffect(() => {
+    if (!isLoading) return;
+
+    // Early exit: if iframe is already loaded, we only need the first 2 "handshake" phases
+    const phasesRequired = isIframeLoaded
+      ? loadingPhases.length - 2
+      : loadingPhases.length - 1;
+
+    if (loadingPhase >= phasesRequired) {
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading, isIframeLoaded, loadingPhase, loadingPhases.length]);
+
+  // 3. Phase Incrementer (Faster: 400ms)
+  React.useEffect(() => {
+    if (!isLoading) return;
+    const interval = setInterval(() => {
+      setLoadingPhase((prev) => {
+        if (prev < loadingPhases.length - 1) return prev + 1;
+        clearInterval(interval);
+        return prev;
+      });
+    }, 400);
+    return () => clearInterval(interval);
+  }, [isLoading, loadingPhases.length]);
+
  return (
    <div
      className={cn(
@@ -231,11 +357,12 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
      <div
        ref={containerRef}
        className={cn(
-          "w-full relative transition-[transform,shadow,scale] duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] flex flex-col z-10",
+          "w-full relative flex flex-col z-10",
          minimal ? "bg-transparent" : "bg-slate-50",
          !minimal &&
            "rounded-[2.5rem] border border-slate-200/50 shadow-[0_80px_160px_-40px_rgba(0,0,0,0.18),0_0_1px_rgba(0,0,0,0.1)]",
-          perspective && "hover:scale-[1.03] hover:-translate-y-3",
+          perspective &&
+            "hover:scale-[1.03] hover:-translate-y-3 transition-[transform,shadow,scale] duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)]",
          "overflow-hidden",
        )}
        style={chassisStyle}
@@ -266,94 +393,130 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
          />
        )}

-        {/* Scaled Viewport Container */}
-        <div className="flex-1 relative overflow-hidden bg-slate-50/50">
-          {/* Loader Overlay - Now scoped to viewport */}
-          {isLoading && (
-            <div className="absolute inset-0 flex items-center justify-center bg-white/60 backdrop-blur-xl z-50 transition-opacity duration-700">
-              <div className="flex flex-col items-center gap-4">
-                <div className="w-12 h-12 border-[3px] border-slate-100 border-t-slate-900 rounded-full animate-spin" />
-                <MonoLabel className="text-[10px] text-slate-400 animate-pulse uppercase tracking-[0.2em]">
-                  Establishing Connection
-                </MonoLabel>
-              </div>
-            </div>
-          )}
+        {/* Scaled Viewport Container - Solid bg prevents gray flicker */}
+        <div className="flex-1 relative overflow-hidden bg-white">
+          {/* Artificial Loader Overlay */}
+          <AnimatePresence>
+            {isLoading && (
+              <motion.div
+                initial={{ opacity: 1 }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.6, ease: [0.23, 1, 0.32, 1] },
+                }}
+                className="absolute inset-0 flex items-center justify-center bg-white/95 backdrop-blur-3xl z-50 pointer-events-none transform-gpu"
+              >
+                {/* Static Binary Matrix - Stop redundant re-paints */}
+                <div
+                  className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[8px] p-4 flex flex-col gap-1 overflow-hidden"
+                  aria-hidden="true"
+                >
+                  {Array.from({ length: 24 }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="whitespace-nowrap tracking-[0.5em] opacity-50"
+                    >
+                      {"01011010010110101101011010101011010101011010101101010101101010"
+                        .split("")
+                        .join(" ")}
+                    </div>
+                  ))}
+                </div>
+
+                <div className="flex flex-col items-center gap-6 relative z-10 w-full max-w-xs px-8">
+                  <div className="w-full h-1 bg-slate-100 rounded-full overflow-hidden">
+                    <motion.div
+                      initial={{ width: 0 }}
+                      animate={{
+                        width: `${((loadingPhase + 1) / loadingPhases.length) * 100}%`,
+                      }}
+                      className="h-full bg-slate-900"
+                    />
+                  </div>
+
+                  <div className="flex flex-col items-center gap-2">
+                    <MonoLabel className="text-[10px] text-slate-900 font-bold uppercase tracking-[0.3em] flex items-center gap-2">
+                      <span className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
+                      {loadingPhases[loadingPhase]}
+                    </MonoLabel>
+                    <Label className="text-[8px] text-slate-400 font-mono uppercase tracking-widest">
+                      Varnish_Tunnel // Alpha_Node
+                    </Label>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
          <div
            className={cn(
-              "transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] origin-top-left absolute left-0 right-0",
+              "transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] origin-top-left absolute left-0 right-0 transform-gpu",
              noScale && "relative w-full h-full",
            )}
            style={{
-              width: noScale ? "100%" : `${desktopWidth}px`,
+              width: noScale ? "100%" : `${activeInternalWidth}px`,
              transform: noScale ? "none" : `scale(${scale})`,
              height: noScale ? "100%" : `${100 / scale}%`,
+              willChange: "opacity",
            }}
          >
-            <iframe
-              ref={iframeRef}
-              src={src}
-              scrolling={allowScroll ? "yes" : "no"}
-              className={cn(
-                "w-full border-none transition-all duration-700 no-scrollbar relative z-0",
-                isLoading ? "opacity-0 scale-95" : "opacity-100 scale-100",
-              )}
-              onLoad={(e) => {
-                setIsLoading(false);
-                try {
-                  const iframe = e.currentTarget;
-                  if (iframe.contentDocument) {
-                    const style = iframe.contentDocument.createElement("style");
-                    style.textContent = `
-                                            *::-webkit-scrollbar { display: none !important; }
-                                            * { -ms-overflow-style: none !important; scrollbar-width: none !important; }
-                                            body { background: transparent !important; }
-                                        `;
-                    iframe.contentDocument.head.appendChild(style);
-                    setTimeout(updateAmbilight, 600);
+            <motion.div
+              initial={false}
+              animate={{
+                opacity: isLoading ? 0 : 1,
+              }}
+              transition={{
+                duration: 0.6,
+                ease: [0.23, 1, 0.32, 1],
+              }}
+              className="w-full h-full relative z-0"
+            >
+              <iframe
+                ref={iframeRef}
+                src={src}
+                scrolling={allowScroll ? "yes" : "no"}
+                className="w-full h-full border-none no-scrollbar"
+                onLoad={(e) => {
+                  setIsIframeLoaded(true);
+                  try {
+                    const iframe = e.currentTarget;
+                    if (iframe.contentDocument) {
+                      const style =
+                        iframe.contentDocument.createElement("style");
+                      style.textContent = `
+                                              *::-webkit-scrollbar { display: none !important; }
+                                              * { -ms-overflow-style: none !important; scrollbar-width: none !important; }
+                                              body { background: transparent !important; }
+                                          `;
+                      iframe.contentDocument.head.appendChild(style);
+                      setTimeout(updateAmbilight, 600);

-                    const onScroll = () => {
-                      requestAnimationFrame(updateAmbilight);
-                      updateScrollState();
-                    };
+                      const onScroll = () => {
+                        requestAnimationFrame(updateAmbilight);
+                        updateScrollState();
+                      };

-                    iframe.contentWindow?.addEventListener("scroll", onScroll, {
-                      passive: true,
-                    });
+                      iframe.contentWindow?.addEventListener(
+                        "scroll",
+                        onScroll,
+                        {
+                          passive: true,
+                        },
+                      );
+                    }
+                  } catch (_e) {
+                    // ignore
                  }
-
-                  iframe.contentWindow?.addEventListener(
-                    "wheel",
-                    (e) => {
-                      const { deltaY } = e as WheelEvent;
-                      const doc = iframe.contentDocument?.documentElement;
-                      if (!doc) return;
-                      const scrollTop = doc.scrollTop;
-                      const isAtTop = scrollTop <= 0;
-                      const isAtBottom =
-                        scrollTop + doc.clientHeight >= doc.scrollHeight - 1;
-                      if (
-                        (isAtTop && deltaY < 0) ||
-                        (isAtBottom && deltaY > 0)
-                      ) {
-                        window.scrollBy({ top: deltaY, behavior: "auto" });
-                      }
-                    },
-                    { passive: true },
-                  );
-                } catch (_e) {
-                  // ignore
-                }
-              }}
-              style={{
-                transform: `translateY(-${offsetY}px)`,
-                height: `calc(100% + ${offsetY}px)`,
-                pointerEvents: allowScroll ? "auto" : "none",
-                width: "calc(100% + 20px)", // Bleed for seamless edge
-                marginLeft: "-10px",
-              }}
-              title={title || "Project Display"}
-            />
+                }}
+                style={{
+                  transform: `translateY(-${offsetY}px)`,
+                  height: `calc(100% + ${offsetY}px)`,
+                  pointerEvents: allowScroll ? "auto" : "none",
+                  width: "calc(100% + 20px)", // Bleed for seamless edge
+                  marginLeft: "-10px",
+                }}
+                title={title || "Project Display"}
+              />
+            </motion.div>
          </div>

          {/* Custom Industrial Scroll Indicator */}
@@ -380,10 +543,6 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
            </div>
          )}
        </div>
-
-        {!allowScroll && (
-          <div className="absolute inset-x-0 bottom-0 top-14 pointer-events-auto cursor-default z-20" />
-        )}
      </div>
    </div>
  );
--- a/apps/web/src/components/Layout.tsx
+++ b/apps/web/src/components/Layout.tsx
@@ -1,63 +1,105 @@
-import * as React from 'react';
-import { cn } from '../utils/cn';
+"use client";
+
+import * as React from "react";
+import { cn } from "../utils/cn";

 export const BackgroundGrid: React.FC = () => (
-  <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.01]" style={{
-    backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
-    backgroundSize: '60px 60px'
-  }} />
+  <div className="fixed inset-0 pointer-events-none -z-20" aria-hidden="true">
+    <div
+      className="absolute inset-0 opacity-[0.015]"
+      style={{
+        backgroundImage: `
+          linear-gradient(#94a3b8 1px, transparent 1px),
+          linear-gradient(90deg, #94a3b8 1px, transparent 1px)
+        `,
+        backgroundSize: "80px 80px",
+      }}
+    />
+  </div>
 );

 interface CardProps {
  children: React.ReactNode;
  className?: string;
-  variant?: 'white' | 'dark' | 'gray';
+  variant?: "white" | "dark" | "gray" | "glass";
  hover?: boolean;
-  padding?: 'none' | 'small' | 'normal' | 'large';
+  padding?: "none" | "small" | "normal" | "large";
+  techBorder?: boolean;
 }

-export const Card: React.FC<CardProps> = ({ 
-  children, 
-  className = "", 
-  variant = 'white',
+export const Card: React.FC<CardProps> = ({
+  children,
+  className = "",
+  variant = "white",
  hover = true,
-  padding = 'normal'
+  padding = "normal",
+  techBorder = false,
 }) => {
  const variants = {
-    white: 'bg-white border-slate-100 text-slate-900 shadow-sm',
-    dark: 'bg-slate-900 border-white/5 text-white shadow-xl',
-    gray: 'bg-slate-50/50 border-slate-100 text-slate-900'
+    white: "bg-white border-slate-100 text-slate-900 shadow-sm",
+    dark: "bg-slate-900 border-white/5 text-white shadow-xl",
+    gray: "bg-slate-50/50 border-slate-100 text-slate-900",
+    glass: "glass text-slate-900",
  };

  const paddings = {
-    none: 'p-0',
-    small: 'p-6 md:p-8',
-    normal: 'p-8 md:p-10',
-    large: 'p-10 md:p-12'
+    none: "p-0",
+    small: "p-6 md:p-8",
+    normal: "p-8 md:p-10",
+    large: "p-10 md:p-12",
  };

+  const [hexId, setHexId] = React.useState("0x0000");
+
+  React.useEffect(() => {
+    setHexId(
+      `0x${Math.floor(Math.random() * 0xffff)
+        .toString(16)
+        .padStart(4, "0")
+        .toUpperCase()}`,
+    );
+  }, []);
+
  return (
-    <div className={cn(
-      "rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out",
-      variants[variant],
-      paddings[padding],
-      hover ? 'hover:border-slate-200 hover:shadow-md' : '',
-      className
-    )}>
+    <div
+      className={cn(
+        "rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out relative overflow-hidden group/card",
+        variants[variant],
+        paddings[padding],
+        hover ? "hover:border-slate-200 hover:shadow-md" : "",
+        techBorder ? "tech-border" : "",
+        className,
+      )}
+    >
+      {/* Binary corner accent on hover */}
+      {hover && (
+        <span
+          className="absolute top-3 right-3 text-[7px] font-mono tracking-widest opacity-0 group-hover/card:opacity-100 transition-opacity duration-500 select-none pointer-events-none"
+          style={{
+            color:
+              variant === "dark"
+                ? "rgba(255,255,255,0.1)"
+                : "rgba(148,163,184,0.2)",
+          }}
+          aria-hidden="true"
+        >
+          {hexId}
+        </span>
+      )}
      {children}
    </div>
  );
 };

-export const Container: React.FC<{ children: React.ReactNode; className?: string; variant?: 'narrow' | 'normal' | 'wide' }> = ({ 
-  children, 
-  className = "", 
-  variant = 'normal' 
-}) => {
+export const Container: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+  variant?: "narrow" | "normal" | "wide";
+}> = ({ children, className = "", variant = "normal" }) => {
  const variants = {
-    narrow: 'max-w-4xl',
-    normal: 'max-w-6xl',
-    wide: 'max-w-7xl'
+    narrow: "max-w-4xl",
+    normal: "max-w-6xl",
+    wide: "max-w-7xl",
  };

  return (
--- a/apps/web/src/components/Marker.tsx
+++ b/apps/web/src/components/Marker.tsx
@@ -36,7 +36,7 @@ export const Marker: React.FC<MarkerProps> = ({
        style={{ backgroundColor: color }}
        aria-hidden="true"
      />
-      {children}
+      <span className="relative z-10 text-slate-900">{children}</span>
    </span>
  );
 };
--- a/apps/web/src/components/Mermaid.tsx
+++ b/apps/web/src/components/Mermaid.tsx
@@ -1,19 +1,23 @@
-'use client';
+"use client";

-import React, { useEffect, useRef, useState } from 'react';
-import mermaid from 'mermaid';
+import React, { useEffect, useRef, useState } from "react";
+import mermaid from "mermaid";

 interface MermaidProps {
  graph: string;
  id?: string;
 }

+import { CodeWindow } from "./Effects/CodeWindow";
+
 export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
  const [id, setId] = useState<string | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
-    setId(providedId || `mermaid-${Math.random().toString(36).substring(2, 11)}`);
+    setId(
+      providedId || `mermaid-${Math.random().toString(36).substring(2, 11)}`,
+    );
  }, [providedId]);
  const [isRendered, setIsRendered] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -21,17 +25,17 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
  useEffect(() => {
    mermaid.initialize({
      startOnLoad: false,
-      theme: 'default',
+      theme: "default",
      darkMode: false,
      themeVariables: {
-        fontFamily: 'Inter, system-ui, sans-serif',
-        fontSize: '16px',
-        primaryColor: '#ffffff',
-        nodeBorder: '#e2e8f0',
-        mainBkg: '#ffffff',
-        lineColor: '#cbd5e1',
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontSize: "16px",
+        primaryColor: "#ffffff",
+        nodeBorder: "#e2e8f0",
+        mainBkg: "#ffffff",
+        lineColor: "#cbd5e1",
      },
-      securityLevel: 'loose',
+      securityLevel: "loose",
    });

    const render = async () => {
@@ -41,8 +45,8 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
          containerRef.current.innerHTML = svg;
          setIsRendered(true);
        } catch (err) {
-          console.error('Mermaid rendering failed:', err);
-          setError('Failed to render diagram. Please check the syntax.');
+          console.error("Mermaid rendering failed:", err);
+          setError("Failed to render diagram. Please check the syntax.");
          setIsRendered(true);
        }
      }
@@ -57,19 +61,11 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {

  return (
    <div className="mermaid-wrapper my-8 not-prose">
-      <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-500 hover:border-slate-400">
-        <div className="px-4 py-3 border-b border-slate-100 bg-white flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <svg className="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-            </svg>
-            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Diagram</span>
-          </div>
-        </div>
-        <div className="mermaid-container p-8 md:p-12 overflow-x-auto flex justify-center bg-white">
-          <div 
+      <CodeWindow title="Diagram" className="max-w-4xl" minHeight="300px">
+        <div className="flex justify-center bg-white p-4">
+          <div
            ref={containerRef}
-            className={`mermaid transition-opacity duration-500 w-full max-w-4xl ${isRendered ? 'opacity-100' : 'opacity-0'}`}
+            className={`mermaid transition-opacity duration-500 w-full max-w-4xl ${isRendered ? "opacity-100" : "opacity-0"}`}
            id={id}
          >
            {error ? (
@@ -81,7 +77,7 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
            )}
          </div>
        </div>
-      </div>
+      </CodeWindow>
    </div>
  );
 };
--- a/apps/web/src/components/Reveal.tsx
+++ b/apps/web/src/components/Reveal.tsx
@@ -19,8 +19,8 @@ export const Reveal: React.FC<RevealProps> = ({
  delay = 0.25,
  className = "",
  direction = "up",
-  scale = 1,
-  blur = false,
+  scale = 0.98,
+  blur = true,
 }) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-10%" });
@@ -35,15 +35,17 @@ export const Reveal: React.FC<RevealProps> = ({
  const variants: Variants = {
    hidden: {
      opacity: 0,
-      y: direction === "up" ? 10 : direction === "down" ? -10 : 0,
-      x: direction === "left" ? 10 : direction === "right" ? -10 : 0,
+      y: direction === "up" ? 15 : direction === "down" ? -15 : 0,
+      x: direction === "left" ? 15 : direction === "right" ? -15 : 0,
      scale: scale !== 1 ? scale : 1,
+      filter: blur ? "blur(4px)" : "none",
    },
    visible: {
      opacity: 1,
      y: 0,
      x: 0,
      scale: 1,
+      filter: "none",
    },
  };

--- a/apps/web/src/components/Section.tsx
+++ b/apps/web/src/components/Section.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react';
-import { Reveal } from './Reveal';
-import { Label } from './Typography';
-import { cn } from '../utils/cn';
+import * as React from "react";
+import { Reveal } from "./Reveal";
+import { Label } from "./Typography";
+import { cn } from "../utils/cn";
+import { GlitchText } from "./GlitchText";

 interface SectionProps {
  number?: string;
@@ -9,11 +10,12 @@ interface SectionProps {
  children: React.ReactNode;
  className?: string;
  delay?: number;
-  variant?: 'white' | 'gray';
+  variant?: "white" | "gray" | "glass";
  borderTop?: boolean;
  borderBottom?: boolean;
-  containerVariant?: 'narrow' | 'normal' | 'wide';
+  containerVariant?: "narrow" | "normal" | "wide";
  illustration?: React.ReactNode;
+  effects?: React.ReactNode;
 }

 export const Section: React.FC<SectionProps> = ({
@@ -22,25 +24,62 @@ export const Section: React.FC<SectionProps> = ({
  children,
  className = "",
  delay = 0,
-  variant = 'white',
+  variant = "white",
  borderTop = false,
  borderBottom = false,
-  containerVariant = 'narrow',
+  containerVariant = "narrow",
  illustration,
+  effects,
 }) => {
-  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
-  const borderTopClass = borderTop ? 'border-t border-slate-100' : '';
-  const borderBottomClass = borderBottom ? 'border-b border-slate-100' : '';
-  const containerClass = containerVariant === 'wide' ? 'wide-container' : containerVariant === 'normal' ? 'container' : 'narrow-container';
+  const bgClass = {
+    white: "bg-white",
+    gray: "bg-slate-50/50",
+    glass: "glass-subtle",
+  }[variant];
+
+  const borderTopClass = borderTop ? "border-t border-slate-100" : "";
+  const borderBottomClass = borderBottom ? "border-b border-slate-100" : "";
+  const containerClass =
+    containerVariant === "wide"
+      ? "wide-container"
+      : containerVariant === "normal"
+        ? "container"
+        : "narrow-container";

  return (
-    <section className={cn(
-      "relative py-24 md:py-40 group overflow-hidden",
-      bgClass,
-      borderTopClass,
-      borderBottomClass,
-      className
-    )}>
+    <section
+      className={cn(
+        "relative py-24 md:py-40 group overflow-hidden",
+        bgClass,
+        borderTopClass,
+        borderBottomClass,
+        className,
+      )}
+    >
+      {/* Tech divider with binary accent */}
+      {borderTop && (
+        <div className="absolute top-0 left-0 right-0 overflow-hidden">
+          <div
+            className="h-px w-full"
+            style={{
+              background:
+                "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.2) 20%, rgba(191, 206, 228, 0.15) 50%, rgba(148, 163, 184, 0.2) 80%, transparent 100%)",
+            }}
+          />
+          <div className="flex justify-center mt-2">
+            <span
+              className="text-[7px] font-mono tracking-[0.5em] text-slate-200 select-none"
+              aria-hidden="true"
+            >
+              01001101 01001001 01001110
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Optional effects layer */}
+      {effects}
+
      <div className={cn("relative z-10", containerClass)}>
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
          {/* Sidebar: Number & Title */}
@@ -48,14 +87,25 @@ export const Section: React.FC<SectionProps> = ({
            <div className="md:sticky md:top-40 space-y-8">
              {number && (
                <Reveal delay={delay}>
-                  <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter">
+                  <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
                    {number}
+                    {/* Subtle binary overlay on number */}
+                    <span
+                      className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
+                      aria-hidden="true"
+                    >
+                      {parseInt(number || "0")
+                        .toString(2)
+                        .padStart(8, "0")}
+                    </span>
                  </span>
                </Reveal>
              )}
              {title && (
                <Reveal delay={delay + 0.1}>
                  <div className="flex items-center gap-4">
+                    {/* Animated dot indicator */}
+                    <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
                    <Label className="text-slate-900 text-[10px] tracking-[0.4em]">
                      {title}
                    </Label>
@@ -73,9 +123,7 @@ export const Section: React.FC<SectionProps> = ({
          </div>

          {/* Main Content */}
-          <div className="md:col-span-9">
-            {children}
-          </div>
+          <div className="md:col-span-9">{children}</div>
        </div>
      </div>
    </section>