Showcase

ML/AI engineer portfolio website, built by Gemini 4 Argon

Hostedvia DaBenchOpenRouter
Running live in your browserNew tab
Cost to build
$0.063
Show the code the model wrote
HTML26,687 characters
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mira Kovač — Senior Machine Learning Engineer</title>
  <style>
    :root {
      /* Single green channel (RGB: 34, 238, 114) modulated strictly via alpha */
      --g: 34, 238, 114;
      --bg: #050806;

      --c-bright: rgba(var(--g), 1);
      --c-body: rgba(var(--g), 0.84);
      --c-muted: rgba(var(--g), 0.54);
      --c-dim: rgba(var(--g), 0.34);
      --c-border: rgba(var(--g), 0.24);
      --c-rule: rgba(var(--g), 0.14);
      --c-surface: rgba(var(--g), 0.04);
      --c-surface-active: rgba(var(--g), 0.11);

      /* One font family across the entire document */
      --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", "Fira Code",
        "Menlo", "Consolas", "Liberation Mono", monospace;

      /* Single consistent spacing rhythm based on a 24px (1.5rem) baseline unit */
      --u: 1.5rem;
      --u-half: 0.75rem;
      --u-quarter: 0.375rem;
      --u-2: 3rem;
      --u-3: 4.5rem;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 16px;
      background-color: var(--bg);
      color: var(--c-body);
      font-family: var(--font-mono);
      line-height: var(--u);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      selection-background-color: var(--c-bright);
    }

    ::selection {
      background: var(--c-bright);
      color: var(--bg);
    }

    body {
      min-height: 100vh;
      padding: var(--u-2) var(--u);
      background-image: linear-gradient(
        to bottom,
        rgba(var(--g), 0.02) 1px,
        transparent 1px
      );
      background-size: 100% var(--u);
    }

    .container {
      max-width: 52rem; /* 832px */
      margin: 0 auto;
    }

    /* System Telemetry Bar */
    .sys-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--u-half);
      padding-bottom: var(--u-half);
      margin-bottom: var(--u-2);
      border-bottom: 1px solid var(--c-rule);
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      color: var(--c-muted);
      text-transform: uppercase;
    }

    .sys-status {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .sys-dot {
      width: 6px;
      height: 6px;
      background-color: var(--c-bright);
      display: inline-block;
    }

    /* Header / Identity */
    header {
      margin-bottom: var(--u-3);
    }

    .identity-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--u-half);
      margin-bottom: var(--u-half);
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
      line-height: var(--u-2);
      letter-spacing: -0.02em;
      color: var(--c-bright);
    }

    .cursor {
      display: inline-block;
      width: 0.6ch;
      height: 1.15em;
      background-color: var(--c-bright);
      vertical-align: text-bottom;
      margin-left: 0.15rem;
      animation: blink 1.1s steps(1, end) infinite;
    }

    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    .role-line {
      font-size: 0.9375rem;
      color: var(--c-bright);
      margin-bottom: var(--u);
      letter-spacing: 0.01em;
    }

    .role-line span {
      color: var(--c-muted);
    }

    .summary {
      font-size: 0.875rem;
      color: var(--c-body);
      max-width: 66ch;
      border-left: 2px solid var(--c-border);
      padding-left: var(--u-half);
    }

    /* Section Architecture */
    section {
      margin-bottom: var(--u-3);
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: var(--u-half);
      margin-bottom: var(--u);
      padding-bottom: var(--u-quarter);
      border-bottom: 1px solid var(--c-rule);
    }

    .section-index {
      font-size: 0.75rem;
      color: var(--c-muted);
      letter-spacing: 0.08em;
    }

    h2 {
      font-size: 0.8125rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--c-bright);
    }

    .section-meta {
      margin-left: auto;
      font-size: 0.75rem;
      color: var(--c-muted);
    }

    /* 01 // Experience Vertical Timeline Keyed by Year */
    .timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--u-2);
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 8.5rem 1fr;
      position: relative;
      transition: opacity 0.2s ease;
    }

    /* Continuous Vertical Timeline Rail */
    .timeline-item::before {
      content: "";
      position: absolute;
      left: 7.25rem;
      top: 0.5rem;
      bottom: calc(-1 * var(--u-2) - 0.5rem);
      width: 1px;
      background-color: var(--c-border);
    }

    .timeline-item:last-child::before {
      bottom: 0.25rem;
    }

    .timeline-year {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--c-bright);
      letter-spacing: 0.02em;
      padding-right: var(--u);
      position: relative;
      user-select: none;
    }

    /* Square Node on Timeline Axis */
    .timeline-year::after {
      content: "";
      position: absolute;
      right: calc(1.25rem - 4px);
      top: 0.5rem;
      width: 7px;
      height: 7px;
      background-color: var(--bg);
      border: 1px solid var(--c-bright);
      transition: background-color 0.15s ease;
    }

    .timeline-item:first-child .timeline-year::after {
      background-color: var(--c-bright);
    }

    .timeline-item:hover .timeline-year::after {
      background-color: var(--c-bright);
    }

    .timeline-content {
      padding-left: var(--u-half);
    }

    .role-header {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: var(--u-half);
    }

    .role-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--c-bright);
    }

    .company-name {
      color: var(--c-body);
      font-weight: 400;
    }

    .role-loc {
      font-size: 0.75rem;
      color: var(--c-muted);
      letter-spacing: 0.04em;
    }

    .bullet-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--u-half);
    }

    .bullet-list li {
      position: relative;
      padding-left: 1.25rem;
      font-size: 0.875rem;
      color: var(--c-body);
    }

    .bullet-list li::before {
      content: ">";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--c-muted);
      font-weight: 600;
    }

    .metric {
      color: var(--c-bright);
      border-bottom: 1px dotted var(--c-border);
    }

    /* 02 // Skills — Flat Bordered Chips */
    .skills-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--u-half);
    }

    .skill-chip {
      appearance: none;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      color: var(--c-body);
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      line-height: var(--u);
      padding: 0.125rem var(--u-half);
      cursor: pointer;
      transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .skill-chip::before {
      content: "#";
      color: var(--c-muted);
    }

    .skill-chip:hover,
    .skill-chip:focus-visible {
      border-color: var(--c-bright);
      background: var(--c-surface-active);
      color: var(--c-bright);
      outline: none;
    }

    .skill-chip.active {
      background: var(--c-bright);
      color: var(--bg);
      border-color: var(--c-bright);
      font-weight: 600;
    }

    .skill-chip.active::before {
      color: var(--bg);
    }

    /* Highlight state when filtering by skill chip */
    .dimmed {
      opacity: 0.28;
    }

    /* 03 // Side Projects */
    .projects-list {
      display: flex;
      flex-direction: column;
      gap: var(--u-half);
    }

    .project-row {
      display: grid;
      grid-template-columns: 11rem 1fr auto;
      gap: var(--u-half);
      align-items: baseline;
      padding: var(--u-half);
      border: 1px solid var(--c-border);
      background: var(--c-surface);
      transition: border-color 0.15s ease, opacity 0.2s ease;
    }

    .project-row:hover {
      border-color: var(--c-bright);
    }

    .project-name {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--c-bright);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
    }

    .project-name::before {
      content: "./";
      color: var(--c-muted);
    }

    .project-desc {
      font-size: 0.8125rem;
      color: var(--c-body);
    }

    .project-lang {
      font-size: 0.75rem;
      color: var(--c-muted);
      border: 1px solid var(--c-rule);
      padding: 0 0.375rem;
      white-space: nowrap;
    }

    /* 04 // Publication */
    .pub-card {
      padding: var(--u-half);
      border: 1px solid var(--c-border);
      background: var(--c-surface);
      font-size: 0.875rem;
    }

    .pub-title {
      color: var(--c-bright);
      font-weight: 600;
      margin-bottom: var(--u-quarter);
    }

    .pub-meta {
      font-size: 0.8125rem;
      color: var(--c-body);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--u-half);
    }

    .pub-doi {
      color: var(--c-muted);
      font-size: 0.75rem;
    }

    /* 05 // Contact Row */
    .contact-section {
      margin-bottom: var(--u);
    }

    .contact-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--u-half);
      padding: var(--u-half);
      border: 1px solid var(--c-border);
      background: var(--c-surface);
      font-size: 0.8125rem;
    }

    .contact-item {
      color: var(--c-body);
      text-decoration: none;
      background: none;
      border: none;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      cursor: pointer;
      padding: 0.125rem 0.25rem;
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      transition: color 0.15s ease, background-color 0.15s ease;
    }

    .contact-item:hover,
    .contact-item:focus-visible {
      color: var(--bg);
      background-color: var(--c-bright);
      outline: none;
    }

    .contact-prefix {
      color: var(--c-muted);
    }

    .contact-item:hover .contact-prefix,
    .contact-item:focus-visible .contact-prefix {
      color: var(--bg);
    }

    .toast {
      font-size: 0.75rem;
      color: var(--c-bright);
      min-height: var(--u);
      margin-top: var(--u-quarter);
      letter-spacing: 0.04em;
    }

    /* Responsive Breakpoints down to phone width */
    @media (max-width: 640px) {
      body {
        padding: var(--u) var(--u-half);
      }

      h1 {
        font-size: 1.5rem;
        line-height: var(--u);
      }

      .timeline-item {
        grid-template-columns: 1fr;
        padding-left: var(--u);
      }

      .timeline-item::before {
        left: 3px;
        top: 0.5rem;
      }

      .timeline-year {
        padding-right: 0;
        margin-bottom: 0.25rem;
      }

      .timeline-year::after {
        left: calc(-1 * var(--u));
        right: auto;
        top: 0.5rem;
      }

      .timeline-content {
        padding-left: 0;
      }

      .project-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
      }

      .project-lang {
        justify-self: start;
        margin-top: 0.25rem;
      }

      .contact-row {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media print {
      :root {
        --bg: #ffffff;
        --c-bright: #000000;
        --c-body: #111111;
        --c-muted: #444444;
        --c-border: #888888;
        --c-rule: #cccccc;
        --c-surface: transparent;
      }
      body {
        background: none;
        padding: 0;
      }
      .cursor,
      .sys-bar {
        display: none;
      }
    }
  </style>
</head>
<body>
  <main class="container">
    <!-- Top System Telemetry -->
    <div class="sys-bar" aria-label="System telemetry">
      <span class="sys-status">
        <span class="sys-dot" aria-hidden="true"></span>
        SYS.CV // NODE: BERLIN_DE (52.5200°N, 13.4050°E)
      </span>
      <span>REV 2025.05 · UTF-8</span>
    </div>

    <!-- Persona Header -->
    <header>
      <div class="identity-row">
        <h1>MIRA KOVAČ<span class="cursor" aria-hidden="true"></span></h1>
        <span class="section-index">[ID: 0x4D4B]</span>
      </div>
      <p class="role-line">
        Senior Machine Learning Engineer <span>// Berlin, Germany</span>
      </p>
      <p class="summary">
        7+ years designing low-latency neural retrieval, ranking, and distributed training systems in production. Focused on sub-20ms inference at scale, hardware-aware model quantization, and counterfactual evaluation.
      </p>
    </header>

    <!-- 01 // Experience -->
    <section aria-labelledby="sec-exp">
      <div class="section-header">
        <span class="section-index">01 //</span>
        <h2 id="sec-exp" data-decode="EXPERIENCE">EXPERIENCE</h2>
        <span class="section-meta">2017 → PRESENT</span>
      </div>

      <div class="timeline">
        <!-- Role 1: Zalando -->
        <article class="timeline-item" data-tags="pytorch retrieval triton eval k8s">
          <div class="timeline-year">2022 — NOW</div>
          <div class="timeline-content">
            <div class="role-header">
              <h3 class="role-title">
                Senior Machine Learning Engineer <span class="company-name">@ Zalando SE</span>
              </h3>
              <span class="role-loc">BERLIN, DE</span>
            </div>
            <ul class="bullet-list">
              <li>
                Architected a two-tower neural retrieval system serving 50M+ active users across 25 markets, replacing lexical BM25 baselines and lifting session GMV by <span class="metric">+3.4% (p &lt; 0.001)</span> at <span class="metric">14ms p99</span> latency.
              </li>
              <li>
                Led INT8/FP16 post-training quantization and custom TensorRT/Triton execution pipelines for transformer re-rankers, cutting GPU fleet provisioning costs by <span class="metric">41% across 120× A10G nodes</span> with zero NDCG@10 degradation.
              </li>
              <li>
                Built an automated counterfactual off-policy evaluation framework (Doubly Robust &amp; clipped IPS estimators) over logged impression streams, shrinking candidate ranking validation cycles from 3 weeks to <span class="metric">48 hours</span>.
              </li>
            </ul>
          </div>
        </article>

        <!-- Role 2: Delivery Hero -->
        <article class="timeline-item" data-tags="pytorch fsdp k8s eval">
          <div class="timeline-year">2019 — 2022</div>
          <div class="timeline-content">
            <div class="role-header">
              <h3 class="role-title">
                Machine Learning Engineer <span class="company-name">@ Delivery Hero</span>
              </h3>
              <span class="role-loc">BERLIN, DE</span>
            </div>
            <ul class="bullet-list">
              <li>
                Designed and deployed a spatio-temporal Graph Neural Network (PyTorch Geometric) for real-time courier dispatch and ETA prediction across 400+ cities, reducing mean absolute delivery error by <span class="metric">11.8%</span> during peak dinner load.
              </li>
              <li>
                Engineered a low-latency streaming feature pipeline on Apache Flink and Redis Cluster ingesting <span class="metric">95,000 events/sec</span> to compute sub-second courier telemetry features with strict train-serve parity.
              </li>
              <li>
                Implemented continuous feature-drift telemetry using Population Stability Index (PSI) and automated shadow-deployment gates on Kubernetes, eliminating silent regressions during seasonal demand spikes.
              </li>
            </ul>
          </div>
        </article>

        <!-- Role 3: SoundCloud -->
        <article class="timeline-item" data-tags="pytorch retrieval fsdp rust">
          <div class="timeline-year">2017 — 2019</div>
          <div class="timeline-content">
            <div class="role-header">
              <h3 class="role-title">
                Machine Learning Engineer <span class="company-name">@ SoundCloud</span>
              </h3>
              <span class="role-loc">BERLIN, DE</span>
            </div>
            <ul class="bullet-list">
              <li>
                Trained collaborative metric learning and log-mel spectrogram CNN models over 200M+ tracks to solve cold-start audio discovery, increasing 7-day listener retention on newly uploaded tracks by <span class="metric">+6.2%</span>.
              </li>
              <li>
                Migrated offline batch recommendation workflows from legacy Spark MLlib jobs to distributed PyTorch DDP and Faiss (IVF-PQ) vector indices, compressing nightly embedding index builds from <span class="metric">9.5 hours to 38 minutes</span>.
              </li>
            </ul>
          </div>
        </article>
      </div>
    </section>

    <!-- 02 // Skills -->
    <section aria-labelledby="sec-skills">
      <div class="section-header">
        <span class="section-index">02 //</span>
        <h2 id="sec-skills" data-decode="CAPABILITIES">CAPABILITIES</h2>
        <span class="section-meta" id="filter-hint">[CLICK CHIP TO TRACE USAGE]</span>
      </div>

      <div class="skills-grid" role="group" aria-label="Technical skills filter">
        <button type="button" class="skill-chip" data-skill="pytorch">PyTorch / TorchScript</button>
        <button type="button" class="skill-chip" data-skill="triton">Triton &amp; TensorRT</button>
        <button type="button" class="skill-chip" data-skill="fsdp">Distributed Training (FSDP / DDP)</button>
        <button type="button" class="skill-chip" data-skill="retrieval">Two-Tower Retrieval &amp; Faiss</button>
        <button type="button" class="skill-chip" data-skill="cuda">CUDA &amp; Custom Kernels</button>
        <button type="button" class="skill-chip" data-skill="rust">Rust / PyO3 Bindings</button>
        <button type="button" class="skill-chip" data-skill="eval">Counterfactual Evaluation</button>
        <button type="button" class="skill-chip" data-skill="k8s">Kubernetes &amp; Ray</button>
      </div>
    </section>

    <!-- 03 // Side Projects -->
    <section aria-labelledby="sec-projects">
      <div class="section-header">
        <span class="section-index">03 //</span>
        <h2 id="sec-projects" data-decode="SIDE_PROJECTS">SIDE_PROJECTS</h2>
        <span class="section-meta">OPEN SOURCE</span>
      </div>

      <div class="projects-list">
        <div class="project-row" data-tags="cuda triton pytorch">
          <a href="#kv-quant" class="project-name" data-decode="kv-quant" onclick="return false;">kv-quant</a>
          <p class="project-desc">
            Zero-dependency C++20/CUDA library for grouped 4-bit asymmetric KV-cache quantization in autoregressive transformer decoding.
          </p>
          <span class="project-lang">CUDA / C++20</span>
        </div>

        <div class="project-row" data-tags="rust retrieval">
          <a href="#hnsw-mmap" class="project-name" data-decode="hnsw-mmap" onclick="return false;">hnsw-mmap</a>
          <p class="project-desc">
            Memory-mapped Rust implementation of Hierarchical Navigable Small World graphs supporting zero-copy concurrent reads for edge inference.
          </p>
          <span class="project-lang">Rust / PyO3</span>
        </div>

        <div class="project-row" data-tags="eval pytorch">
          <a href="#ips-bench" class="project-name" data-decode="ips-bench" onclick="return false;">ips-bench</a>
          <p class="project-desc">
            Reproducible synthetic benchmark suite for evaluating variance-reduction techniques in off-policy contextual bandit estimators.
          </p>
          <span class="project-lang">Python</span>
        </div>
      </div>
    </section>

    <!-- 04 // Publication -->
    <section aria-labelledby="sec-pub">
      <div class="section-header">
        <span class="section-index">04 //</span>
        <h2 id="sec-pub" data-decode="PUBLICATION">PUBLICATION</h2>
        <span class="section-meta">PEER-REVIEWED</span>
      </div>

      <article class="pub-card">
        <h3 class="pub-title">
          "Debiasing Position and Trust Cascades in Two-Stage Neural Retrieval via Doubly Robust Counterfactual Risk Minimization"
        </h3>
        <div class="pub-meta">
          <span>
            <strong>Kovač, M.</strong>, Lindqvist, H., &amp; Vance, S. · <em>Proc. 17th ACM Conference on Recommender Systems (RecSys '23)</em>, pp. 412–423.
          </span>
          <span class="pub-doi">DOI: 10.1145/3604915.3608819</span>
        </div>
      </article>
    </section>

    <!-- 05 // Contact Row -->
    <section class="contact-section" aria-labelledby="sec-contact">
      <div class="section-header">
        <span class="section-index">05 //</span>
        <h2 id="sec-contact" data-decode="TRANSMISSION">TRANSMISSION</h2>
        <span class="section-meta">ENCRYPTED / DIRECT</span>
      </div>

      <div class="contact-row">
        <button type="button" class="contact-item" data-copy="mira@kovac.ml" title="Click to copy email address">
          <span class="contact-prefix">MAIL:</span>mira@kovac.ml
        </button>
        <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="contact-item">
          <span class="contact-prefix">GH:</span>github.com/mirakovac
        </a>
        <a href="https://scholar.google.com" target="_blank" rel="noopener noreferrer" class="contact-item">
          <span class="contact-prefix">GS:</span>scholar/mkovac
        </a>
        <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="contact-item">
          <span class="contact-prefix">IN:</span>in/mirakovac
        </a>
        <button type="button" class="contact-item" data-copy="9F4A 8C21 D03E 77B4 11A9 5502 E8C0 4D4B" title="Click to copy PGP fingerprint">
          <span class="contact-prefix">PGP:</span>0x9F4A·8C21
        </button>
      </div>
      <div class="toast" id="toast" role="status" aria-live="polite"></div>
    </section>
  </main>

  <script>
    (function () {
      "use strict";

      /* 1. Interactive Skill Chip Filtering */
      const chips = document.querySelectorAll(".skill-chip");
      const filterables = document.querySelectorAll("[data-tags]");
      const filterHint = document.getElementById("filter-hint");
      let activeSkill = null;

      function applySkillFilter(skill) {
        if (activeSkill === skill) {
          activeSkill = null;
        } else {
          activeSkill = skill;
        }

        chips.forEach((chip) => {
          const isMatch = chip.getAttribute("data-skill") === activeSkill;
          chip.classList.toggle("active", isMatch);
          chip.setAttribute("aria-pressed", isMatch ? "true" : "false");
        });

        filterables.forEach((el) => {
          if (!activeSkill) {
            el.classList.remove("dimmed");
            return;
          }
          const tags = (el.getAttribute("data-tags") || "").split(/\s+/);
          el.classList.toggle("dimmed", !tags.includes(activeSkill));
        });

        if (filterHint) {
          filterHint.textContent = activeSkill
            ? "[FILTER: #" + activeSkill.toUpperCase() + " · ESC TO RESET]"
            : "[CLICK CHIP TO TRACE USAGE]";
        }
      }

      chips.forEach((chip) => {
        chip.setAttribute("aria-pressed", "false");
        chip.addEventListener("click", () => {
          applySkillFilter(chip.getAttribute("data-skill"));
        });
      });

      document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && activeSkill) {
          applySkillFilter(activeSkill);
        }
      });

      /* 2. Copy-to-Clipboard for Email & PGP with Terminal Ack */
      const copyButtons = document.querySelectorAll("[data-copy]");
      const toast = document.getElementById("toast");
      let toastTimer = null;

      copyButtons.forEach((btn) => {
        btn.addEventListener("click", () => {
          const val = btn.getAttribute("data-copy");
          if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(val).catch(() => {});
          }
          if (toast) {
            clearTimeout(toastTimer);
            toast.textContent = ">> ACK: COPIED [" + val + "] TO SYSTEM BUFFER";
            toastTimer = setTimeout(() => {
              toast.textContent = "";
            }, 3000);
          }
        });
      });

      /* 3. Subtle Matrix-Inspired Deterministic Glyph Decode on Hover */
      const glyphs = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン";
      const decodeTargets = document.querySelectorAll("[data-decode]");

      decodeTargets.forEach((el) => {
        const original = el.getAttribute("data-decode");
        let frameId = null;

        el.addEventListener("mouseenter", () => {
          let step = 0;
          const totalSteps = original.length * 2;
          cancelAnimationFrame(frameId);

          function tick() {
            step++;
            const revealed = Math.floor(step / 2);
            let out = "";
            for (let i = 0; i < original.length; i++) {
              if (original[i] === " " || original[i] === "_" || original[i] === "-") {
                out += original[i];
              } else if (i < revealed) {
                out += original[i];
              } else {
                out += glyphs[(i * 7 + step) % glyphs.length];
              }
            }
            el.textContent = out;
            if (step < totalSteps) {
              frameId = requestAnimationFrame(tick);
            } else {
              el.textContent = original;
            }
          }

          frameId = requestAnimationFrame(tick);
        });
      });
    })();
  </script>
</body>
</html>

Same prompt, other models

8 more
Compare side by side

One email when a new model lands on the board or in the showcase. Unsubscribe anytime.