DEV Community: INTFRAME

Design QA at 1:1

INTFRAME — Fri, 14 Aug 2026 18:15:44 +0000

Two screens can look identical at a glance and be twenty percent apart in every measurement that matters. Font size, line height, spacing rhythm, contrast. The glance is the least reliable instrument in the building, and for months it was the only one we used.

Measure the original, not your memory of it

When the brief is "make it feel like this reference", the first step is no longer a mood board. It is a probe run in both pages' consoles:

const probe = (sel) => {
  const cs = getComputedStyle(document.querySelector(sel));
  return [sel, cs.fontSize, cs.lineHeight, cs.letterSpacing,
          cs.fontWeight, cs.color].join('  ');
};
['h1', 'h2', 'p', 'nav a', 'button'].map(probe).join('\n');

Run it on the reference, run it on ours, diff the two tables. Design conversations change completely when both sides are looking at numbers. "It feels lighter" becomes "their h1 is 88/0.94 at weight 900, ours is 72/1.1 at 800", which is a ticket, not a debate.

Compare crops, not impressions

Crop the same region from ours and theirs, stack them at 1:1, and look at the pair. Differences that vanish in side-by-side thumbnails become obvious.
Do it on mobile first. Desktop hides crimes that a 390-pixel viewport confesses immediately.
Automate the mechanical half: a script walks the page and flags text overflow, unexpected horizontal scroll and elements taller than their containers, before a human spends taste on it.
Record scroll behavior too. Easing curves and pin durations are design decisions, and they are measurable in the performance timeline, not just feelable.

Taste still decides

None of this replaces judgment. It feeds judgment with facts. The measurements tell you where you diverge from the reference. Whether the divergence is a bug or a choice is still a human call, and making that call consciously is the entire difference between a site that is almost right and one that is right.

Originally published on the INTFRAME engineering blog. The companion code lives at github.com/intframe/scroll-qa.

A planet in a browser tab

INTFRAME — Fri, 14 Aug 2026 18:14:15 +0000

Our site now has a chapter where you scroll a camera through low orbit, visiting the four places we operate from. It looks like it should weigh fifty megabytes. It ships in roughly 1.5, and it is built almost entirely from public-domain science data.

Real data, baked hard

The planet is NASA Blue Marble imagery, resized and recompressed by a build-time generator. Never hand-edited: when we want a change, we change the generator and bake again.
City lights are not a texture. A script samples a NASA night-lights raster into about 46,000 weighted points packed into a small binary buffer, rendered as glowing sprites. Crisp at any zoom, because they are geometry, not pixels.
Close-ups use a two-stage patch trick: whole-earth imagery is about 10 km per pixel, hopeless at 200 km altitude, so the generator bakes high-resolution patches (down to 76 m per pixel, from Sentinel-2 cloudless data) only around the four cities the camera actually visits.

The patches blend in the fragment shader, feathered at the edges so no seam ever shows, and the procedural detail noise fades out underneath them so photography is not fighting synthesis:

float fe  = smoothstep(edge, edge - feather, dist);   // patch edge feather
vec3  col = mix(base, patchTexel, fe * uPatch);
col      *= 1.0 - patchAmt * 0.75;                    // damp noise under imagery

One line of trigonometry fixed the camera

Scroll drives a great-circle flight between stops. The obvious way to aim the camera, normalize(next - pos), collapses to a zero vector exactly at the endpoints, which is why naive fly-over cameras snap on arrival. The fix is the analytic tangent of the spherical interpolation itself, stable everywhere including t = 0 and t = 1:

// bearing along slerp(a, b) at parameter t, W = angle between a and b
tangent(t) = normalize( -cos((1 - t) * W) * a  +  cos(t * W) * b )

Arrivals settle north-up, hold while the camera descends, then rotate toward the next destination and depart with a slight bank, all of it driven by signed angles between that tangent and local north. Lighting is deliberately cinematic: the sun rises as you arrive so the terrain reads, and sinks back to a dawn band for the night flight.

Honest performance

ema = ema * 0.9 + frameMs * 0.1;            // frame-time moving average
if (ema > 24.0 && px > FLOOR) {
  px -= 0.2;                                 // shed resolution before jank
  renderer.setPixelRatio(px);
}

A governor watches the running frame time and steps internal resolution down before a weak GPU starts dropping frames, with a floor so text and coastlines stay sharp. Assets load only when the chapter approaches, and the whole thing idles at zero cost when off-screen. Awards-bait visuals are allowed. Awards-bait jank is not.

Originally published on the INTFRAME engineering blog. The companion code lives at github.com/intframe/scroll-rig.

Screenshots or it didn't happen

INTFRAME — Fri, 14 Aug 2026 18:13:41 +0000

The most expensive bugs we have shipped were invisible to every automated check. The build was green. The tests passed. And the page was wrong: a headline wrapped into nonsense on mobile, a section rendered behind another, a form that looked fine and submitted nothing.
So we adopted a rule that sounds primitive and works: no change is done until someone has looked at a screenshot of the deployed page. Not the dev server. The real thing, both viewports, at full resolution.

Making evidence cheap

for (const vp of [{ w: 1440, h: 900 }, { w: 390, h: 844 }]) {
  const page = await browser.newPage({ viewport: vp });
  page.on('console', (m) => errors.push(m));    // console is part of the picture
  await page.goto(URL, { waitUntil: 'networkidle' });
  await page.screenshot({ path: shot(vp), fullPage: true });
}

Capture is one command per project, so there is no excuse to skip it. Timestamped captures accumulate into the cheapest regression archive ever built.

The machine reads first

This year we put a vision model in front of the human. Every capture pair goes to a model with a deliberately narrow brief: report text overflow, truncation, overlapping elements, broken alignment and contrast failures, with pixel regions, and answer NONE if the page is clean. No taste, no compliments, defects only. It catches roughly 70% of mechanical failures before a person looks, and it never gets bored on capture number forty.
The human pass still decides, and it has rules of its own: open captures at 1:1 because overflow hides at fit-to-window zoom, read the rendered copy aloud because screenshots find the typos your editor did not, and treat a clean-looking page with console errors as dirty.

The generalization

Database features are done when the row is queried back. Emails are done when the message is opened in a real client. Model pipelines are done when the output is read at the destination, not at the API response. The pattern is one sentence: verify at the layer the user lives in, not the layer you happened to write.

Originally published on the INTFRAME engineering blog. The companion code lives at github.com/intframe/scroll-qa.