Shakky — thick shake bar website design

Shakky is a fictional thick-shake bar: five house shakes, blended to order with real fruit, proper ice cream and whole milk. Nobody commissioned it. I set the brief myself: a website for a fun, colourful food brand that is as playful to use as the product is to drink, and that still does the ordinary jobs well, from the menu to a franchise enquiry.

Most food brands put one photograph of the product at the top and move on. I wanted the first screen to be the product doing what it does best, pouring, and to let the visitor’s own scroll do the pouring.

The homepage opens on a pinned stage with five flavours: Strawberry Bliss, Grape Velvet, Kiwi Breeze, Orange Splash and Chocolate Supreme. Each one has its own plate colour, its own giant word set in Jomhuria behind the glass (Strawlicious, Graptastical, Kiwilicious, Orangazing and Chocossimo), loose fruit around it, three tasting tags and a small product card with an add to bag button.

Each flavour rests for about a screen and a half of scrolling, so it can be read and enjoyed, before it pours into the next. Arrows and dots jump straight to any flavour for anyone who would rather click than scroll.

Between flavours, everything changes at once but nothing jumps. The new colour floods out from the glass in a widening circle, the giant word leaves letter by letter and the next one rises in behind it, the old shake sinks and shrinks while the new one surges up with a little overshoot, and the loose fruit flies out past the edges as the next flavour’s fruit spins in.

All of it runs from one number, the flavour position, worked out from the scroll and written straight to the page in a single animation loop. There is no re-rendering while you scroll, which is what keeps it smooth on an ordinary phone.

The shake itself moves. Above the glass the swirl twists, folds and throws off droplets, and in the pool below, waves roll in towards the viewer and break up the screen. The liquid is tied to how fast you scroll, not to where you are: scroll down and it plays forward, scroll up and it plays backward, a quick flick drives it hard and a slow scroll keeps it gentle. Stop, and it does not freeze mid-splash; it carries on for a moment and settles back into its resting pose.

The playhead is shared across the pour, so a surge that starts in one flavour carries on into the next. The glass stays sharp throughout, because only the liquid around it is animated.

Each flavour’s liquid is real filmed motion made from SR7’s own still of the shake. Two image-to-video takes were made for every flavour on a green screen: one in Kling 2.5 Turbo for the swirl above the glass, and one in Kling 3 for the pool, where the glass holds still and waves roll in and break. Both takes start and end on the same still, so the cycle loops without a seam.

The two takes are merged through a feathered mask, swirl above the rim and pool everywhere else, then chroma-keyed and cleaned of green spill, and cut into 61 frames of WebP with a transparent background. They play on a canvas laid exactly over the still, which they replace in one crossfade once they are ready. Desktop frames are 1440 pixels wide, about 3 MB per flavour; phones get their own 960-pixel set, about 1.8 MB. None of it loads until the first screen has painted, and visitors who ask their device for reduced motion get the still shakes and no liquid at all.

Below the hero, a marquee runs into the menu: five tall cards, one per shake, each in its own colour with a short description, calories and size, and an add to bag button. The bag opens as a side panel with quantities and a running total, and the header keeps count as you add.

Because Shakky does not trade, the checkout button reads “Checkout unavailable” and the bag says plainly that orders aren’t taken. Everything up to that point works the way a real bag would, which is the part a client needs to see and feel before deciding what their own ordering should do.

“How we blend” sets out the product in three short cards: fruit that is fresh and cut by hand, proper ice cream and whole milk, and every shake blended to order. A brand like this grows by franchising, so the site has a franchise programme too, with what a franchisee gets and a short enquiry form. The form behaves like a real one, and when it is submitted it says clearly that nothing has been sent.

Because Shakky is fictional, it is built so it can never be mistaken for a working business. There is no address, phone number, opening hours or review anywhere on the site. The visit band says only that the first bar is on its way. The sign-up in the footer and the franchise form both say that nothing is sent, the checkout is switched off and says so, and the footer carries one line saying Shakky is an original SR7 studio project and not a trading business. The disclosure stays in the footer rather than across the design, so the site can be judged as a finished website.

The footer itself is a proper one: the brand and the sign-up, links to explore the page, the five shakes and the small print, finished with a full-width cream Shakky wordmark in Goblin One with a stacked shadow.

The site is built with Next.js 16, Tailwind CSS v4, Lenis for smooth scrolling and zustand for the bag, and exported as plain static files, so it runs on ordinary hosting with no server to maintain. It lives on its own subdomain of the SR7 site. The first screen needs only the first flavour; the other four, and every liquid frame, load after the page has painted, and a phone never downloads the desktop frames. The type is Jomhuria for the giant words, Fredoka for the body and Goblin One for the wordmark.

Measured on PageSpeed Insights against the live site, 1 October 2026: mobile 98 for performance, with 100 for accessibility, best practices and SEO, and a largest contentful paint of 2.4 seconds; desktop 100 across all four. The liquid frames load after the first screen has painted, so they never hold up the page.

A shake bar website that shows the product instead of describing it: five flavours that pour into one another as you scroll, filmed liquid that answers the way your hand moves, a working menu and bag, a franchise programme and a footer that is honest about what the site is.

There are no sales figures or review scores here, because it is an independent studio project with no customers. What it shows is what a playful food or drink brand gets when the art direction, the motion, the film and the build are treated as one job.