Overview
Diet Soda is a full-viewport beverage product experience by SonoJS (demo brand: Soda / Diet Soda). Zero-build static HTML with inline CSS, GSAP, and Google model-viewer for the can, leaves, and berries (GLB). Hero Pure Zero with Shop Now, DESIGN AWARDS Premium Beverage 2025 badge, Diet Classic / Zero Lime flavor cards ($2.99) that recolor the radial backdrop and swap the 3D can, floating bubble sprites, and glass nav (Home · Ingredients · Taste · Eco · Reviews). Demo storefront chrome only - no cart backend. Run with npx --yes serve . or host statically on Cloudflare Workers.
Highlights
- 01
3D can stage
Interactive model-viewer can with orbit controls, leaves, and berry GLBs.
- 02
Flavor swap
Diet Classic / Zero Lime cards recolor the gradient and swap the can texture.
- 03
GSAP + bubbles
Entrance motion and floating bubble sprites over a glass header nav.
- 04
Zero-build static
index.html + vendor GSAP / model-viewer - serve with npx --yes serve .
You get
- index.html (Diet Soda Pure Zero hero)
- vendor/gsap.min.js + vendor/model-viewer.min.js
- assets GLBs (can, leaves, cherry/blueberry) + soda PNGs
- Outfit / Inter / Manrope / Galada (Google Fonts)
