I Cloned Vercel's Deploy Log in 30 Lines of Vanilla JavaScript

🌐 Live demo (LOOK · UNDERSTAND · BUILD): https://dev48v.infy.uk/design/day3-vercel-deploy-log.html

Day 3 of my DesignFromZero series — clone 50 famous UIs in 50 days, one HTML file each, no setup.

Today: the Vercel deploy log. The streaming command-line UI you stare at while your git push triggers a deploy. Universally recognized by anyone who's shipped to Vercel, GitHub Actions, CircleCI, Render, Fly, or pretty much any modern CI.

The 6 pieces

Dark canvas — #0a0a0a (near-black, soft on the eye)
Header bar — logo + project + branch + commit hash + status pill
Timestamped lines — HH:MM:SS.mmm greyed, then colored text
Streamed appending — new lines drop in over time, not pre-rendered
Auto-scroll — viewport locks to the latest line
Status pill — flips from amber BUILDING to emerald READY on done

That's it. 30 lines of JavaScript.

The whole thing

<!DOCTYPE html>
<html><head>
<style>
  body { background:#0a0a0a; color:#cbd5e1; font:13px ui-monospace, monospace; padding:1rem; }
  .line { padding:3px 0; opacity:0; animation: slide .25s forwards; }
  .ts   { color:#475569; margin-right:10px; }
  .cmd  { color:#93c5fd; }
  .dim  { color:#64748b; }
  .ok   { color:#4ade80; }
  .err  { color:#fb7185; }
  @keyframes slide { to { opacity:1; } }
</style></head>
<body>
<div id="log"></div>
<script>
const LINES = [
  { cls:"cmd", t:"$ git clone https://github.com/dev48v/repo" },
  { cls:"dim", t:"  Cloning into 'repo'..." },
  { cls:"cmd", t:"$ npm install" },
  { cls:"dim", t:"  added 234 packages in 12s" },
  { cls:"cmd", t:"$ next build" },
  { cls:"ok",  t:"  ✓ Compiled successfully in 4.2s" },
  { cls:"ok",  t:"  ● Production: https://repo.vercel.app" }
];
const log = document.getElementById("log");
function ts() {
  const d = new Date();
  return d.toTimeString().slice(0,8) + "." +
         String(d.getMilliseconds()).padStart(3,"0");
}
let i = 0;
setInterval(() => {
  if (i >= LINES.length) return;
  const L = LINES[i++];
  const div = document.createElement("div");
  div.className = "line";
  div.innerHTML = `<span class="ts">${ts()}</span><span class="${L.cls}">${L.t}</span>`;
  log.appendChild(div);
  log.scrollTop = log.scrollHeight;
}, 380);
</script>
</body></html>

Save as deploy-log.html, double-click. Lines stream in like a real Vercel deploy.

The 4 colors do 90% of the work

Color = signal. Same convention as every CI log on Earth:

Color	Meaning	Hex
Blue	Command being run	`#93c5fd`
Grey	Info / progress detail	`#64748b`
Green	Success	`#4ade80`
Red	Error	`#fb7185`

If you change nothing else and just adopt this palette, your CLI / log UI immediately looks "right" to anyone who's ever shipped code.

The auto-scroll trick

Every time you append a new line, set log.scrollTop = log.scrollHeight. Without this the user has to manually scroll as new lines arrive. With it, the viewport always shows the latest.

log.appendChild(div);
log.scrollTop = log.scrollHeight;  // viewport follows

One line. Massive UX upgrade.

The fade-in detail

Lines without animation pop in too sharply. Add a 250 ms fade + 4px slide from below:

.line { opacity: 0; animation: slide .25s forwards; }
@keyframes slide { to { opacity: 1; transform: translateY(0); } }

Tiny detail. Makes the log feel alive instead of mechanical.

The status pill

While building, the pill on the right side of the header is amber with a pulsing dot. On final line, swap the classes to emerald. One state variable, two class names, instant visual feedback.

status.classList.replace("text-amber-400", "text-emerald-400");
status.textContent = "● READY";

What this unlocks

Same pattern → many UIs:

GitHub Actions log
CircleCI build log
Render build log
Fly.io deploy log
Your own internal CI runner UI

Dark canvas + timestamp + 4 colors + animated append + auto-scroll. Master the pattern once.

Try it now

The 3-tier LOOK / UNDERSTAND / BUILD page:
https://dev48v.infy.uk/design/day3-vercel-deploy-log.html

LOOK — watch a simulated deploy stream
UNDERSTAND — 8 click-through steps on each piece (status pill, fade, colors, ASCII route table)
BUILD — copy the HTML, save, open