Kinlo Coffee Roasters · Independent demo · Fictional brand
A coffee roast you scroll through.
Kinlo Coffee Roasters is a fictional roastery: its brand, address and menu are made up. I built this one-page site as an independent demo, not for a client, to show how scroll motion can explain a product. Scrolling roasts a bean through six stages, from green to full city, then moves through origins, a brew guide, the menu and a visit. Each of its 17 effects explains something about the coffee, and the page still reads complete with motion turned off.
Send today · written quote by the next business day
- Best for
- Businesses with a process worth showing: food and drink, hospitality, makers and product launches.
- The idea
- Show how the product is made as the visitor scrolls, so the motion explains instead of decorating.
- What was built
- A live one-page demo with 17 scroll effects, plus complete reduced-motion and no-JavaScript layouts.
The idea
What was the idea?
Many businesses have a process that is hard to show on a flat page: how coffee is roasted, how a dish comes together, how a product is made. Motion can explain that process, but it often only decorates. The brief I set myself was a page where every effect teaches something about the product, and where nobody misses the story: phones, keyboards, people who turn motion off and browsers without JavaScript all get the whole page.
The build
What was built?
A static one-page site using GSAP 3 and ScrollTrigger, with no build step. A procedural canvas draws the bean for every scroll position and takes it through six roast stages, from green to full city, while the bean temperature and roast time count along. As you scroll, each section rises over the one before it.
- A procedural canvas roast: six stages from green to full city, redrawn for every scroll position
- Bean temperature and roast-time counters that follow the scrollbar
- Section hand-offs: the next section rises over the last, which steps back and dims
- Lenis smooth scrolling for mouse and trackpad only; touch screens keep native scrolling
- Complete reduced-motion and no-JavaScript layouts, with the roast as a list of its six stages
- Text contrast of at least 4.5:1 wherever copy sits over the canvas
The effects
Seventeen effects, each with a job.
Grouped by the part of the page they appear in. The live page lists the same seventeen in its own Effects panel, so you can jump to each one.
Roast01–04
- Procedural image sequence
The bean is redrawn for every scroll position, like scrubbing through film.
- Sticky scroll storytelling
The scene holds still while the story moves one roast stage at a time.
- Scroll-linked counters
Bean temperature and roast time follow the scrollbar; the brew numbers count up once.
- Split-text entrance
The headline rises in word by word when the page opens.
Origins05–07
- Horizontal scroll gallery
Scrolling down slides the four origins sideways, one card at a time.
- SVG line draw-on
Each contour map draws itself as its card arrives.
- Background colour shift
The backdrop warms to a new tone for each origin.
Brew08–10
- Clip-path circle reveal
The brew guide opens through a growing circle, like looking into a cup.
- Scroll-filled illustration
The pour-over cup fills as you read the recipe, pour by pour.
- Text reveal on scroll
Each step’s lines slide up from behind a mask as you reach them.
Menu11
- Stacking cards with 3D tilt
Drinks stack like a deck; with a mouse, the top card tilts toward the pointer.
Visit12
- Day-to-night colour change
The section moves from morning light to evening, with a moving sun and moon.
Footer13
- Velocity marquee
The ticker speeds up with your scroll and reverses when you scroll back.
Across the page14–17
- Magnetic button
With a mouse, “Order beans” leans toward the pointer by a few pixels.
- Film grain
A faint, moving grain over the whole page, like printed paper.
- Layered hand-off
Each section slides up over the last, which steps back and dims, so the order of the story stays visible.
- Inertial scrolling
With a mouse or trackpad, the page glides between wheel steps; touch keeps native scrolling.
Honest scope
What is it, and what is it not?
This is a demonstration of what I can build, not a client result. Kinlo is not a real business: nobody ordered beans, and there are no sales, traffic or conversion figures to report. What you can check is the live page itself and the recording above.
| It is not / It is | It is not | It is |
|---|---|---|
| The brand | A real roastery | Kinlo, with a made-up address and menu |
| Who it was for | A client project | An independent demo by Yo-Da Lai |
| Evidence | Sales, traffic or conversion results | The live page and its screen recording |
| What it shows | That motion will lift your sales | That motion like this can be built, and the page still works without it |
Every visitor
Does it work for every visitor?
The motion is a layer, not the content. With reduced motion turned on or JavaScript off, the page becomes a complete static layout: the roast is a list of six stages beside one still frame, origins and drinks become grids, and the visit becomes three tiles. On phones, the copy sits above the bean and the gallery keeps wide cards.
- Reduced motion
- A complete static layout, with nothing hidden behind an animation.
- No JavaScript
- The same complete layout: every section and its text are in the page.
- Touch screens
- Native scrolling. Smooth scrolling, the card tilt and the magnetic button are for mouse and trackpad only.
- Readable text
- Copy over the canvas roast keeps a contrast ratio of at least 4.5:1.
Straight answers
The obvious questions, answered.
- Is Kinlo a real coffee roaster?
- No. Kinlo, its address and its menu are made up for this demo. Nothing on the page can be ordered.
- Was this built for a client?
- No. It is an independent demo by Yo-Da Lai, so there are no client results or testimonials to show. A real project starts from your product, your content and your brand.
- What do people who turn motion off see?
- A complete static page with the same content: the roast stages as a list, origins and drinks as grids, and the visit as three tiles.
Your process
Have a process worth showing?
Send a short brief about your product and what visitors should understand by the end of the page. Food and drink, hospitality, makers and launches suit this kind of site.
Send today · written quote by the next business day