Baba Miel
Sep 09, 2026
Baba Miel sells pure honey from Zaghouan, in Tunisia. I designed and built the shop from scratch: a home page that tells the story of the hive as you scroll, a catalogue, a product page, and a cart that sends your order over WhatsApp, in French, English and Arabic. I wanted it to feel slow and warm while staying light. Most people land on it from Instagram or WhatsApp on their phone, so that's who I designed for first.
Telling the story through scroll
The hero stays pinned while the next panel slides over it and widens to the edges of the screen. Then its sentence fills in word by word, with each word tied to its own slice of the scroll. I split the whole sequence into small steps driven by one animation frame loop.
That loop only touches transform and opacity. The browser can move those without recalculating the layout, and layout work is usually what makes scroll animations stutter. The hero title is sized in code to fill its line exactly, then measured again once the fonts load so it never reflows. Lenis smooths the scroll on desktop only. On touch it fights the phone's own momentum, so phones keep native scrolling.
The same motion on phones, in CSS
On phones the same section runs on CSS scroll-driven animations, with one view timeline for the panel, the text and each word, and the script version as a fallback. The honey journey pins a stage while photos rise, settle and wipe over each other with clip-path. If you prefer reduced motion you just see the final state.
I built it twice because the browser handles CSS scroll timelines together with the scroll itself. On a phone that means the panel stays glued to your finger without any JavaScript running. On desktop the script version works fine, so it stayed.
Carousels with no end
The product strips loop forever. The list is rendered several times over, and when the scroll drifts too far it gets moved back by exactly one copy, which you can't see. With a mouse you can drag the strip and it keeps gliding after you let go.
On phones the loop used to judder, because the reset happened while the strip was still moving. Now it waits for the browser's scrollend event, when your finger is off and the scroll has fully stopped, and the jump is invisible again.
Pricing that moves
Every honey lives in one typed catalogue, and the build fails if it doesn't match the product list. Prices roll to their new value with Motion when you change the quantity.
The discount counts every jar in the cart: 10% off from three jars, another 5% per extra jar, capped at 25%. It rewards a bigger order without coupon codes. Checkout writes the order out and opens WhatsApp. That's how the shop takes orders, and it meant there was no payment page to build or secure.
Three languages, one layout
Arabic flips the whole page to right to left, and the cart, the carousels and every control mirror with it. Each right to left bug got a failing test before I fixed it. Unit and end to end tests cover the catalogue, pricing, cart and checkout message, and accessibility is checked on every page in French and Arabic.
The Arabic font only loads on Arabic pages, which took the fonts on other pages from 191 KB to 85 KB. Instagram and WhatsApp open links in their own in-app browser, which is slow, so the important CSS is inlined in the page. I also added a 420 pixel image size so phones stop downloading pictures meant for laptops. When a security hole in the Next.js image optimiser was published, I moved the lockfile to 16.3.4.
