unravel-dispatch-summer-2026

<title>Unravel — Summer 2026 Dispatch</title>

<style>

:root {

  --ground: #F7EFE3;

  --panel: #FFFAF1;

  --panel-2: #EFE0CA;

  --ink: #0B2A45;

  --muted: #425B73;

  --faint: #7E92A6;

  --border: #DBCDB6;

  --border-strong: #CBB79A;

  --accent: #A95E41;

  --accent-soft: #F0DECB;

  --good: #5F7A5F;

  --ground: #F7EFE3; --panel: #FFFAF1; --panel-2: #EFE0CA;

  --ink: #0B2A45; --muted: #425B73; --faint: #7E92A6;

  --border: #DBCDB6; --border-strong: #CBB79A;

  --accent: #A95E41; --accent-soft: #F0DECB; --good: #5F7A5F;

  --shadow: 0 1.5rem 4rem rgba(11,42,69,.10), 0 .75rem 2rem rgba(11,42,69,.06);

}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --ground: #081A2B;

    --panel: #0E2C46;

    --panel-2: #16405C;

    --ink: #F7EFE3;

    --muted: #AEC1D0;

    --faint: #7E93A5;

    --border: rgba(247,239,227,.16);

    --border-strong: rgba(247,239,227,.30);

    --accent: #DB8A66;

    --accent-soft: #1C3346;

    --good: #9FBA9C;

    --ground: #081A2B; --panel: #0E2C46; --panel-2: #16405C;

    --ink: #F7EFE3; --muted: #AEC1D0; --faint: #7E93A5;

    --border: rgba(247,239,227,.16); --border-strong: rgba(247,239,227,.30);

    --accent: #DB8A66; --accent-soft: #1C3346; --good: #9FBA9C;

    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.4);

    color-scheme: dark;

  }

}

:root[data-theme="dark"] {

  --ground: #081A2B;

  --panel: #0E2C46;

  --panel-2: #16405C;

  --ink: #F7EFE3;

  --muted: #AEC1D0;

  --faint: #7E93A5;

  --border: rgba(247,239,227,.16);

  --border-strong: rgba(247,239,227,.30);

  --accent: #DB8A66;

  --accent-soft: #1C3346;

  --good: #9FBA9C;

  --ground: #081A2B; --panel: #0E2C46; --panel-2: #16405C;

  --ink: #F7EFE3; --muted: #AEC1D0; --faint: #7E93A5;

  --border: rgba(247,239,227,.16); --border-strong: rgba(247,239,227,.30);

  --accent: #DB8A66; --accent-soft: #1C3346; --good: #9FBA9C;

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.4);

  color-scheme: dark;

}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

body {

  margin: 0;

  background: var(--ground);

  color: var(--ink);

  margin: 0; background: var(--ground); color: var(--ink);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-size: 17px;

  line-height: 1.62;

  -webkit-font-smoothing: antialiased;

  font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased;

}

.mono { font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }

.display { font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }

.display { font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; }

.page { max-width: 700px; margin: 0 auto; padding: 0 22px 72px; }

.page { max-width: 700px; margin: 0 auto; padding: 0 22px 80px; }

/* MASTHEAD */

.mast { padding: 44px 0 24px; margin-bottom: 6px; position: relative; }

.mast::after { content: ""; display: block; height: 3px; margin-top: 22px; background: var(--ink); }

.mast .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.wordmark { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.045em; display: flex; align-items: center; gap: 10px; color: var(--ink); }

.wordmark .tick { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }

.stamp { font-family: "SF Mono", monospace; font-size: 10.5px; color: var(--muted); letter-spacing: .14em; text-align: center; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; line-height: 1.5; text-transform: uppercase; }

.mast h1 { margin: 26px 0 0; font-size: clamp(32px, 7vw, 50px); }

.mast .sub { margin: 16px 0 0; color: var(--muted); font-size: 18px; max-width: 54ch; }

.hl { color: var(--accent); }

.mast { padding: 40px 0 26px; border-bottom: 2px solid var(--ink); margin-bottom: 38px; }

.mast .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.wordmark { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.04em; display: flex; align-items: center; gap: 9px; }

.wordmark .tick { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }

.issue { font-family: "SF Mono", monospace; font-size: 12px; color: var(--muted); letter-spacing: .04em; text-align: right; }

.mast h1 { margin: 22px 0 0; font-size: clamp(30px, 6vw, 44px); }

.mast .sub { margin: 14px 0 0; color: var(--muted); font-size: 18px; max-width: 56ch; }

.lead { font-size: 19px; color: var(--muted); margin: 24px 0 8px; max-width: 62ch; }

.kicker { font-family: "SF Mono", monospace; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }

.kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); }

section.block { padding: 8px 0 42px; border-bottom: 1px solid var(--border); margin-bottom: 42px; }

section.block:last-of-type { border-bottom: none; }

h2.headline { font-size: clamp(24px, 4.4vw, 34px); margin: 0 0 16px; letter-spacing: -0.025em; line-height: 1.08; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; }

p { margin: 0 0 16px; max-width: 66ch; }

/* THREAD RAIL — a rust thread with a node at every section */

.threads { position: relative; padding-left: 36px; margin-top: 22px; }

.threads::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); }

@media (max-width: 540px){ .threads { padding-left: 26px; } .threads::before { left: 6px; } }

section.block { position: relative; padding: 4px 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--border); }

section.block:last-of-type { border-bottom: none; margin-bottom: 8px; }

section.block::before { content: ""; position: absolute; left: -36px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--ground); }

@media (max-width: 540px){ section.block::before { left: -26px; } }

.kicker { font-family: "SF Mono", monospace; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }

h2.headline { font-size: clamp(23px, 4.2vw, 32px); margin: 0 0 14px; letter-spacing: -0.025em; line-height: 1.08; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; color: var(--ink); }

p { margin: 0 0 15px; max-width: 64ch; }

p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

a:hover { border-bottom-color: var(--accent); }

strong { color: var(--ink); font-weight: 650; }

.lead { font-size: 19px; color: var(--muted); }

/* quarter-in-brief hero stat */

.brief { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow); margin: 8px 0 4px; }

@media (max-width: 560px){ .brief { grid-template-columns: 1fr; gap: 12px; } }

.brief .big { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 66px; letter-spacing: -0.04em; line-height: .9; color: var(--accent); font-variant-numeric: tabular-nums; }

.brief .big small { display: block; font-size: 13px; letter-spacing: 0; color: var(--muted); font-weight: 500; margin-top: 8px; max-width: 16ch; }

.brief ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; }

.brief li { margin-bottom: 6px; }

.brief li:last-child { margin-bottom: 0; }

.brief li b { color: var(--ink); }

/* AT A GLANCE — inverted navy band, the centerpiece. Whole issue in one look. */

.glance-band { background: var(--ink); border-radius: 16px; padding: 6px 4px; display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: var(--shadow); }

@media (max-width: 560px){ .glance-band { grid-template-columns: 1fr; } }

.gcell { padding: 22px 22px; border-left: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); display: flex; flex-direction: column; gap: 9px; }

.gcell:first-child { border-left: none; }

@media (max-width: 560px){ .gcell { border-left: none; border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .gcell:first-child { border-top: none; } }

.gcell .glabel { font-family: "SF Mono", monospace; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }

.gcell .gbig { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.035em; line-height: 1; color: var(--ground); font-variant-numeric: tabular-nums; }

.gcell .gtake { font-size: 14px; line-height: 1.42; color: color-mix(in srgb, var(--ground) 80%, transparent); }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 26px 0; box-shadow: var(--shadow); }

/* METRIC ROW */

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 20px 0; box-shadow: var(--shadow); }

@media (max-width: 560px){ .metrics { grid-template-columns: 1fr; } }

.metric { background: var(--panel); padding: 22px 20px; }

.metric .n { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }

.metric { background: var(--panel); padding: 20px; }

.metric .n { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 33px; letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }

.metric .n.good { color: var(--good); }

.metric .l { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); margin: 24px 0; }

.card .t { font-family: "SF Mono", monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }

.card ul { margin: 0; padding-left: 18px; color: var(--muted); }

.card li { margin-bottom: 7px; }

.card li:last-child { margin-bottom: 0; }

.card li b { color: var(--ink); }

.metric .l { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* reads list */

.reads { list-style: none; margin: 18px 0 0; padding: 0; }

.reads li { padding: 14px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }

/* READS — link-out digest */

.reads { list-style: none; margin: 6px 0 0; padding: 0; }

.reads li { padding: 14px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }

.reads li:last-child { border-bottom: 1px solid var(--border); }

.reads a { font-weight: 600; font-size: 17px; border: none; }

.reads span { color: var(--muted); font-size: 14.5px; }

.reads .rarrow { grid-row: span 2; color: var(--accent); font-family: "SF Mono", monospace; align-self: center; }

.reads a { font-weight: 650; font-size: 17px; border: none; }

.reads span { color: var(--muted); font-size: 14px; grid-column: 2; }

.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }

/* PRODUCTS */

.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }

@media (max-width: 640px){ .prods { grid-template-columns: 1fr; } }

.prod { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; }

.prod h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; }

.prod .dom { font-family: "SF Mono", monospace; font-size: 11px; color: var(--accent); margin-bottom: 12px; letter-spacing: .02em; }

.prod p { font-size: 14px; color: var(--muted); margin: 0 0 14px; flex: 1; }

.prod a.go { font-size: 14px; font-weight: 650; border: none; align-self: flex-start; }

.prod { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }

.prod h3 { margin: 0 0 3px; font-size: 18px; letter-spacing: -.01em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; }

.prod .dom { font-family: "SF Mono", monospace; font-size: 10.5px; color: var(--accent); margin-bottom: 12px; letter-spacing: .02em; }

.prod p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; flex: 1; }

.prod a.go { font-size: 13.5px; font-weight: 650; border: none; align-self: flex-start; }

.cta { background: var(--panel-2); border: 1px solid var(--border); border-radius: 18px; padding: 36px 32px; text-align: center; margin: 8px 0 40px; }

.cta h2 { font-size: clamp(24px, 4.6vw, 34px); margin: 0 0 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.025em; }

.cta p { margin: 0 auto 24px; color: var(--muted); max-width: 46ch; }

.btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 650; font-size: 16px; padding: 14px 30px; border-radius: 10px; border: none; letter-spacing: -0.01em; }

:root[data-theme="dark"] .btn { color: #0B0D12; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #0B0D12; } }

.btn:hover { filter: brightness(1.06); }

.cta .alt { display: block; margin-top: 16px; font-size: 14px; color: var(--faint); }

.cta .alt a { color: var(--muted); }

/* FRAY — the thread unravels at the sign-off */

.fray { padding-left: 0; margin: 2px 0 26px; }

@media (max-width: 540px){ .fray { margin-left: -4px; } }

.foot { padding-top: 8px; color: var(--faint); font-size: 13px; line-height: 1.7; }

.foot .links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }

/* CTA */

.cta { background: var(--ink); border-radius: 18px; padding: 38px 32px; text-align: center; margin: 6px 0 40px; }

.cta h2 { font-size: clamp(23px, 4.4vw, 32px); margin: 0 0 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.025em; color: var(--ground); }

.cta p { margin: 0 auto 24px; color: color-mix(in srgb, var(--ground) 78%, transparent); max-width: 46ch; }

.btn { display: inline-block; background: var(--accent); color: #FFF8EF; font-weight: 700; font-size: 16px; padding: 14px 30px; border-radius: 10px; border: none; letter-spacing: -0.01em; }

.btn:hover { filter: brightness(1.08); }

.cta .alt { display: block; margin-top: 16px; font-size: 14px; color: color-mix(in srgb, var(--ground) 60%, transparent); }

.cta .alt a { color: color-mix(in srgb, var(--ground) 80%, transparent); }

/* FOOTER */

.foot { color: var(--faint); font-size: 13px; line-height: 1.7; }

.foot .links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }

.foot .links a { color: var(--muted); border: none; }

.foot .fine { font-family: "SF Mono", monospace; font-size: 11px; color: var(--faint); }

.tag { display: inline-block; font-family: "SF Mono", monospace; font-size: 11px; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 10px; margin: 2px 4px 2px 0; }

.theme-toggle { position: fixed; top: 14px; right: 14px; background: var(--panel); border: 1px solid var(--border-strong); color: var(--muted); border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 13px; line-height: 1; z-index: 10; }

.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }

</style>

<button class="theme-toggle" id="tt" aria-label="Toggle theme">◐</button>

<button class="theme-toggle" id="tt" aria-label="Toggle colour theme">◐</button>

<div class="page">

  <header class="mast">

    <div class="row">

      <div class="wordmark"><span class="tick"></span>Unravel</div>

      <div class="issue">THE DISPATCH · No. 01<br>Summer 2026</div>

      <div class="stamp">The Dispatch<br>No. 01 · Summer 2026</div>

    </div>

    <h1 class="display">A loud quarter at the studio.</h1>

    <p class="sub">A short note on what we built between June and August. A rebuild that paid for itself, a media product shipping every week, and a capability we can drop into your product.</p>

    <h1 class="display">How one rebuild killed a <span class="hl">runaway cloud bill</span>.</h1>

    <p class="sub">The last quarter in one page. A rebuild that paid for itself, generative video shipped weekly, and a few notes worth stealing.</p>

  </header>

  <p class="lead">If you are building an AI product, three things from our last quarter are worth your time: how one rebuild killed a runaway cloud bill, how we ship generative video every week without quality falling apart, and a few notes you can use whether or not we ever work together.</p>

  <!-- QUARTER IN BRIEF -->

  <section class="block" style="margin-top:34px;">

    <p class="kicker">The quarter in brief</p>

    <div class="brief">

      <div class="big">116<small>things built and documented, June to August</small></div>

      <ul>

        <li><b>A consumer AI music-video app</b> we build for a client shipped weekly: templates, trending, character replacement, and more.</li>

        <li><b>A full engine rebuild</b> from Java to Python, with the bill and the bugs cut at once.</li>

        <li><b>A cloud migration</b> and new pipeline APIs behind the scenes.</li>

        <li><b>Field notes</b> published openly, from prompt caching to migrating without regret.</li>

      </ul>

    </div>

    <p style="margin-top:18px;">What that buys you: a team that ships to production every week, not every quarter. The rest of this page is the parts worth stealing.</p>

  </section>

  <!-- FEATURE 1: MIGRATION -->

  <section class="block">

    <p class="kicker">Case study · Client engine rebuild</p>

    <h2 class="headline">A rewrite that paid for itself.</h2>

    <p>A client of ours generates AI music videos at volume. The engine that served them was written in Java and had grown brittle. Reverts were frequent, the mobile apps broke in ways nobody caught until users did, and the cloud bill climbed with every view.</p>

    <p>We rebuilt the registry from Java to Python, contract-first, and verified it against the real mobile clients before a line shipped. The result was not just cleaner code. It was a service that costs a fraction to run and stopped breaking.</p>

    <div class="metrics">

      <div class="metric"><div class="n good">0</div><div class="l">Reverts after cutover, against 28 in the service it replaced</div></div>

      <div class="metric"><div class="n">~50%</div><div class="l">Less code, for a larger API surface than before</div></div>

      <div class="metric"><div class="n good">~$0</div><div class="l">Media egress, down from a projected $45k to $180k a month</div></div>

    </div>

    <p>The egress win came from moving an immutable, write-once media set onto zero-egress storage. On the old stack that same traffic was billed at cloud egress rates, a cost that doubles as vendor lock-in. Both mobile apps verified green before launch, because we tested against the actual client decoders instead of trusting a green status code.</p>

    <p style="margin-top:18px;"><strong>If this is you</strong> — an AI product that shipped, grew, and now costs too much and breaks too often — the fix is rarely a bigger team. It is a disciplined rebuild that cuts the bill and the bugs together. That is the work we do.</p>

  </section>

  <!-- FEATURE 2: MIXXI VELOCITY -->

  <section class="block">

    <p class="kicker">Capability · Generative video</p>

    <h2 class="headline">Generative video, shipping every week.</h2>

    <p>For a client, we build a consumer app that turns a song into a video you star in. This quarter it grew from a demo into a product with a weekly rhythm. We treat still-image design and motion as separate decisions: lock identity and story on approved references first, then let the video model perform the shot. It keeps quality high while the pace stays fast.</p>

  <p class="lead">If you are building an AI product, here is the quarter in one page: how one rebuild cut a cloud bill to near zero, how we ship generative video every week without quality falling apart, and notes you can use whether or not we ever work together.</p>

    <div class="card">

      <div class="t">// shipped this quarter</div>

      <ul>

        <li><b>Campaign templates</b> so a new video starts from a proven recipe, not a blank canvas.</li>

        <li><b>Character replacement</b> that puts the right person in the scene, consistently across shots.</li>

        <li><b>Trending and leaderboards</b> that turn creation into something social.</li>

        <li><b>Golden frames and treatments</b> that set the look before a single second renders.</li>

      </ul>

    </div>

  <div class="threads">

    <p>The lesson we keep proving: approve the still before you pay for the motion. It is the difference between a product that ships weekly and one that stalls in revisions.</p>

  </section>

    <section class="block">

      <p class="kicker">At a glance</p>

      <div class="glance-band">

        <div class="gcell"><span class="glabel">Cloud bill</span><span class="gbig">~$0</span><span class="gtake">Media egress, down from a projected $45k to $180k a month.</span></div>

        <div class="gcell"><span class="glabel">Reliability</span><span class="gbig">0</span><span class="gtake">Reverts after the rewrite, against 28 in the service before it.</span></div>

        <div class="gcell"><span class="glabel">Shipped</span><span class="gbig">116</span><span class="gtake">Things built and put into production, June to August.</span></div>

      </div>

    </section>

  <!-- CAPABILITY: CO-BROWSING -->

  <section class="block">

    <p class="kicker">Capability · Live collaboration</p>

    <h2 class="headline">Co-browsing, built into your product.</h2>

    <p>Sometimes two people need to be on the same screen at the same time. A support agent guiding a customer. A team reviewing a design together. A seller walking a prospect through a flow. We have built the engineering for this and can add it to your product.</p>

    <p>It runs peer to peer, so cursors, edits, and presence move in real time without a heavy media server. Small rooms need almost no infrastructure. When you outgrow that, the same design graduates to a forwarding server without a rewrite.</p>

    <section class="block">

      <p class="kicker">Case study · Client engine rebuild</p>

      <h2 class="headline">A rewrite that paid for itself.</h2>

      <div class="metrics">

        <div class="metric"><div class="n good">0</div><div class="l">Reverts after cutover, against 28 before</div></div>

        <div class="metric"><div class="n">~50%</div><div class="l">Less code, for a larger API surface</div></div>

        <div class="metric"><div class="n good">~$0</div><div class="l">Media egress, from a projected $45k–180k a month</div></div>

      </div>

      <p>A client's AI music-video engine, written in Java, had grown brittle: frequent reverts, mobile apps breaking in production, and a cloud bill that climbed with every view. We rebuilt it in Python, contract-first and verified against the real clients, so the bugs and the bill fell together.</p>

    </section>

    <div class="card">

      <div class="t">// what it unlocks</div>

      <ul>

        <li><b>Guided support.</b> See what the customer sees and point at it, instead of reading steps aloud.</li>

        <li><b>Collaborative editing.</b> Many people in one document or canvas, with live cursors and safe concurrent edits.</li>

        <li><b>Live onboarding and demos.</b> Walk a new user or a prospect through the real product, together.</li>

    <section class="block">

      <p class="kicker">More from the quarter</p>

      <ul class="reads">

        <li><span class="rarrow">→</span><a href="https://usething.ai/unravel/prompt-caching-and-how-to-think-about-it">Prompt caching, and how to think about it</a><span>Where caching saves real money and latency with large models, and where it quietly does not.</span></li>

        <li><span class="rarrow">→</span><a href="https://usething.ai/unravel/eval-metrics">The metrics we judge AI output by</a><span>How we measure whether a model's output is good, and keep our evals honest as the product changes.</span></li>

        <li><span class="rarrow">→</span><a href="https://usething.ai/unravel/airbridge-mixpanel-explainer">Airbridge and Mixpanel, made to agree</a><span>Wiring mobile attribution and product analytics so the numbers line up.</span></li>

      </ul>

    </div>

    </section>

    <p>We ship it with the parts that usually get skipped: presence, reconnect handling, and concurrency that does not throw away someone's work when two people touch the same thing. If live collaboration is on your roadmap, this is weeks of work we have already done.</p>

  </section>

    <section class="block">

      <p class="kicker">Products · try what we build</p>

      <h2 class="headline">We ship our own tools, too.</h2>

      <div class="prods">

        <div class="prod"><h3>Steno</h3><div class="dom">steno.unravel.tech</div><p>Meeting notes that write themselves. Steno captures the conversation and hands you clean, searchable notes when it ends.</p><a class="go" href="https://steno.unravel.tech">Visit Steno →</a></div>

        <div class="prod"><h3>thing</h3><div class="dom">usething.ai</div><p>Push HTML, docs, images, and PDFs from your coding agents to live, commentable, versioned pages your team actually reads. This newsletter runs on it.</p><a class="go" href="https://usething.ai">Visit thing →</a></div>

        <div class="prod"><h3>Tablo</h3><div class="dom">tablo.unravel.tech</div><p>A tiny floating cat that watches your Claude Code and Codex agents from a corner of your screen. Live context meters, permission approvals, one cat.</p><a class="go" href="https://tablo.unravel.tech">Visit Tablo →</a></div>

      </div>

    </section>

  <!-- FROM OUR NOTEBOOK -->

  <section class="block">

    <p class="kicker">From our notebook</p>

    <h2 class="headline">What we wrote down.</h2>

    <p>We publish the useful parts of how we work, free to read and useful whether or not you ever hire us. A few from this quarter:</p>

    <ul class="reads">

      <li><a href="https://thing.unravel.tech/unravel/prompt-caching-and-how-to-think-about-it">Prompt caching, and how to think about it</a><span>Where caching actually saves money and latency with large language models, and where it quietly does not.</span></li>

      <li><a href="https://thing.unravel.tech/unravel/eval-metrics">The metrics we judge AI output by</a><span>How we measure whether a model's output is good, and keep our evals honest as the product changes.</span></li>

      <li><a href="https://thing.unravel.tech/unravel/airbridge-mixpanel-explainer">Airbridge and Mixpanel, made to agree</a><span>A practical explainer on wiring mobile attribution and product analytics so the numbers line up.</span></li>

    </ul>

  </section>

  </div><!-- /threads -->

  <!-- PRODUCTS -->

  <section class="block">

    <p class="kicker">Products · try what we build</p>

    <h2 class="headline">We ship our own tools, too.</h2>

    <p>We build for clients, and we run our own products alongside that work. Three you can use today, free to try:</p>

    <div class="prods">

      <div class="prod">

        <h3>Steno</h3>

        <div class="dom">steno.unravel.tech</div>

        <p>Meeting notes that write themselves. Steno captures the conversation and hands you clean, searchable notes when it ends.</p>

        <a class="go" href="https://steno.unravel.tech">Visit Steno →</a>

      </div>

      <div class="prod">

        <h3>thing</h3>

        <div class="dom">usething.ai</div>

        <p>Push HTML, docs, images, and PDFs straight from your coding agents to live, commentable, versioned pages your team actually reads. This newsletter runs on it.</p>

        <a class="go" href="https://usething.ai">Visit thing →</a>

      </div>

      <div class="prod">

        <h3>Tablo</h3>

        <div class="dom">tablo.unravel.tech</div>

        <p>A tiny floating cat that watches your Claude Code and Codex agents from a corner of your screen. Live context meters, permission approvals, one cat.</p>

        <a class="go" href="https://tablo.unravel.tech">Visit Tablo →</a>

      </div>

    </div>

  </section>

  <div class="fray" aria-hidden="true">

    <svg width="120" height="46" viewBox="0 0 120 46" fill="none">

      <path d="M11 0 L11 16" stroke="var(--accent)" stroke-width="2"/>

      <path d="M11 16 C 11 30, 4 34, 2 46" stroke="var(--accent)" stroke-width="2" opacity="0.85"/>

      <path d="M11 16 C 12 30, 20 32, 30 44" stroke="var(--accent)" stroke-width="1.6" opacity="0.6"/>

      <path d="M11 16 C 13 28, 34 30, 52 40" stroke="var(--accent)" stroke-width="1.3" opacity="0.4"/>

      <path d="M11 16 C 14 26, 50 28, 78 36" stroke="var(--accent)" stroke-width="1" opacity="0.25"/>

    </svg>

  </div>

  <!-- CTA -->

  <div class="cta">

    <h2>Weighing a rebuild or a cost cut?</h2>

    <p>Thirty minutes. We will tell you straight whether it is worth doing, what it would take, and how we would do it. No pitch deck required.</p>

    <a class="btn" href="https://unravel.tech/call">Book a 30-minute call →</a>

    <span class="alt">Or just reply to this email. It reaches us directly. <a href="mailto:kapil@unravel.tech">kapil@unravel.tech</a></span>

  </div>

  <footer class="foot">

    <div class="links">

      <a href="https://unravel.tech">unravel.tech</a>

      <a href="https://thing.unravel.tech">thing.unravel.tech</a>

      <a href="https://usething.ai">usething.ai</a>

      <a href="mailto:kapil@unravel.tech">Contact</a>

    </div>

    <div style="margin-bottom:14px;">

      <span class="tag">AI products</span>

      <span class="tag">Generative video</span>

      <span class="tag">Live collaboration</span>

      <span class="tag">Product engineering</span>

      <span class="tag">AI products</span><span class="tag">Generative video</span><span class="tag">Live collaboration</span><span class="tag">Product engineering</span>

    </div>

    <p class="fine">You are receiving The Dispatch because you have worked with Unravel or asked to hear from us. One short note a quarter, nothing more. <a href="#" style="color:var(--faint);">Unsubscribe</a> anytime.</p>

  </footer>