# Cocktail Bar Template > 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. Canonical: https://gsapvault.com/templates/cocktail-bar-template Live demo: https://gsapvault.com/demos/cocktail-bar-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | ScrollTrigger | | Techniques | timeline-control, click-toggle, svg, stagger, scroll-reveal | | Uses Lenis | Yes | ## Overview 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. 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. ## Features - 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 ## 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 ### 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 matchMedia 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### 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 `