ConceptWebsiteConceptBeverage / RTD3D / WebGLMotion DesignBrand2026
Barry's Drink
A concept site for an Australian RTD drinks brand — real-time 3D cans, a physics-driven hero and a hand-built stockist map, shipped before any brief existed.
ClientConcept — Australian RTD (ready-to-drink) beverage brand
LocationAustralia
RoleSolo (concept, design, development, deployment)
01
Overview
Barry's is a self-initiated concept build for a cheeky Australian ready-to-drink (RTD) beverage brand — the kind of pitch C4 ships before a client has written a brief. It pairs an irreverent, mate-friendly brand voice with genuinely hard front-end engineering: every can is a real-time WebGL model rebuilt from Australian 202-end can specs, the homepage hero is a playable physics sandbox of grabbable, throwable cans, and the stockist page is a hand-projected interactive map of Australia carrying over a thousand venues. Seven flavours flow through an infinite 'flavour runway', tilt-reactive product cards morph into a live 3D Quick-View, and a 'Build the Esky' cart lets visitors mix any ten cans. It's a complete, deployable marketing site — home, shop, origin story, stockists, a 'Footy Loyals' loyalty programme, contact and cart — built to show what C4 delivers at full tilt. Available to license or commission as the foundation for a real RTD launch.
02
Screenshots
03
What I Delivered
- End-to-end brand-led marketing site: design + build across 7 routes (home, shop, who-is-barry, stockists, promos, contact, build-the-esky cart) plus two off-screen render/QA routes for automated product shots.
- Custom design system — cream/ink palette with per-flavour colourways, "pop" hard-shadow buttons, and a display/chunky/body type stack (Bungee, Bungee Inline, Changa One, Archivo) — codified as both CSS custom properties and Tailwind tokens.
- Real-time 3D can viewer rebuilt from Australian 202-end can specs (lathe geometry, pull-tab, rivet, score detail) with two render modes: photoreal clearcoat aluminium and a 4-band toon/pixel look.
- Physics-driven hero "sandbox" — grabbable, throwable floating cans and logo with collision detection, restitution and momentum.
- Infinite-loop "flavour runway" carousel with CSS conveyor-mouth side graphics.
- Cursor-tracking 3D tilt product cards (pitch/yaw, lift, glare, contact shadow) that morph via shared-layout animation into a live 3D Quick-View modal.
- "Build the Esky" pick-any-10 cart with quantity controls, subtotal, free-shipping threshold — persisted in a Zustand store, surfaced through a nav badge and a fly-to-cart animation.
- Hand-built interactive SVG map of Australia (coastline projected from real lat/long) with per-state venue panels, a searchable 1,144-venue stockist list, and an Australian postcode-to-state resolver.
- "Footy Loyals" loyalty/promo page, topic-aware contact form, collapsible FAQ, and a newsletter capture.
- Fully responsive layouts, a site-wide scroll-reveal system, and an animated comet nav logo.
- SEO metadata + Open Graph base, an AVIF/WebP image pipeline, and the animated "Designed by C4 Studios" footer credit on every page.
04
Key Features
- Real-time WebGL can viewer — drag-to-spin with momentum, two render styles (photoreal + pixel/toon).
- Playable physics hero — fling and collide cans and the Barry badge in real time.
- Infinite auto-scrolling flavour runway with hover pause and ABV / base-spirit badges.
- 3D tilt product cards with specular glare and contact shadow.
- Shared-layout Quick-View modal with a live spinning can, accent halo and twinkling sparks.
- Fly-to-cart animation driven by a global custom-event layer.
- Build-the-Esky cart: mix any 10 cans, live totals, free-shipping indicator, nav badge count.
- Interactive hand-drawn map of Australia with state selection, pin drops and a sliding venue panel.
- Postcode / suburb stockist search across 1,144 venues.
- Topic-aware contact form that pre-fills from deep links (?topic=…).
- Footy Loyals loyalty programme page (register, upload receipts, leaderboard).
- Collapsible FAQ accordion and newsletter signup.
- Animated comet/sparkle nav logo and keyword site search.
- Site-wide scroll-reveal entrance animations, all reduced-motion aware.
05
Stack & Tooling
- Next.js 14.2.15 (App Router, React Server + Client Components, static generation)
- React 18.3.1 with TypeScript 5.6.2
- Three.js 0.168 + React Three Fiber 8.18 + @react-three/drei 9.122 + @react-three/postprocessing 2.19 (3D can rendering)
- Framer Motion 11.11 (carousels, shared-layout modal morph, fly layer, micro-interactions, reduced-motion)
- Zustand 5.0 (esky-cart and quick-view state stores)
- Tailwind CSS 3.4 + PostCSS + Autoprefixer, layered over CSS custom-property design tokens
- next/font (Google: Bungee, Bungee Inline, Changa One, Archivo, Archivo Narrow)
- GSAP 3.15 + @gsap/react 2.1 (powers the animated C4 Studios footer credit)
- @supabase/supabase-js 2.45 (included as the intended forms/data backend)
- Build tooling: build-stockists.cjs (Google My Maps CSV to typed dataset), generate-can-wraps.cjs (360° label textures), generate-map.mjs (SVG map from lat/long)
- Hosting: Vercel (project "barrys-drink-concept")
06
Integrations & Backend
- Vercel — hosting and CI/deploy.
- Email capture via mailto — contact form and newsletter route to [email protected] (trade@ for wholesale); no server backend in the concept.
- Supabase — client library wired in as the planned data/forms backend (not yet connected).
- Google Maps — directions deep-links from each stockist venue.
- Stockist dataset generated from a Google My Maps export (1,144 venues).
- Social — Instagram and TikTok (@barrysdrink).
- DrinkWise.org.au — responsible-drinking link (with mandatory 18+ legal notice).
07
Performance / SEO / Accessibility
- next/image with an AVIF to WebP format pipeline and responsive sizes.
- 3D canvas lazy-loaded (React.lazy / next dynamic, ssr:false) to keep Three.js out of first load; device-pixel-ratio clamped per render mode.
- All routes statically prerendered (~88–144 kB First Load JS on content pages).
- prefers-reduced-motion honoured across tilt cards, runway, Quick-View, fly layer, scroll reveals, the nav comet, and the C4 footer credit.
- Accessibility: semantic landmarks, real <a>/<button> elements, ARIA dialog + labels, ESC/overlay-close with scroll-lock on the modal, keyboard-activatable cards, and labelled form fields.
- Known cleanup: several decorative images still use raw <img> (Next lint warnings) rather than next/image.
08
Challenges & Constraints
- Reconstructing a believable aluminium can in WebGL from real 202-end specs — lathe profiles plus extruded tab, rivet and score — with two distinct render modes, kept crisp without over-tessellation.
- A CPU physics sandbox (O(n²) collisions, restitution, ambient sine motion, pointer-throw velocity) that holds 60fps on mobile.
- Hand-projecting an accurate, interactive SVG map of Australia from lat/long — including the tiny ACT callout with a leader line and a clean postcode-to-state resolver.
- A seamless infinite carousel via a duplicated track with animate() pause/resume.
- A shared-layout morph from tilt card to full-screen Quick-View, coordinated with a global fly-to-cart event layer.
- Keeping every one of those interactions accessible and reduced-motion safe.
09
What I'd Improve Next
- Connect Supabase (or a form backend / ESP) to replace mailto for contact + newsletter, with validation and spam protection.
- Add real checkout/payments to the esky (Stripe or Shopify) to turn the cart into commerce.
- Persist the esky cart across sessions (localStorage / Supabase).
- Swap remaining <img> for next/image; add a skip link and tighten focus order.
- CMS-back the flavours, stockists, merch and promos; add analytics and structured data.
- Add a quality/LOD toggle (and optional postprocessing bloom) for the 3D on low-end devices.