# Free bubble tea shop website template > Free HTML bubble tea shop website template for tea bars and juice stands, with a build-your-own menu. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. This bubble tea shop website template is one free HTML file for a bar with a signature menu, a build-your-own guide and weekly limited drinks. Candy colours sit on white under navy capitals, with stacked cards and scalloped edges. An AI agent such as Claude Code can swap in your menu, prices and photos. - Page: https://8b.com/templates/chewsday/ - Live demo: https://8b.com/templates/chewsday/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/chewsday/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/bubble-tea-shop-website-template - Download ZIP: https://8b.com/templates/chewsday/bubble-tea-shop-website-template.zip - Template name in the repository: Chewsday - At a glance: One 88 KB index.html with its CSS and JavaScript inside, 11 sections, 16 Unsplash photos credited in CREDITS.md, Bricolage Grotesque, Playpen Sans and Radio Canada Big from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/bubble-tea-shop-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/bubble-tea-shop-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/bubble-tea-shop-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/bubble-tea-shop-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . Replace the demo menu, build layers, weekly drops, regulars' messages and name puns first. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists; the scripts read them. Ask me for any missing fact and never invent prices, allergens, hours, addresses, reviews or contacts. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/bubble-tea-shop-website-template my-site`. ### Bubble tea shop website design prompt for any AI tool Use this prompt to build a bubble tea or juice bar site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions. With the template itself, the short prompt above is enough. ```text Build a one-page website for a bubble tea shop with a short signature menu, a build-your-own cup and weekly drops, in plain HTML, CSS and JavaScript, with GSAP and ScrollTrigger for scroll motion. Sections in order: navigation, signature cups, build your cup, the pearls, how to order, house rules, customer chat bubbles, weekly drops, questions, visit with a group order form, footer. Type: Bricolage Grotesque at weight 800, condensed and uppercase, for headings, and Radio Canada Big for body text, buttons, prices and labels. Colours: #02091d ink for text, borders and the footer, #ffffff for the page, and flat fills #529dff blue, #ff7a33 orange, #53c690 green, #f6f07a yellow and #e3a2f8 lilac for build cards, chat bubbles and drop cards, with #596078 for lede lines under headings. Layout: stacked colour cards that stick under a pill nav bar, scalloped photo frames, tilted cards and chips, ink outlines; no purple gradient, no three icon cards, no centred hero with two buttons. Motion: cards swing, stack and fly in with the scroll, and the drops rail slides sideways while pinned; switch it off for reduced motion. One action, Build your own, repeated in the first view and the nav. Copy is short and playful. Ask me for prices, allergen and vegan claims, hours, address and drop dates, never invent them, and list every placeholder. Check: no console errors, works at 390px with 44px tap targets, keyboard focus visible. ``` ## About A bubble tea website template has to carry a menu, opening hours and a way to ask for big orders, and this one has all three on a single page; the order form needs a form service. The build-your-own cards also suit a juice bar website template or a dessert shop selling toppings. Owners looking for bubble tea web design or bubble tea templates want something playful, not a plain cafe layout. Replace the demo Leeds address and prices. For a bubble tea shop website template for Claude Code, Cursor or Codex, give the agent index.html and AGENTS.md and start with the menu: four signature cups, five build layers with four options each and four dated weekly drops. Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes, since the animation scripts read them. The agent must ask the owner for real prices, vegan and allergen claims, hours, the address and the drop dates, and rewrite the name puns if the bar has another name. Pick this when a drinks business sells from a short signature menu and wants personality: a tea bar, a juice stand or a small cafe with weekly specials. A sit-down place with a long menu fits the [grill restaurant](https://8b.com/templates/hwaro/) template better. The weak spots are the dense first view, because the page has no full-screen hero, and the missing checkout. For a no-code route, 8B offers a separate builder. ## Design - Palette: #ffffff (page background, nav bar, FAQ, house rules and drop cards, the order form, secondary button, footer text and one chip fill), #02091d (text outside the footer and the visit photo, borders and outlines, the dark footer panel, button fill on hover), #529dff (primary button, house rules band, first build card, second ritual step, first chat bubble, first drop colour, Menu nav pill, first footer tile, tinted pearls section), #ff7a33 (second build card, third ritual step, second chat bubble and second drop colour, Build nav pill), #53c690 (third build card, first ritual step, third chat bubble and third drop colour, Visit nav pill), #f6f07a (FAQ panel, fourth build card, default chip fill, footer tile hover, visit bump), #e3a2f8 (fifth build card, fourth chat bubble and fourth drop colour, Drops nav pill), #c8400c (defined in :root, but no rule or element uses it), #596078 (grey-blue lede lines under section headings) - Fonts: Bricolage Grotesque (section headings, the wordmark, step numbers and the Pick, Shake, Sip words: weight 800, condensed to 75% width, uppercase), Radio Canada Big (body text, buttons, labels, prices, FAQ questions and addresses, in weights 400 to 600), Playpen Sans (loaded with the page and set on one badge style that no element uses, so it can be dropped) Most blocks sit in rounded colour fields on white. The menu is a two-column grid with every second cup pushed down, the build section stacks five colour cards that stick under the nav, and the house rules band has a scalloped top and hem. Blue, orange, green, yellow and lilac repeat across cards, chat bubbles, drops and footer tiles, one colour per item. Small devices carry the style. Buttons fill from below with a scalloped edge on hover, link underlines turn from a solid line into a row of dots on hover, and the menu and pearl photos are masked with scalloped edges, so the edges look piped rather than cut. ## Sections and motion - **Navigation** (navigation): floating pill bar with the wordmark and four colour-outlined links. Motion: The pill bar tucks away when you scroll down past 160 px and returns on scroll up or keyboard focus, also with reduced motion. - **Signature cups** (drinks): the page's opening: where-line, h1, lede and two buttons above four signature cups in staggered columns. Motion: On load the heading rises and scales in and the where-line, lede and buttons fade up; on scroll each cup flies in from alternating edges and settles straight. - **Build your cup** (build): five stacked colour cards (Tea, Milk or fruit, Pearls and toppings, Sweetness, Ice and shake), each with its options and a photo. Motion: Each colour card sticks below the previous one so the bands stack, and from the second card on it grows from 84% scale while the covered card recedes, tied to the scroll. - **Cooked every two hours** (pearls): a scalloped photo frame with eight texture chips and a paragraph about the pearls. Motion: The scalloped photo frame grows from 55% scale while eight chips fly out from behind it and land at their tilted places, tied to the scroll. - **How to order** (ritual): three ordering steps as big words: Pick, Shake, Sip. Motion: Each step card hangs from its top edge and swings from a tilt to rest once as it comes into view. - **House rules** (rules): House rules on a blue band with a scalloped hem and four white cards. Motion: The blue band is pulled down like a blind with the scalloped hem riding its edge, and each card swings in as the hem passes. - **Overheard at the counter** (regulars): four regulars' messages as chat bubbles with the bar's replies. Motion: Each chat bubble swells from its tail as its row arrives, and the bar's reply slides into place behind it. - **Tuesday drops** (drops): four weekly limited drinks on a rail that travels sideways while the background changes colour. Motion: Pinned: the section is held while the rail of four drop cards slides left, and the stage background turns blue, orange, green and lilac as each card reaches the centre. - **Good questions** (faq): five questions and answers in native details elements. Motion: Each question card swings from a tilt to rest once as it scrolls into view; the answers open without JavaScript. - **Come chew it over** (visit): full-bleed photo with a big invitation, then address, hours, contact details and a group order form. Motion: The photo widens from an inset rounded card to full width, the title grows into place and the colour bumps (five, three on phones) rise unevenly along its lower edge. - **Footer** (footer): large wordmark, contact and social links, four tile links and the legal line with the Design: 8B credit. Motion: The four tile links climb from below their row at different lags while the footer scrolls in. ## Good for - bubble tea bar or milk tea shop - juice bar, dessert parlour or ice cream shop - small cafe with a signature menu and weekly specials - any youthful food or drink brand that wants a candy palette and a playful layout ## Questions **Is it free to use for a real shop?** Yes. The code is MIT licensed, so you can use and change it for a real bar. It is one HTML file. The 16 photos come from Unsplash and are listed in CREDITS.md, which belongs in the folder you upload. Bolt can also open this repository from [its card among the Bolt designs](https://8b.com/templates/for-bolt/). **How do I give it to an AI agent, or vibe code it?** Download index.html and AGENTS.md from the repository, put them in one folder and open it in Claude Code, Cursor or Codex, then paste the prompt from this page. No file yet? Paste the bubble tea shop website design prompt below into Lovable, v0 or Bolt, which write their own code from it. **What must stay when I change the menu?** Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes. The five build cards take colour and offset from nth-child rules, an inline --layer-i number and the data-8b-sticky-under-nav attribute, so a sixth needs all three. A fifth drop card needs a --drop-fill rule. **Does the group order form send anything?** No. A script checks the required name and email and the cup count (10 to 200), shows a thank-you line and clears the fields. Without JavaScript the browser posts it back to the page and nothing is sent. Connect Formspree, Netlify Forms or your ordering tool before you publish, whether [from a GitHub Pages copy](https://8b.com/templates/github/) or another host. **What happens with reduced motion?** The page still reads in full. Entrance animations, [scroll-linked motion](https://8b.com/templates/animated/) and smooth scrolling are off, the cards, chips, bubbles and bumps show at rest, and the drops section is a normal block. The nav bar still tucks away on scroll and button fills still run. **Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and its engine designs a new site, with its own design, not this template. Designing and restyling are free. Publishing with hosting and SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT. ## Before publishing Replace: social preview image, favicon, phone number, email address, map, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - Find the bar button in the first section and Visit pill in the navigation lead to #visit now; point them to keep them on the visit section, or point them to your map or booking page. - Build your own button in the first section lead to #build now; point them to keep it, or point it to your online order page. - Reserve a cup button in the drops section lead to #visit now; point them to your pre-order or reservation page, or keep it on the visit section. - Get directions button in the visit section lead to a Google Maps search for Leeds now; point them to the Google Maps link of your bar. - Phone and email links in the visit section and the footer lead to a tel: link and a mailto: link to placeholders now; point them to your shop phone in tel: form (+44...) and your email. - Instagram and TikTok links in the footer lead to the home pages instagram.com and tiktok.com now; point them to your profile URLs. - Send the order button of the group order form lead to a script that checks name and email, shows a thank-you line and clears the form; nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your ordering tool, and drop the thank-you script. - The page has no full-screen hero: it opens on a heading, two buttons and the signature menu, so the first view is dense on short phones. - The build cards are sticky under the navigation bar and the drops section is held for as much scroll as its rail (intro and four cards) is wider than the screen; both ask for long scrolling and are worth checking on short laptop screens. - With reduced motion the scenes are off: the cards, chips, bubbles and bumps show at rest, and the drops section is a normal block instead of a held sideways rail. - GSAP, ScrollTrigger and Lenis load from the jsDelivr CDN at the end of the body; the Instagram and TikTok links point to the sites' home pages until you change them. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).