Effects 01-04: procedural image sequence, sticky scroll storytelling, scroll-linked counters, split-text entrance

Kinlo Coffee Roasters · Small batch, roasted weekly

From green seed to full city.

Every batch spends about eleven and a half minutes in our drum. Scroll to follow one, from raw seed to the roast we pour as espresso.

The six stages of a roast

  1. 01 · 22-100 °C, 0:00-1:45

    Green

    The raw seed is hard, pale green and roughly ten percent water, and it smells more of hay than of coffee.

  2. 02 · 100-155 °C, 1:45-4:45

    Yellowing

    Heat drives the water out, the seed turns straw yellow, and the drum starts to smell like warm bread.

  3. 03 · 155-191 °C, 4:45-8:15

    Browning

    Sugars and amino acids react in the Maillard reaction, turning the bean tan, then brown, and building its sweet, nutty flavours.

  4. 04 · 191-202 °C, 8:15-9:30

    First crack

    Steam and carbon dioxide build up inside until the bean splits with an audible pop, a lot like popcorn, and swells in size.

  5. 05 · 202-217 °C, 9:30-10:55

    Development

    The minutes after first crack decide the cup: the longer we let it run, the more bright acidity gives way to sweetness and body.

  6. 06 · 217-224 °C, 10:55-11:30

    Full city

    We drop the batch just short of second crack and cool it in the tray within minutes: medium-dark, dry to the touch, chocolate and caramel in the cup.

Bean temp
22 °C
Roast time
0:00
Stage
01 / 06

Effects 05-07: horizontal scroll gallery, SVG line draw-on, background colour shift

Four origins on the shelf.

We buy from four growing regions and roast each one to suit it. Altitude, rain and the way the fruit is processed shape the cup long before the beans reach us.

01 / 04 · Africa

Ethiopia Yirgacheffe

The birthplace of coffee. High, cool farms and careful washing give a light-bodied, floral cup.

Region
Gedeo Zone, southern Ethiopia
Altitude
1,750-2,200 m
Process
Washed
  • Jasmine
  • Bergamot
  • Lemon

02 / 04 · South America

Colombia Huila

Steep Andean slopes and two harvests a year. Balanced and sweet: our everyday filter.

Region
Huila, southern Andes
Altitude
1,200-2,000 m
Process
Washed
  • Red apple
  • Caramel
  • Orange

03 / 04 · Central America

Guatemala Antigua

A valley ringed by three volcanoes, with mineral-rich soil and dry, sunny days through the harvest.

Region
Antigua Valley, Sacatepéquez
Altitude
1,500-1,700 m
Process
Washed
  • Cocoa
  • Toffee
  • Baking spice

04 / 04 · Asia-Pacific

Indonesia Sumatra

Humid island weather led farmers to hull the beans while still wet, which gives a heavy body and a deep, earthy taste.

Region
Northern Sumatra highlands
Altitude
1,100-1,600 m
Process
Wet-hulled
  • Cedar
  • Dark chocolate
  • Herbs

Effects 08-10: clip-path circle reveal, scroll-filled illustration, text reveal on scroll

Brew it the way we do.

Our filter recipe for one cup on a cone dripper. Weigh the coffee and the water: it is the quickest way to a cup you can repeat tomorrow.

Coffee
18g
Water · 1:16
288g
Water temp
94°C
Total time
3:00min
Time 3:00 Water 288 g Drawdown

  1. 01 · 0:00-0:45, to 50 g

    Bloom

    Pour 50 g of water to wet every grain, then wait. Freshly roasted coffee is full of carbon dioxide; letting it escape first means the water can reach the coffee evenly.

  2. 02 · 0:45-1:15, to 170 g

    First pour

    Pour in slow circles up to 170 g. Keep the stream off the paper so the water goes through the coffee rather than around it.

  3. 03 · 1:15-1:45, to 288 g

    Second pour

    Continue to 288 g, then give the dripper one gentle swirl so the bed settles flat and drains evenly.

  4. 04 · 1:45-3:00, drain

    Drawdown

    Let it drain through. If it finishes well before 3:00, grind a little finer next time; if it runs long, grind a little coarser.

Effect 12: day-to-night colour change

Visit the roastery.

  1. 07:00 · Morning

    Espresso bar opens

    The first batch is usually in the drum by the time you arrive. Coffee to go, and a seat by the roaster if you want to watch.

  2. 13:00 · Afternoon

    Filter flight

    Three single origins brewed side by side, so you can taste what altitude and processing do to a cup.

  3. 18:00 · Evening

    Decaf and quiet

    The roaster cools down, the lights go low and the decaf goes on. Bring a book.

Find us

Kinlo Coffee Roasters
12 Example Lane
Sampletown

A made-up address for a made-up roastery.

Opening hours

Mon-Fri
07:00-19:00
Saturday
08:00-18:00
Sunday
08:00-16:00

Beans to take home

We roast on Mondays and Thursdays and stamp the roast date on every bag. Buy whole beans at the bar, or ask us to grind them for your brewer.

Effects · 17

What is moving, and why

Each effect on this page has a job. Jump to any of them.

  1. 01Procedural image sequenceThe bean is redrawn for every scroll position, like scrubbing through film.
  2. 02Sticky scroll storytellingThe scene holds still while the story moves one roast stage at a time.
  3. 03Scroll-linked countersTemperature and roast time follow the scrollbar; the brew numbers count up once.
  4. 04Split-text entranceThe headline rises in word by word when the page opens.
  5. 05Horizontal scroll galleryScrolling down slides the four origins sideways, one card at a time.
  6. 06SVG line draw-onEach contour map draws itself as its card arrives.
  7. 07Background colour shiftThe backdrop warms to a new tone for each origin.
  8. 08Clip-path circle revealThe brew guide opens through a growing circle, like looking into a cup.
  9. 09Scroll-filled illustrationThe cup fills as you read the recipe, pour by pour.
  10. 10Text reveal on scrollEach step's lines slide up from behind a mask as you reach them.
  11. 11Stacking cards with 3D tiltDrinks stack like a deck; with a mouse, the top card tilts toward the pointer.
  12. 12Day-to-night colour changeThe section moves from morning light to evening as you scroll.
  13. 13Velocity marqueeThe ticker speeds up with your scroll and reverses when you scroll back.
  14. 14Magnetic buttonWith a mouse, “Order beans” leans toward the pointer by a few pixels.
  15. 15Film grainA faint, moving grain over the whole page, like printed paper.
  16. 16Layered hand-offEach section slides up over the last, which steps back and dims, so the order of the story stays visible.
  17. 17Inertial scrollingWith a mouse or trackpad, the page glides between wheel steps, so every scrubbed scene moves continuously.

With reduced motion turned on, every section becomes a plain, complete layout.