How this site was made

One of twenty-five sites built to show what Claude can do with hand-written HTML, CSS, SVG, and one file of JavaScript — no framework, no build step.

Concept & art direction

This is Concept D — “The Standard”: one of five concept directions prepared for Borenstein Caterers, the kosher airline caterer founded in 1946 and a subsidiary of El Al since 1970. The audience is not the passenger — it is the compliance-minded buyer at an airline, cruise line, or institution. So the page borrows the vernacular of the documents those buyers actually trust: certificates, ledgers, inspection seals, engraved rules. The single job of the page is to make the strictest supervision feel like luxury, then convert that trust into a specification request.

Everything on the page is a real client fact — 15,000+ meals a day, 50+ carriers, OU Kosher / FDA / USDA, Fresh Meals cooked and packed on flight day, the JFK address and phone. No invented testimonials, no fictional airline names. The one archival photograph was pre-generated (Nano Banana Pro) and then cropped in art direction: the original frame included crates lettered with a fictional brand, so the crop keeps only the delivery truck and the DC-4 on the wet tarmac — evocative, and safe to put in front of a client.

Palette

Deep certificate blue opens and closes the page; ivory carries the reading. Silver leaf is the line itself — hairlines, seals’ engraving, the guilloche. Garnet is rationed like actual sealing wax: clause numerals, the two wax seals, the tip of the line, one button. When a color appears only where it means something, it keeps meaning something.

Typography

Cinzel — a face drawn from Roman inscriptional capitals — does everything a certificate would engrave: the wordmark, clause numbers, checkpoint titles, seal text, ledger labels, all letterspaced between 0.14em and 0.42em. Body copy is Spectral at 300–400, a quiet modern serif that reads like well-set documentation rather than marketing. The pairing is the whole concept in two fonts: engraved authority above, calm specification below.

The signature: the chain of custody

One continuous line runs the entire page — from a drawn market crate under the hero, through all five checkpoint seals, down the ledger, past the fresh standard, through the wax “press to seal” button, and into an engraved aircraft galley door. It is not decoration; it is the site’s argument (nothing enters or leaves this kitchen off the line) and it is also the navigation — the fixed rail on the right is the same line in miniature, with a station dot per section that fills garnet as the real line passes it.

The path is built at runtime, so it survives any viewport. Every station in the HTML carries an invisible .line-node marker; JavaScript measures their document positions, sorts by depth, and threads one smooth path through them with mid-point cubic handles:

let d = "M" + n[0].x + "," + n[0].y;
for (let i = 1; i < n.length; i++) {
  const ym = (n[i-1].y + n[i].y) / 2;      // S-curve between stations
  d += ` C${n[i-1].x},${ym} ${n[i].x},${ym} ${n[i].x},${n[i].y}`;
}

Drawing is one dash-offset. Scroll position maps to a “depth probe” at 72% of the viewport; the path is pre-sampled at 700 points so a document Y converts to a path length, and the line is revealed to exactly that length, with a garnet tip riding getPointAtLength(). Resize rebuilds everything from live layout, which is why the same code produces the center-weaving desktop line and the left-rail mobile line without a single media query in the JavaScript.

Seals that stamp themselves

Each checkpoint seal is hand-drawn SVG — engraved concentric rings, circular small-caps text on a shared <textPath> arc, a center glyph (the circled U, FDA, USDA, an aircraft, a padlock in wax). Seals begin oversized, blurred, and transparent — hovering above the page — and when the line’s tip reaches their document Y they stamp:

@keyframes stamp {
  0%   { opacity:0; transform:scale(1.7) rotate(-9deg); filter:blur(4px); }
  55%  { opacity:1; transform:scale(.9)  rotate(2deg);  filter:blur(0); }
  75%  {            transform:scale(1.05) rotate(-1deg); }
  100% { opacity:1; transform:scale(1); }
}

The overshoot below 1.0 and back is what sells the impact — a stamp lands, compresses, and settles. A garnet ring ripples out once on impact. The fifth seal (sealed transfer) switches from engraved ink to garnet wax: the moment custody leaves the building, ink becomes wax.

The guilloche

The blue bands carry a drifting guilloche — the interference pattern engraved on banknotes and certificates precisely because it is hard to counterfeit. Here it is one 340×120 SVG tile of four phase-shifted quadratic waves, inlined as a data URI and layered twice, drifting in opposite directions on 90s and 130s loops (the second layer flipped vertically), at 16% and 10% opacity. It reads as watermark, not wallpaper.

Nothing static: the animation ledger

• Hero — two guilloche layers counter-drift behind an engraved certificate frame.
• The line — draws continuously with scroll, garnet tip and halo riding the path.
• Checkpoints — five seals stamp with overshoot, ripple, and a press-back on hover.
• Ledger — numerals count with an ease-out roll, then physically settle (a 4px drop with a bounce) the instant they land on their audited value.
• Rail nav — the miniature line fills garnet in lockstep with the real one and re-inks its dots when floating over blue sections.
• Specification form — focused fields ink a garnet baseline; the submit is a wax seal that visibly presses; success stamps RECEIVED over the card.
• Arrival — the engraved galley door waits at the end of the line.

All of it is transform, opacity, and dash-offset — compositor-friendly — and under prefers-reduced-motion the page arrives complete: line fully drawn, every seal stamped, numerals at their final values, guilloche still.

The three iteration passes

Pass 1 — correctness & composition

The renders exposed the chain slashing diagonally across the flight-kitchen photograph — added skirt nodes so the line routes around its left margin instead; converted the anchor markers from inline positions to responsive classes so the same path hugs a left rail at 390px; and calmed the guilloche (larger tile, lower opacity) after the hero read as fish scales instead of a watermark.

Pass 2 — elevation

Split every seal’s circular legend onto two arcs so the bottom line reads upright, the way a die-struck seal actually reads; tightened the checkpoint rhythm; gave the line’s garnet tip a breathing halo; squared and matted the second freshness photograph; renamed a clumsy legend (“Orthodox Union — certified”); and stopped the ledger stamping the founding year as “1,946”.

Pass 3 — taste & verification

Driving the form end-to-end caught the RECEIVED stamp printing garnet-on-garnet (a CSS fill override no static screenshot would show); re-measured the line’s overlay against the footer so web-font reflow can’t leave dead scroll below the page; thinned the drawn line where it crosses centered headings; and verified the reduced-motion render arrives fully drawn and stamped, empty submits are refused, and both routes show zero console errors and zero horizontal overflow at 1440 and 390.

Do this yourself

1. Pick the document your buyer already trusts and borrow its vernacular. Compliance buyers trust certificates — so the site is one.
2. Make the signature carry the argument. “One unbroken line through five seals” is the sales pitch; the animation just makes it undeniable.
3. Build geometry from live layout, not constants — measure marker elements, thread a path through them, rebuild on resize. Responsive comes free.
4. Ration the accent color like it costs something. Garnet appears only where wax would: seals, clause numerals, the tip of the line.
5. Give every animation a physical metaphor — stamps overshoot and settle, numerals drop into ledger rows, wax presses. Motion with mass reads as craft.
6. Audit generated imagery like a client will. One crop removed a fictional brand name from an otherwise perfect archival photograph.
7. Let reduced-motion be the finished state, not a disabled one: line drawn, seals stamped, ledger settled.
8. Demand three screenshot-critique-fix passes. The first makes it correct; the second makes it rich; the third makes it quiet.

Return along the line