Concept Storefront2026

Bobaloo

Concept boba shop — every drink repaints the page

Bobaloo is a concept brand and storefront for a boba tea shop. The brief I set myself: make ordering a drink feel as fun as drinking one. Every drink gets its own full-screen moment, and the whole page — background, type, buttons — repaints to that drink’s colour as you scroll.

Visit live project

RoleSolo concept — brand, design & frontend build

Timeline2026

PlatformWeb storefront · mobile-first

Next.jsTypeScriptLenisCanvas animation

// inside the product

Bobaloo hero — brown sugar boba milk on a sand-coloured page — The opener — brown sugar boba milk, and the first of the page’s colour moods.

Bobaloo strawberry cream milk tea section on a pink page — Keep scrolling and the whole page turns strawberry pink for the next drink.

Bobaloo mango pomelo sago section on a yellow page — Mango pomelo sago — same layout, a whole new colour world.

Bobaloo menu grid with drinks, prices and add buttons — The menu — categories, prices and one-tap add to cart.

Bobaloo toppings builder with a drink and topping options — Your cup, your rules — tap up to three toppings and watch them land, priced live.

01 — The idea

Make the menu the show

Food and drink sites usually hide the product in a grid of small thumbnails. Boba is colourful, playful and very photogenic — so here, the drinks are the hero, one at a time, full screen.

The goal was a store that feels like a brand you’d want to follow, not just a place to tap “add”.

02 — The signature

Every drink repaints the page

As each drink scrolls in, the entire page shifts to its colour: brown-sugar sand, strawberry pink, mango yellow, taro lilac, matcha green, and a deep after-dark green for the espresso drink. Each gets its own one-line voice — “Purple is a flavor.”, “After dark, add espresso.”

It makes scrolling the menu feel like flipping through a moodboard.

03 — The interaction

Your cup, your rules

The toppings builder is the playful centre: tap up to three — pearls, popping boba, cheese foam, grass jelly, pudding, sago — and watch each one land in the cup while the price updates live. Then one tap carries that exact drink to the cart.

04 — The commerce

The unglamorous parts, done properly

A concept still has to behave like a real shop, so the rules are real too.

A categorised menu — milk tea, fruit tea, shakes & smoothies, coffee
Buy 3, get 1 free — the cheapest drink comes off automatically, mix and match
Weekday happy hour with a live “next happy hour” countdown
Promo codes in the cart, and pickup, delivery (free over a threshold) or dine-in by table QR

05 — Build

Playful, but fast

Next.js with Lenis smooth scrolling, video and canvas for the drink motion, and a “Play tour” mode that auto-scrolls the whole store like a short ad. Mobile-first throughout, because that’s where people order boba.

Bobaloo is a fictional brand — a showcase of what a small food & drink business’s site could feel like.

// the result

6 moodsWhole page recolours per drink

Build-a-cupToppings, priced live

Real cartDeals, codes, countdowns

Got a manual workflow worth automating?

This kind of focused, end-to-end tool is exactly what I like building. Let's talk about yours.

Start a conversation All work