Building a brand that roasts in real time.

01 · The Brief

Warm lab, not a coffee shop mood board.

Morning Theory is a specialty coffee roastery and subscription business. The creative brief called for something between a café and a chemistry lab: cream paper, caramel-to-espresso gradient thinking, precision without being cold. The idea we landed on treats roast level not as a menu label but as a literal design system variable. One slider, dragged from Light to Dark, walks the entire site through the same color and material transformation a bean actually goes through in the drum: pale and papery, through caramel, to near-black espresso. Everything else, the copy, the type, the layout, stays disciplined and quiet so that transformation reads clearly.

The build brief in one line: interpolate a whole brand across a physical variable, and let the roast curve BE the design system, not just a hero decoration.

02 · Palette and Type

Four colors, one curve.

The palette is deliberately small: a paper background, a tan surface tone, a dark espresso ink, and three named roast colors. The trick is that those three roast colors are not a footnote, they are the exact three stops the site interpolates through as you drag the slider. Nothing is invented for the animation. It was already in the palette.

Dragged across the full range, the page background travels this exact curve, eased so it stays light through most of the drag and darkens quickly near the end, the same way a bean visibly changes more in its last minute in the drum than its first.

03 · The Techniques

How the twelve core effects work.

function applyRoast(t){
  const e = easeInCubic(t);
  const bg = mixHex(bgFrom, bgTo, e);
  const isDark = luminance(hexToRgb(bg)) < 130;
  const text = isDark ? darkText : lightText;
  root.style.setProperty('--bg', bg);
  root.style.setProperty('--text', text);
  // ...ten more properties, same pattern
}

.steam{ background:var(--steam); filter:blur(6px);
  animation:steamRise 4.2s ease-in-out infinite; }
@keyframes steamRise{
  0%{opacity:0; transform:translateY(0) scale(.7);}
  55%{transform:translateY(-30px) translateX(6px) scale(1.05);}
  100%{opacity:0; transform:translateY(-58px) scale(1.3);}
}

<path class="pour-path" pathLength="1"
  d="M70 46 C 78 60, 84 66, 86 78"/>

.pour-path{ stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s ease; }
.brew-card.in-view .pour-path{ stroke-dashoffset:0; }

.plan-card{ transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.5,.1,.15,1); }
.plan-card.flipped{ transform:rotateY(180deg); }
.plan-face{ position:absolute; inset:0; backface-visibility:hidden; }
.plan-back{ transform:rotateY(180deg); }

.glass-photo img, .glass-video{
  filter:brightness(var(--ph-b)) saturate(var(--ph-s))
         contrast(var(--ph-c)) sepia(var(--ph-sep)); }
/* from JS, per dial position t: */
root.style.setProperty('--ph-b',  lerp(1.04, 0.60, t));
root.style.setProperty('--ph-tint', lerp(0.10, 0.52, t));

<video muted loop playsinline preload="none"
  poster="img/poster.jpg"><source src="img/loop.mp4"></video>

if(!reducedMotion && !connection.saveData){
  video.load();
  video.addEventListener('canplay', () =>
    video.play().then(() => video.classList.add('live')));
}

const p = clamp01(-rect.top / (rect.height - vh));
const q = clamp01(p / 0.9);           // the morning itself
const ho = clamp01((p - 0.955) / 0.045); // the theme handoff
time = lerp(285, 540, q); // minutes: 04:45 to 09:00

const FLAPSET='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789·';
cells[i].end = base + i*stagger + Math.random()*70;
// every ~46ms until then:
cell.textContent = FLAPSET[(Math.random()*FLAPSET.length)|0];

heat.animate(
  [{transform:'translateY(-70vh)', opacity:0},
   {opacity:.3, offset:.35},
   {transform:'translateY(110vh)', opacity:0}],
  {duration:840, easing:'cubic-bezier(.3,.6,.4,1)'});

const y = sy + (ty-sy)*(p*p)          // gravity
        - apex * Math.sin(Math.PI*p) * .5; // the arc
frames.push({transform:`translate(${x}px,${y}px)
  rotate(${r0+(r1-r0)*p}deg)`});
bean.animate(frames, {duration:640+rand(280),
  delay:row*190+240, easing:'linear', fill:'both'});

.orbit-spin{animation:orbitSpin 46s linear infinite;}
.chip-in{animation:orbitSpin 46s linear infinite reverse;}

btn.onclick = () => {
  row.classList.add('exploding');       // orbit scatters
  history.pushState({mt:slug}, '', '#'+slug);
  setTimeout(openTakeover, 150);        // bag becomes the page
};
window.onpopstate = e =>
  e.state?.mt ? open(e.state.mt) : close();

function revealCheck(){
  const vh = innerHeight;
  pending = pending.filter(el => {
    const r = el.getBoundingClientRect();
    if(r.top < vh * 0.92 && r.bottom > -60){
      el.classList.add('in'); return false;
    }
    return true;
  });
}

04 · Replicate It

Build the same system, step by step.

1. Pick your two end colors first. Choose a background pair (light and dark) that already exist somewhere in your brand palette rather than inventing new ones.
2. Write a hex mixer. A small hexToRgb / lerp / rgbToHex trio is all the color math you need. No animation library required.
3. Ease the ramp, don't linear it. An easeInCubic curve on the interpolation factor makes the transformation feel physical instead of mechanical.
4. Swap text by luminance, not by position. Compute the resulting background's luminance and flip text color at a brightness threshold so contrast is guaranteed at every point in the drag.
5. Push everything through CSS custom properties. Update :root variables from JS, then let ordinary CSS (background:var(--bg)) do the repainting. This is what makes the "whole site" re-theme without touching every element in JS.
6. Throttle the input with requestAnimationFrame. Pointer or drag events fire far faster than the screen can usefully repaint; batch them into one update per frame.
7. Keep one anchor color constant. Primary call-to-action buttons stay a fixed brand color throughout the ramp, so the "buy" action is never hard to find, even mid-drag.
8. Respect reduced motion. Clamp animation and transition durations under a media query so the re-theme still functions, just without the crossfade.

05 · Tools Used

What actually built this page.