LM-22Food & drink

Lumet

Nine flavors on a turning ring of cans, built in code.

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 launch site for LUMET, a made-up sparkling energy drink in nine flavors. Eighteen cans turn right to left round a chrome swirl, and each new flavor floods the page with its color and a burst of its fruit. Scroll and the front can steps out: a taste profile, four claims read off the back of the can as their ingredients fly past, then the can in a storm of fruit with STAY LIT wrapped round it on turning rings of type. Then a nine-can lineup, a pack builder, a cart and an FAQ. Every can, label, fruit and letter in 3D is built in code and drawn live with three.js. For drink brands and anything sold in flavors.

How it's made

  1. A sleek can, printed at load

    The 355 mL sleek can (57 by 157 mm) is three lathes from a millimeter profile plus a stamped tab. Each flavor's label and the facts panel on its back are drawn on a canvas when the page opens, sharp enough for the close-up.

  2. A ring that turns right to left

    Eighteen cans (nine on phones) circle a holographic chrome swirl extruded from the logo's own path. A spring drives the ring from the arrows, keys, a drag or the flavor dots, and it moves on by itself until someone touches it.

  3. Every flavor takes over the page

    A full-screen shader holds two palettes and washes the new color out from the middle. The type, the nav and the can's rim light follow, and the flavor's fruit bursts round the can.

  4. Seventeen fruits, made in code

    Blood orange and lime wheels, guava halves, mango cubes, white peach slices, cherries, mint and more are procedural geometry with painted flesh, sharing one shader for grain, mottle and a glow from inside. They fly in instanced formations: storm, orbit, burst and cling.

  5. Four claims, read off the can

    The camera holds still and the can moves: it turns its back, spins a full turn between claims and rises so each printed claim comes into frame, with that claim's ingredients flying past.

  6. Words wrapped round the can

    STAY LIT and a ribbon in the can's own colors are open bands with a canvas mask, passing in front of the can and behind it. They wrap on as you arrive and unwind as you leave.

  7. A frame budget

    Cues pinned to each chapter blend into one shot per frame. A laptop frame draws about 180,000 to 290,000 triangles in 12 to 44 draw calls and holds 60 fps with the CPU slowed 4x, with no glass pass and a 1.5 pixel-ratio cap.

  8. A shop underneath

    Pick a 4, 12 or 24-pack, one time or subscribe for 15% off, and the pack builds itself behind the can. The cart lives in the browser, and checkout goes through one function you swap for Stripe or Shopify. On desktop the bottom of the page runs back into the top.

In this kit

  • src/

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

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • tsconfig.json

  • tailwind.config.js

  • postcss.config.js

  • README.md

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

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • 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.

  • 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 5.9 · Tailwind CSS 3.4 · Lenis 1.3 · Procedural geometry
File size
0.1 MB
Triangles
289,466
Load time
2.0 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones get nine cans in the ring, lighter cans and fruit, and a 1.25 pixel-ratio cap. Reduced motion calms it: no intro sweep, no auto-advance, slower drift. Tested in headless Chromium at 1440 x 900 and 390 x 844; Safari, Firefox and real phones weren't part of the tests.
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.

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

Built entirely in code: the cans, their print, the swirl, the rings of type and every fruit are generated in the browser, and the site loads no model, image or video files (its four typefaces come from Google Fonts). Written with an AI coding assistant (Claude Code) under Parallel's direction. LUMET is a made-up brand, and every claim, nutrition figure and price is a placeholder to replace.

Buy LM-22 Lumet

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.