Twine

Kiln & Crema — coffee shop launch with a scroll-driven roast

MrShortFlow - ShortFlowOne
Published

0
  • Project creator

Live site: https://www.twine.net/signin

A shop launch page for a small-batch coffee roastery (fictional brand), designed and built by ShortFlowOne as a showcase project.

The idea: let people feel the roast before they buy. A sticky section turns scrolling into a 12-minute roast: the bean changes colour from green to dark brown, bean temperature and roast time count up, the roast curve draws itself and the bean “cracks” at first crack. Below it, a two-slider flavour matcher picks the right bag and explains why.

Also included: product range with filter and a working demo cart, a subscription builder with live pricing, and a brew guide.

My role: concept, design, copy, front-end build (HTML, CSS, vanilla JavaScript, SVG), responsive and reduced-motion checks, deployment.