Eight decades, one runway.

Concept & art direction

The client is a real company with a real record: kosher airline caterer since 1946, a subsidiary of El Al Airlines since 1970, the only fully equipped, complete kosher in-flight kitchen in the USA, 15,000+ meals a day at JFK. Heritage sites usually mean a dusty “About us” paragraph — this one instead makes the heritage physical: the page is a runway, and scrolling taxis a drawn aircraft down it through four era gates. The plane you arrive on (a DC-4) is not the plane you leave on (a modern twinjet), which is the whole pitch in one gesture.

Discipline rules: no fake testimonials, no invented airline names — client categories only, plus the one airline that is verifiably theirs (their parent, El Al). The runway numbers in the hero read 19–46, the way a real runway wears its designators.

Palette — the green is earned

Midnight navy and archival cream do the institutional work; polished brass is the only ornament. The single fresh green is rationed: it appears nowhere until the timeline reaches the present — then the centerline dashes turn green, the era stamp turns green, and the "fresh" sections inherit it. The rebrand moment is made literal in the color system.

Type pairing

The signature: a morphing aircraft on a scroll runway

The timeline section is a 480vh scroll region with a sticky, full-viewport stage. Scroll progress maps to a position along an SVG runway with four gates — 1946, 1970, the widebody decades, today. The aircraft is not four images: it's one polygon redrawn every frame from four matched point arrays (DC-4 → 707 → widebody → modern twinjet), each defined as the same 12 right-half anchor points and mirrored. Between gates the arrays lerp, so the straight piston wing visibly sweeps back and the four engine pods merge into two as history passes.

// four eras, same 12 anchors each — so they lerp cleanly
function outline(aKey, bKey, t) {
  var A = SHAPES[aKey].pts, B = SHAPES[bKey].pts, half = [];
  for (var i = 0; i < A.length; i++)
    half.push([lerp(A[i][0], B[i][0], t), lerp(A[i][1], B[i][1], t)]);
  // mirror the right half to close the silhouette
  var full = half.slice();
  for (var j = half.length - 2; j > 0; j--)
    full.push([-half[j][0], half[j][1]]);
  return full;
}

// dwell at each gate, then taxi — smoothstepped
if (local < DWELL) { x = gateX(q); t = 0; }
else {
  var travel = smooth((local - DWELL) / (1 - DWELL));
  x = lerp(gateX(q), gateX(q + 1), travel);
  t = travel; // morph exactly while taxiing
}

Two supporting tricks: the runway SVG stretches full-bleed with preserveAspectRatio="none", so the plane is drawn with independent x/y scales that cancel the distortion; and the era photography is graded in CSS — grayscale(1) in 1946, sepia in 1970, muted in the widebody years, full color today — so the same layout literally develops like film as you scroll. With JavaScript off or reduced motion, the eras unstack into a plain readable timeline.

Photography — Nano Banana Pro, with one reshoot

Three stills came from the pre-staged Nano Banana Pro set: the modern commissary line, the overhead kosher tray, and the 3:4 freshness macro. The founding-era photo, however, arrived stenciled with the wrong company name — unusable in a client pitch where accuracy is the whole argument. It was regenerated with Nano Banana Pro with the lettering spelled out explicitly in the prompt, and came back better than the original: crates and truck now read “Borenstein's Kosher Meals — Est. 1946,” with a DC-4 waiting in the drizzle behind. Always read the type inside your generated images; models will happily invent a brand.

Three iteration passes

1. Pass 1

   Correctness & composition: the hero was mysteriously centered in a 744px shrink-wrapped box — margin: 0 auto on a column-flex child disables stretch, fixed with an explicit width; the widebody era's rolling counter was getting line-clamped mid-number on phones, so it moved out of the paragraph into its own stat row; era paragraphs were tightened so the mobile clamp never cuts a sentence. Zero console errors at 1440 and 390.

2. Pass 2

   Elevation & polish: gave the silhouette a taxi-light glow that is brightest mid-travel and off while parked; let the timeline kicker wrap on phones instead of clipping; swapped every straight quote for typographic ones; stopped the brand wordmark wrapping in the mobile top bar; gave the guide's top bar a solid ground.

3. Pass 3

   Taste & hardening: rationed the green harder — it had leaked into the stats band's eyebrow, which now stays ink-and-brass so green remains locked to the present; found the freshness photo rendering 1,200px tall on phones (an height attribute beating the CSS aspect-ratio — fixed with img{height:auto}); disabled the stamp animation and eased crossfades under reduced motion; re-shot everything clean.

Do this yourself

1. Let the client's oldest fact pick the structure. "Est. 1946 at an airport" → the page is a runway. Ask: what physical thing in this company's world could the scrollbar drive?
2. Make the payoff arrive last. Borenstein just rebranded around freshness — so green is forbidden until the timeline reaches today. Rationing a color is cheaper than any animation and reads as discipline.
3. Morph with matched point arrays, not libraries. Give every era's silhouette the same number of anchors, lerp them, mirror for symmetry. Forty lines of vanilla JS.
4. Grade photos with CSS filters per era — grayscale → sepia → muted → full color — and the page develops like film without a single duplicate asset.
5. Proofread generated imagery like copy. Our founding photo shipped with a stranger's brand stenciled on the crates. Regenerate with the exact lettering in the prompt.
6. Keep pitch-site honesty rules visible: no fake testimonials, no invented client names, real phone, real address, and a discreet "concept prepared for" line in the footer.
7. Dwell, then travel. Anything that moves on scroll should hold still most of the time — our plane parks at each gate for 62% of its quarter, and that's what makes it feel like taxiing instead of scrubbing.
8. Screenshot at 1440 and 390 after every pass and critique composition — the biggest fix here (a runway pushed off short screens) is invisible in code and obvious in a picture.