The Brand
Established brand energy. Five days.
The beverage company was taking orders by hand — phone calls, farmers market walk-ups, DMs — with no web presence, no email capture, and nothing to show investors or wholesale partners. With a nationwide shipping launch on October 15 and international licensing conversations already in motion, they needed a site that looked like an established premium brand, not a startup. No page builder. No template.
The Problem
No web presence. No way to close wholesale partners.
The client had a real product, real farmer's market traction, and real conversations with international licensing partners — but nothing to show them. An Instagram page doesn't close a wholesale deal. A Google Form doesn't signal "established brand" to an investor. The site needed to do two jobs simultaneously: convert curious customers into early buyers, and convert wholesale partners into committed distributors.
"The site had to work for two completely different audiences at the same time — a first-time customer browsing hemp beverages and a wholesale buyer evaluating whether to carry the product. Every layout decision had to serve both without feeling like it was made for neither."
Interactive Product
Every can. Every angle.
Each product format has a dedicated Three.js 3D viewer — the actual can, draggable by the visitor to inspect every angle. Models load via GLTFLoader, are centered relative to their bounding box, and use OrbitControls restricted to horizontal rotation so the can spins naturally. Scenes render in a shared requestAnimationFrame loop for efficiency.
"The 3D viewer does something a product photo can't — it lets the visitor handle the can. On a page designed to close wholesale partners, that kind of tangibility signals investment-grade brand production."
Visual Direction
The page feels alive before you scroll.
The background runs a fixed full-viewport image with a mousemove parallax offset — it shifts as the visitor moves their cursor. A continuous CSS breathing animation slowly scales and rotates between keyframes so the page feels alive even when the user isn't interacting. A filter pipeline (contrast, brightness, saturate) shifts with the animation to enhance mood without overwhelming the foreground content.
Two Audiences. Two Forms.
Newsletter for early customers. Allocation form for wholesale.
Two forms serve two different audiences side by side: a newsletter form for early customers building anticipation for the October launch, and a wholesale allocation and reservation form for distributors to signal interest before inventory is committed. Both forms are positioned to convert the two main visitor types the client cared about most.
AI Ordering
Browse and order through Claude.
The site ships a WebMCP integration — menu search and checkout registered as browser-native AI tools. Visitors can browse the product catalog and start an order through Claude directly from the site. This shipped the same week Google announced the W3C WebMCP standard at I/O 2026 — making it one of the first commercial implementations of the spec.
"WebMCP turns the site into an AI-native commerce surface. A wholesale buyer evaluating the brand sees a company operating at the frontier of how consumers will shop — not a startup with a Shopify store."