DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

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

#html #javascript #beginners #design

🌐 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

  1. Dark canvas — #0a0a0a (near-black, soft on the eye)
  2. Header bar — logo + project + branch + commit hash + status pill
  3. Timestamped lines — HH:MM:SS.mmm greyed, then colored text
  4. Streamed appending — new lines drop in over time, not pre-rendered
  5. Auto-scroll — viewport locks to the latest line
  6. 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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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); } }
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

What's next in DesignFromZero

Day 4: Arc vertical tabs. The browser tab UI that sparked a thousand redesign threads.

Series: 50 famous UIs · 50 days · pure HTML + Tailwind · zero build.

🌐 All days: https://dev48v.infy.uk/designfromzero.php

Top comments (0)