Skip to content
Mavrick Blackburn
All projects

Case study

Fiorello Coffee Roasting Co.

A film you scrub with the scroll bar.

Role
Design and build
Status
Unreleased
Visit fiorello.mavrickblackburn.com (opens in a new tab)

01/06

  • The hero: a video of the counter before opening, played frame by frame by the scroll bar rather than sitting behind the type.
    The hero: a video of the counter before opening, played frame by frame by the scroll bar rather than sitting behind the type.
  • 01 — the founding, told straight: Trieste, a cast-iron drum off a freighter, and a fire relit every working morning since 1931.
    01 — the founding, told straight: Trieste, a cast-iron drum off a freighter, and a fire relit every working morning since 1931.
  • 02 — eight coffees with origin, roast level, bag size and price on one line each; a row opens in place rather than on its own page.
    02 — eight coffees with origin, roast level, bag size and price on one line each; a row opens in place rather than on its own page.
  • 03 — the roast curve, drawn as SVG under four timed steps. Scrolling advances the roast: at 04:30 the beans are yellowing and the page has warmed to match.
    03 — the roast curve, drawn as SVG under four timed steps. Scrolling advances the roast: at 04:30 the beans are yellowing and the page has warmed to match.
  • 04 — the archive as a contact sheet, each frame numbered like a negative and opening into a lightbox.
    04 — the archive as a contact sheet, each frame numbered like a negative and opening into a lightbox.
  • 05 — the visit section: the storefront, the address on Prince Street, and a week of hours with today's row picked out and an open-until line above it.
    05 — the visit section: the storefront, the address on Prince Street, and a week of hours with today's row picked out and an open-until line above it.

Overview

The one project here with nothing to sell. Fiorello is an invented 1931 roastery in Boston's North End, built as an excuse to find out how far a scroll bar can drive a page. Scrolling the hero does not move the type past a video — it plays the video, frame by frame, and the headline then hands its column over to three lines about the morning as the film goes on. Under that: a coffee list that opens one at a time, a real roast curve drawn as SVG, and an archive contact sheet whose frames open in a lightbox. Unreleased is the literal truth — nobody sells coffee here.

Technology

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Cloudflare Pages
  • Wrangler
  • Git & GitHub