Install OpenAI Codex

codexopenaigetting-startedsetup

by Steffen Plunder

›_ claude — Round 1

←→ Navigate steps

Scroll Browse the session

P Auto-play

claude — Round 1

% curl -fsSL https://github.com/openai/codex/releases/latest/download/install.sh | sh

✱ Codex CLI installed

claude — Round 2

% codex login

✱ Authenticated via browser sign-in

claude — Round 3

% cd path/to/your/project && codex

Welcome to Codex!
Working directory: /path/to/your/project

Type a message to get started.

claude — Round 4

›

Create a small webpage showing a simulation of a 2D brownian motion with trace

●

Brownian Motion Trace

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Brownian Motion Trace</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='%23244b5a'/%3E%3C/svg%3E">
  <style>
    :root {
      --page: #07100f;
      --ink: #edf8f4;
      --muted: #8ca19c;
      --line: rgba(164, 191, 184, 0.22);
      --copper: #ff9c5f;
      --copper-dark: #d66b33;
      --cyan: #73e0ff;
      --surface: rgba(9, 21, 20, 0.88);
      --surface-strong: rgba(12, 31, 30, 0.96);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 10%, rgba(115, 224, 255, 0.15), transparent 28rem),
        radial-gradient(circle at 82% 88%, rgba(255, 156, 95, 0.1), transparent 24rem),
        linear-gradient(135deg, #030707 0%, var(--page) 55%, #0d1718 100%);
      font-family: Georgia, "Times New Roman", serif;
    }

    main {
      min-height: 100vh;
      min-height: 100dvh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: clamp(12px, 2vw, 18px);
      padding: clamp(14px, 3vw, 38px);
    }

    header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: clamp(14px, 3vw, 28px);
      animation: rise 650ms ease both;
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 5vw, 4.8rem);
      line-height: 0.95;
      letter-spacing: 0;
      max-width: 760px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(72px, 1fr));
      gap: 10px;
      min-width: min(420px, 100%);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .stat {
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }

    .stat span {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .stat strong {
      display: block;
      margin-top: 4px;
      font-size: 1rem;
      font-weight: 700;
    }

    .stage {
      position: relative;
      min-height: clamp(320px, 58dvh, 720px);
      border: 1px solid rgba(164, 191, 184, 0.22);
      background:
        radial-gradient(circle at 50% 50%, rgba(115, 224, 255, 0.06), transparent 18rem),
        var(--surface);
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
      animation: settle 800ms 120ms ease both;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      min-height: clamp(320px, 58dvh, 720px);
      cursor: crosshair;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(14px, 3vw, 24px);
      animation: rise 650ms 220ms ease both;
    }

    .buttons,
    .sliders {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    button {
      min-height: 42px;
      border: 1px solid rgba(237, 248, 244, 0.76);
      background: var(--ink);
      color: #06100f;
      padding: 0 16px;
      font: 700 0.88rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: transform 160ms ease, background 160ms ease, color 160ms ease;
    }

    button.secondary {
      background: transparent;
      color: var(--ink);
    }

    button:hover {
      transform: translateY(-1px);
      border-color: var(--copper);
      background: var(--copper);
      color: #160a04;
    }

    button:focus-visible,
    input:focus-visible {
      outline: 3px solid rgba(115, 224, 255, 0.42);
      outline-offset: 3px;
    }

    label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    input[type="range"] {
      width: min(220px, 42vw);
      accent-color: var(--copper);
    }

    input[type="range"]::-webkit-slider-runnable-track {
      background: rgba(237, 248, 244, 0.24);
      border-radius: 999px;
      height: 6px;
    }

    input[type="range"]::-webkit-slider-thumb {
      margin-top: -5px;
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes settle {
      from {
        opacity: 0;
        transform: scale(0.985);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @media (max-width: 900px) {
      main {
        grid-template-rows: auto minmax(0, 1fr) auto;
      }

      header,
      .controls {
        align-items: stretch;
        flex-direction: column;
      }

      .stats {
        grid-template-columns: repeat(3, 1fr);
      }

      .sliders {
        align-items: stretch;
      }

      label,
      input[type="range"] {
        width: 100%;
      }
    }

    @media (max-width: 560px) {
      main {
        gap: 12px;
        padding: 14px;
      }

      h1 {
        font-size: clamp(1.8rem, 9vw, 2.9rem);
      }

      .stats {
        gap: 8px;
      }

      .stat strong {
        font-size: 0.9rem;
      }

      .stage,
      canvas {
        min-height: min(58dvh, 520px);
      }

      .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      button {
        width: 100%;
      }
    }

    @media (max-height: 640px) and (min-width: 760px) {
      main {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        grid-template-rows: auto minmax(140px, 1fr) auto;
        gap: 10px;
        padding: 12px clamp(18px, 3vw, 28px);
        overflow: hidden;
      }

      header,
      .controls {
        align-items: end;
        flex-direction: row;
      }

      h1 {
        font-size: clamp(1.7rem, 4vw, 2.5rem);
        max-width: 520px;
      }

      .stage,
      canvas {
        min-height: 0;
      }

      .stage {
        height: 100%;
      }

      .sliders {
        flex-wrap: nowrap;
      }

      input[type="range"] {
        width: min(220px, 24vw);
      }
    }
  </style>
</head>
<body>
  <main>
    <header>
      <h1>Brownian motion with trace</h1>
      <section class="stats" aria-label="Simulation readings">
        <div class="stat">
          <span>Steps</span>
          <strong id="steps">0</strong>
        </div>
        <div class="stat">
          <span>Distance</span>
          <strong id="distance">0.0</strong>
        </div>
        <div class="stat">
          <span>Spread</span>
          <strong id="spread">0.0</strong>
        </div>
      </section>
    </header>

    <section class="stage" aria-label="Brownian motion simulation">
      <canvas id="canvas"></canvas>
    </section>

    <section class="controls" aria-label="Simulation controls">
      <div class="buttons">
        <button id="toggle" type="button">Pause</button>
        <button class="secondary" id="reset" type="button">Reset</button>
      </div>
      <div class="sliders">
        <label>
          Step size
          <input id="stepSize" type="range" min="1" max="18" value="7">
        </label>
        <label>
          Trace length
          <input id="traceLength" type="range" min="80" max="4000" value="1800">
        </label>
      </div>
    </section>
  </main>

  <script>
    const canvas = document.querySelector("#canvas");
    const context = canvas.getContext("2d");
    const stepsText = document.querySelector("#steps");
    const distanceText = document.querySelector("#distance");
    const spreadText = document.querySelector("#spread");
    const toggleButton = document.querySelector("#toggle");
    const resetButton = document.querySelector("#reset");
    const stepInput = document.querySelector("#stepSize");
    const traceInput = document.querySelector("#traceLength");

    const state = {
      running: true,
      steps: 0,
      totalDistance: 0,
      point: { x: 0, y: 0 },
      origin: { x: 0, y: 0 },
      trace: []
    };

    function resize() {
      const rect = canvas.getBoundingClientRect();
      const scale = window.devicePixelRatio || 1;
      canvas.width = Math.floor(rect.width * scale);
      canvas.height = Math.floor(rect.height * scale);
      context.setTransform(scale, 0, 0, scale, 0, 0);
      reset();
    }

    function reset() {
      const rect = canvas.getBoundingClientRect();
      state.steps = 0;
      state.totalDistance = 0;
      state.origin = { x: rect.width / 2, y: rect.height / 2 };
      state.point = { ...state.origin };
      state.trace = [{ ...state.point }];
      draw();
      updateStats();
    }

    function step() {
      const rect = canvas.getBoundingClientRect();
      const stepSize = Number(stepInput.value);
      const angle = Math.random() * Math.PI * 2;
      const distance = stepSize * (0.25 + Math.random());
      const next = {
        x: state.point.x + Math.cos(angle) * distance,
        y: state.point.y + Math.sin(angle) * distance
      };

      if (next.x < 0 || next.x > rect.width) {
        next.x = Math.max(0, Math.min(rect.width, next.x));
      }

      if (next.y < 0 || next.y > rect.height) {
        next.y = Math.max(0, Math.min(rect.height, next.y));
      }

      state.totalDistance += Math.hypot(next.x - state.point.x, next.y - state.point.y);
      state.point = next;
      state.trace.push({ ...next });
      state.steps += 1;

      const maxTrace = Number(traceInput.value);
      if (state.trace.length > maxTrace) {
        state.trace.splice(0, state.trace.length - maxTrace);
      }
    }

    function drawGrid(width, height) {
      context.save();
      context.strokeStyle = "rgba(164, 191, 184, 0.12)";
      context.lineWidth = 1;

      for (let x = 0; x <= width; x += 36) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, height);
        context.stroke();
      }

      for (let y = 0; y <= height; y += 36) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(width, y);
        context.stroke();
      }

      context.restore();
    }

    function draw() {
      const rect = canvas.getBoundingClientRect();
      context.clearRect(0, 0, rect.width, rect.height);
      drawGrid(rect.width, rect.height);

      if (state.trace.length > 1) {
        for (let i = 1; i < state.trace.length; i += 1) {
          const opacity = i / state.trace.length;
          const previous = state.trace[i - 1];
          const current = state.trace[i];
          context.strokeStyle = `rgba(255, 156, 95, ${0.14 + opacity * 0.78})`;
          context.lineWidth = 1 + opacity * 2.2;
          context.beginPath();
          context.moveTo(previous.x, previous.y);
          context.lineTo(current.x, current.y);
          context.stroke();
        }
      }

      context.fillStyle = "rgba(115, 224, 255, 0.16)";
      context.beginPath();
      context.arc(state.origin.x, state.origin.y, 8, 0, Math.PI * 2);
      context.fill();

      context.fillStyle = "#73e0ff";
      context.beginPath();
      context.arc(state.point.x, state.point.y, 6, 0, Math.PI * 2);
      context.fill();
    }

    function updateStats() {
      const spread = Math.hypot(state.point.x - state.origin.x, state.point.y - state.origin.y);
      stepsText.textContent = state.steps.toLocaleString();
      distanceText.textContent = state.totalDistance.toFixed(1);
      spreadText.textContent = spread.toFixed(1);
    }

    function animate() {
      if (state.running) {
        for (let i = 0; i < 4; i += 1) {
          step();
        }
        draw();
        updateStats();
      }

      requestAnimationFrame(animate);
    }

    toggleButton.addEventListener("click", () => {
      state.running = !state.running;
      toggleButton.textContent = state.running ? "Pause" : "Resume";
    });

    resetButton.addEventListener("click", reset);
    traceInput.addEventListener("input", () => {
      const maxTrace = Number(traceInput.value);
      if (state.trace.length > maxTrace) {
        state.trace.splice(0, state.trace.length - maxTrace);
      }
    });

    window.addEventListener("resize", resize);
    resize();
    animate();
  </script>
</body>
</html>

●

▶ Webpage

claude — Round 5

›

Make it a dark theme and adapt the UI to screen size

●

codexopenaigetting-startedsetup