LM-04Food & drink

Ember

A sparkling red-berry energy drink, built in code and lit like a product film.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A sparkling red-berry energy drink built entirely in code and rendered live with three.js: a printed 12 oz can, strawberries, raspberries, cherries, ice and water drops, all generated on the visitor's device. Ten scroll chapters run the backdrop from red to black to white and back, peel the label off the can, let the visitor crack it open, and end in a shop with four flavors, 4, 12 and 24 packs, subscriptions and a cart that keeps its contents. Checkout is ready for you to connect to Stripe or Shopify. For beverage brands, drink startups and anyone selling a product in a can.

How it's made

  1. A can from its profile

    The can is 121.1 mm tall and 66 mm across, three lathes on one profile at 96 segments (30,272 triangles). The tab and the opening are extruded from 2D shapes and hinged, so the can really opens.

  2. A label per flavor

    Each label is a 2048 x 1024 canvas with matching metal and roughness maps. The four flavors print themselves from five colours each.

  3. Condensation in code

    4,404 beads and 26 runs are stamped into a height field and turned into a normal map under the can's clear coat.

  4. Fruit from formulas

    The strawberry has 250 seeds on a golden-angle spiral, the raspberry 86 drupelets, the cherry its suture groove. One shared skin shader paints the mottling, the lenticels and the light glowing through the edges.

  5. A storm in eight formations

    176 pieces on desktop and 83 on phones, each with a place in every formation, blended by the scroll and pushed aside by the cursor.

  6. One director, 28 cues

    A single render loop and a cue-based script run all ten chapters, with phone overrides, Lenis smooth scroll and the text timed in the same frame.

  7. Budgeted for phones

    The hero draws 413,356 triangles on desktop and 95,224 on phones, from 11 shader programs compiled before the curtain lifts. The four cans and the fruit set also come as .glb files.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • models/

    3D models. The product the page is built around, ready to render.

  • tools/

    Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • tsconfig.json

  • README.md

    Start here. What's inside and how to run it.

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.2 · React 18.3 · three.js 0.186 · TypeScript · Tailwind CSS 3.4 · Lenis 1.3 · GLSL shaders · Procedural geometry
File size
12 MB
Triangles
1,192,466
Load time
1.5 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2. Tested in Chromium at 1440 x 900 and 375 x 812, from a fresh unzip of the kit; Safari, Firefox and real phones not tested yet.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

Every 3D object is generated in code when the page loads: the can lathed from a generic 12 oz profile, its labels drawn on a canvas, the fruit, ice and drops from procedural geometry. The page loads no model files, photos or video; the five .glb files in models/ (four cans and the fruit set) are exports of the same code. EMBER is a fictional brand with original label art and invented stockists. A real energy drink brand also uses the Ember name, so rename the brand before you use the kit for a client.

Buy LM-04 Ember

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.