How this site was made
Build notes for the "Flight-Day Fresh" concept — one of five design directions prepared for Borenstein Caterers, Inc. The page has a single job: make "cooked and boarded the same day" something you can feel in your scroll wheel.
i.Concept & art direction
Borenstein has just rebranded around freshness, and freshness is fundamentally a claim about time. So the site is organized around a day, not a sitemap. Instead of telling airlines "our food is fresh," it walks them through one meal's actual day — 03:40 at the market, 05:15 prep, 08:30 blast-chill and pack, 11:05 trucks, 14:20 wheels-up — and lets the elapsed hours make the argument.
The direction is "air and light everywhere": white space, market greens, citrus, and warm challah gold, with the page's lighting itself becoming the narrative device.
ii.Palette & type
Type is Fraunces — a contemporary serif whose italics are genuinely juicy, used for headlines and every emphasized phrase — paired with Instrument Sans for interface text, kickers, and body copy. The recurring pattern is a roman headline that turns italic exactly where the claim gets emotional: "cooked today."
The pre-dawn navy (#0c1730) isn't part of the brand palette; it belongs to the clock. It appears only while the narrative holds you in the hours before sunrise.
iii.The signature: the Flight-Day Clock
A 24-hour dial (midnight at the top) with the meal's working day — 03:40 to 14:20 — drawn as a gold arc. In the hero it runs on real local time, with a sweeping second hand and a caption that reports what the kitchen is actually doing at this hour.
In the narrative section the dial is scrubbed by scroll. A 520vh track pins a full-viewport stage; scroll progress maps through keyframes of (hour, background color), so the hour hand swings from 03:40 to 14:20 while the entire viewport relights — pre-dawn navy with twinkling stars, a horizon glow at first light, bright morning green-white, noon white, and finally cabin gold. Text color, the dial's face, and the fixed header all flip theme with the light.
- Hour interpolation — piecewise-linear between five keyframes; the readout (
03:40 → 14:20) is formatted from the continuous hour, so the clock genuinely turns rather than jumping. - Stage cards — five absolutely-stacked articles crossfade at fixed progress thresholds; two use photography, three use hand-drawn SVG vignettes (market crates, hi-loader at the aircraft door, wheels-up) in the same line-art dialect.
- A progress rail — the five departure times as clickable dots, which scroll the track to the right progress fraction.
Particle work is deliberately restrained: 26 dew droplets on a canvas over the prep photo (a few slide, most just gleam), three blurred steam wisps over the plated tray, and the ever-sweeping second hand. Everything pauses under prefers-reduced-motion.
iv.Three passes over the bench
Screenshots showed ghost text from the outgoing stage card lingering under the incoming one — fixed with a delayed visibility toggle on top of the opacity crossfade. Redrew both aircraft vignettes (the first jet read as a whale), hid the header tagline on small screens, and moved the progress rail off the stage text on mobile.
Caught a real bug: the rail buttons scrolled to offsetTop relative to a positioned ancestor, landing a viewport short. Held the final cabin-gold keyframe over the last 12% of the track so the sticky section unpins into a matching gradient — no more hard gold-to-white seam. Brightened the dawn horizon glow and rebuilt the market vignette around a hanging lamp with a warm halo.
The founding-era photo carried staged signage that didn't belong in a client pitch; an oversized 205% crop anchored to the top-right keeps the truck, tent, and propeller airliner and loses the crates. Verified count-up easing on the numbers band, mobile type scale, and a clean console with zero horizontal overflow on both pages.
v.Do this yourself
- Pin, then scrub. A tall track +
position:stickyviewport +requestAnimationFrame-throttled scroll math is all the "scrollytelling" machinery you need — no library. - Let light carry the story. Interpolating one background color through keyframes (and toggling a dark/lit class at a threshold) relights an entire scene for a few lines of code — cheaper and calmer than parallax.
- Draw what you can't shoot. When photography only covers some beats, design a consistent SVG vignette style for the rest; consistency reads as intent.
- Restrain the particles. A couple of dozen dew drops beat two thousand. If an effect is visible in a screenshot but not distracting in a video, it's at the right volume.
- Make time literal. If your claim is temporal ("same day," "24 hours," "overnight"), put a real clock on the page and wire it to real time; specificity converts.