Build guide · Site 24 of 25

A developer tool that reviews itself on the way in.

VELOCITY is one of 25 sites designed and built by Formwork to show what a modern web front-end can feel like. This one is the "grounded in what actually ships" reference — crisp, fast, motion-forward. Here is exactly how it was made.

The idea

The brief was an AI code-review startup, so the hero had to prove the product in the fold. Instead of a screenshot, the hero is a live pull-request review that types itself out: a real diff of a vulnerable SQL query appears line by line, VELOCITY "reviews" it, and an inline comment slides in explaining the injection and the fix. Everything else — near-black canvas, one electric-blue accent, JetBrains Mono everywhere — exists to make that panel feel like a real tool.

The stack

• Hero A hand-built diff panel (plain divs + syntax spans) that types on a CSS width transition.
• Background A canvas 2D dot-grid with a diagonal scanning band, capped at 1.5× DPR.
• Motion GSAP + ScrollTrigger for reveals, count-ups, the pipeline pulse, and magnetic buttons.
• Type Space Grotesk (display), Inter (body), JetBrains Mono (code, labels, metrics).
• Build Plain HTML / CSS / JS. No bundler, no framework. It just runs.
• Host GitHub Pages, straight from main.

The signature technique

Because JetBrains Mono is monospaced, a convincing typewriter needs no per-character DOM surgery. Each line is a real element; JavaScript measures its natural width with scrollWidth, then animates the width from 0 to that value with a steps() timing function — so the text uncovers character by character behind a blinking caret. The lines are chained with promises:

function typeLine(ln){
  return new Promise(res => {
    const inner = ln.querySelector('.code-inner');
    const full  = inner.scrollWidth;        // natural content width
    const chars = inner.textContent.length;
    const dur   = Math.min(460, Math.max(120, chars * 13));
    inner.style.width = '0px';
    ln.classList.add('typing');
    requestAnimationFrame(() => {
      inner.style.transition = `width ${dur}ms steps(${chars},end)`;
      inner.style.width = full + 'px';      // uncover the line
    });
    setTimeout(() => { ln.classList.add('is-typed'); res(); }, dur + 40);
  });
}

The whole scene is additive: the diff and the AI comment are real markup, hidden only by a .js class. If the script or CDN fails, the finished review still renders — and a 6-second failsafe reveals everything if the animation ever stalls.

Details that matter

• CSS-driven hero intro — the headline unmasks via a .loaded class added on a double requestAnimationFrame plus a 400 ms failsafe, so it never freezes in a background tab.
• Semantic colour — one blue accent for the brand; green/red reserved strictly for diff add/remove, so the panel reads like a real code host, not a rainbow.
• Pipeline pulse — an SVG flow where a cyan dot travels push → index → review → verify → merge, lighting each node as it lands; it lives in a horizontal scroller so it stays legible at 375 px.
• Reduced motion — prefers-reduced-motion disables the typing, the scan, and the pulse, and forces every hidden element visible with !important.

Ship it on GitHub Pages

The site is fully static, so hosting is three commands:

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-velocity --public --source=. --push
gh api --method POST /repos/OWNER/formwork-velocity/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

Use relative paths (./main.js, not /main.js) — project Pages live under /repo-name/. Drop an empty .nojekyll file so every asset serves verbatim.

That is the whole recipe: one self-typing panel, a scanning grid, restrained colour, strong mono type, and static hosting. The other 24 sites swap the central technique — shaders, kinetic type, 3D — but the discipline is the same.