033
Optional AI setup

Cocktail Bar Template

£10

A complete one-page site for a 1920s speakeasy, built on a deep teal-black ground with brass deco linework, whose signature is a build-your-cocktail glass that pours coloured liquid layers as you pick a base spirit and mixers.

ScrollTrigger Lenis advanced
5 more details
timeline-controlclick-togglesvg-animationstaggerscroll-reveal
Cocktail Bar Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Cocktail Bar Template demo in new tab

About this template

A production-ready site for an unmarked cocktail bar that leans all the way into 1920s art-deco: a deep teal-black room, cream type set in a geometric deco face, brass hairline framing, and jade used only where a drink is poured. It refuses the category's velvet-and-neon defaults and the AI-default dark-with-one-glow look, and reads as a designed venue on first open.

Read the full template overview

The signature is a working cocktail builder. Pick a base spirit from a native radio group, toggle mixers as chips, and an SVG-and-CSS highball fills with coloured liquid layers, poured bottom to top in a staggered timeline, while a recipe panel assembles itself: the drink's house name, the measures, a garnish line, and an ABV computed live from the volumes you chose. It is selection-based, so it works by tapping and needs no fine pointer.

Everything a buyer changes is a token or a data row: the four bases, six mixers, their colours, measures and ABV live in one array in the script, and the whole palette is one block at the top of the stylesheet. Copy is written for a fictional Clerkenwell bar in a dry, knowing voice. The glass, deco frames and wordmark are drawn in CSS and SVG; two moody, art-directed bar photographs ship bundled as optimised WebP, graded to the room's palette, for the hero backdrop and the find-us section.

What's included

11 items
  • Complete deployable one-page site: sticky nav, deco hero, the cocktail builder, a signature-drinks menu, a find-us panel, and footer
  • Signature build-your-cocktail: a native radio base spirit plus mixer chips pour coloured liquid layers into an SVG highball in real time
  • Layers are content: each ingredient is a coloured band with its own measure and ABV, poured in a staggered timeline with a meniscus highlight riding the surface
  • Live recipe panel assembles the drink's house name, the measures, a garnish line and an ABV computed from the actual volumes selected
  • House drink names: curated combinations resolve to named signatures, and anything else composes a coherent name from the boldest ingredient
  • Native radio and checkbox inputs, so keyboard support, grouping and checked state come from the browser rather than custom JavaScript
  • Deco display type in Poiret One over Questrial body; the coupe motif, glass, deco frames and ticks are drawn in CSS and SVG, with two bundled art-directed bar photographs (hero backdrop and find-us) baked to the palette as optimised WebP
  • Every translucent value resolves from an RGB triple token, so the four-colour palette reskins from one block
  • Sticky nav with deco underlines and a scroll-reveal rhythm across every section
  • Lenis smooth scrolling wired in and fully optional
  • Accessible: cream body copy clears 12:1 on the ground, the builder degrades to a readable static featured drink and full menu with JavaScript off, and reduced motion fills the glass instantly with no pour

Perfect for

5 use cases
  • Cocktail bars, speakeasies and hotel bars wanting a room-first site rather than a booking widget
  • Any venue whose product is a menu of made-to-order things: coffee roasters, juice bars, natural-wine rooms
  • Distilleries and small-batch spirit brands presenting a serve or a house cocktail
  • Supper clubs and unlisted rooms that trade on atmosphere and a short, confident menu
  • Pop-ups and residencies that need one striking page with a memorable interaction

How it works

4 sections

The cocktail builder

The whole builder is one data array of four bases and six mixers, each carrying a measure, an ABV and a liquid colour, plus a small table of named signature combinations. A base is a native radio group and the mixers are native checkboxes, so grouping, keyboard support and checked state are the browser's job, not the script's. On any change the script recomputes the active ingredients, resolves a drink name, tallies the ABV from the actual millilitres, and rewrites the recipe panel.

Pouring the layers

The glass is one inline SVG. Each ingredient owns a liquid band rendered as a rect inside a group clipped to the glass interior, its rounded base included, so a pour is contained at every fill level and can never spill past the wall. The bands stack bottom to top, sized by volume and scaled to fit when a drink gets long; a change raises or drains each band's surface in a single staggered timeline, with a bright meniscus riding the top. The glass outline, rim and deco ticks are an SVG overlay drawn on top of the liquid.

Reduced motion

Under prefers-reduced-motion the script's own branch still wires every control, but each change sets the layer heights instantly with no pour and no stagger. The CSS media query independently drops transitions and reveal offsets, so the page is complete and static from first paint whether or not the script runs.

Without JavaScript

The glass ships filled to a featured default drink through the liquid rects' default positions, and the recipe panel and the full signature menu are plain HTML, so a visitor with scripting off gets a readable bar with a real featured serve. The bundled photographs load as ordinary images with no script. The script adds a class that enables the reveals and hands the glass over to the builder; nothing is hidden behind that class that a no-JS visitor needs.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Does the cocktail builder make real recipes?

Yes, in the sense that the maths is honest. Each ingredient is a coloured band with its own measure and ABV, and the recipe panel totals the measures and computes the drink's ABV from the actual volumes selected. Curated combinations resolve to named house signatures; anything else composes a name from the boldest ingredient.

Can people book a table?

No booking system. The find-us panel is designed for a room-first site, which is the point: speakeasies and hotel bars usually want atmosphere and a short menu rather than a booking widget bolted to the hero. Point it at your existing reservations if you need one.

Is it all illustration, or do I need photographs?

Mostly drawn. The coupe motif, glass, deco frames and ticks are CSS and SVG, with two bundled bar photographs (hero backdrop and find-us) baked to the palette. So you need two decent shots of the room, not a full shoot.

Can I use it for something other than cocktails?

Yes, for any menu of made-to-order things. Coffee roasters, juice bars and natural-wine rooms use the same builder shape, and distilleries can use it to present a house serve. The 1920s deco art direction is the part you have to actually want.

Is dark teal with cream type readable enough?

Yes, the cream body copy clears 12:1 on the ground, and every translucent value resolves from an RGB triple token so a four-value repalette does not silently break that. With JavaScript off the builder degrades to a readable static featured drink plus the full menu.

Paid template

Purchase to unlock the code.

Buying Cocktail Bar Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

  1. Upload the whole folder (index.html, assets/) to any static host.
  2. Edit the copy in index.html and the colours in assets/style.css (:root).
  3. The three CDN <script> tags at the bottom of index.html load GSAP, ScrollTrigger and Lenis. Leave them as they are, or self-host if you prefer.

That is the whole install. Everything below is optional customisation.

The cocktail builder

The builder is one data array near the top of initBuilder in assets/script.js:

Code snippet omitted: it ships with the download.

To change the bar's stock:

  • Edit a drink: change its label, ml, abv, amt (the text shown in the recipe) or garnish.
  • Add an ingredient: add a row to BASES or MIXERS, add a matching <input> in the builder markup (same value as the id), add a <div class="layer" data-layer="ID"> inside [data-well] (mixers go in canonical order, bottom to top), and add its colour as .layer[data-layer="ID"] { background: var(--liq-ID); } plus a --liq-ID token in :root.
  • Rename a signature: the SIGNATURES map keys a base id and the sorted active mixer ids to a house name. Anything not in the map composes a name from the boldest ingredient via DESCRIPTOR.
  • Fill depth: FULL_ML is the volume that fills the glass to CAP (90%). Lower FULL_ML to make drinks read fuller.

ABV is computed live from the millilitres and never hand-entered. The garnish line concatenates every active mixer's garnish.

The data-layer, data-recipe-name, data-recipe-measures, data-recipe-garnish, data-recipe-abv and data-well hooks are what the script reads; keep them if you restyle.

Sections

Every section is guarded independently, so you can delete any of them and the rest still runs:

  • Hero ([data-hero]): the wordmark, coupe motif and deco frame. Masked line reveal on the title; the data-hero-fade="pre|post" attributes order the fade-ins.
  • Builder ([data-builder]): the signature. Described above.
  • Menu (#menu): a plain list of house drinks. Add or remove .menu-item blocks freely.
  • Find us (#find): address, hours and reservations cards.
  • Footer.

Scroll-in reveals are opt-in per element with data-reveal.

Palette

Four colours and their tints. Every translucent value in the stylesheet resolves from an --*-rgb triple, so a reskin is the :root block and nothing else.

Code snippet omitted: it ships with the download.

Contrast, measured as used (composited on the surface each colour lands on):

Pair On ground On surface
cream #EFE6D2 (body copy) 12.19 : 1 10.62 : 1
dim #BBAF95 (secondary) 6.98 : 1 6.07 : 1
brass #C6A15B (display / UI) 6.23 : 1 5.43 : 1
jade #3E8E7E 3.87 : 1 3.37 : 1

Cream is the reading colour and clears AA with wide headroom at 400 weight, which matters because both faces ship in a single weight. Brass clears AA for normal text too, but is rationed to display type, small-caps eyebrows, rules and UI so the room stays cream-on-teal.

Jade is banned as small body text (3.87:1 fails the 4.5 floor). It is used only for the poured liquid (non-text), hairline marks (3:1 UI floor), and headings at 24px and above (3:1). The --liq-* tokens are decorative fills inside the glass and carry no text.

Images

Two photographs ship with the template as optimised, art-directed WebP in assets/img/:

  • hero.webp (1920px) — an atmospheric speakeasy interior used as the hero backdrop, behind and around the deco frame, under a heavy ground-toned gradient.
  • room.webp (1200px) — a bartender straining a stirred cocktail, used in the "Find us" section.

Both are graded dark, warm and desaturated so they read as one campaign on the teal-black ground, and each sits over a background-color: var(--ground) fallback. A dark overlay keeps the cream hero headline past 4.5:1 on every pixel of the backdrop. The photos are an enhancement only: with images off (or with JavaScript off) all copy and the full page remain readable.

Regenerating / swapping. The bundled files are baked from assets/img-manifest.json by the repo's build script. Each entry names a source src (a remote URL or a local path), an output name, a width, a JPEG/WebP quality, and a grade (saturation, brightness, gamma, hue, tint) that is baked into the pixels. To swap an image, change its src (and tune the grade), then rebuild:

Code snippet omitted: it ships with the download.

Keep the output names (hero, room) so the markup (assets/img/hero.webp, assets/img/room.webp) still resolves, or update the <img src> in index.html to match. The width/height attributes on the <img> tags should track the baked dimensions to avoid layout shift.

Credits. Photographs from Unsplash, used under the Unsplash License with attribution:

Accessibility

  • Native inputs: the base is a radio group and the mixers are checkboxes, so keyboard support, grouping and checked state come from the browser. The recipe panel is an aria-live region, so the assembled drink is announced as it changes.
  • Reduced motion: prefers-reduced-motion: reduce removes the pour, the line reveals and all transitions. The glass fills instantly to the selected drink and the page is complete and static from first paint.
  • No JavaScript: the glass ships filled to a featured drink (The Vane Martini) through inline layer heights, the recipe panel is real HTML, and the full menu is readable. The script only adds interactivity and the scroll reveals on top.

Dependencies

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.