Kilo

How it's made

1. 01

   A can built from code

   An open cylinder with 112 segments (64 on phones), lathe profiles for the rim, lid and base, and a torus pull tab: 6,092 triangles on desktop and 4,268 on phones, in 7 draw calls.

2. 02

   A studio with no photos

   A tiny room with six glowing panels is rendered once through three.js's PMREM generator, so the clearcoated label gets soft, real reflections without an HDRI. Neutral tone mapping at 1.08 keeps the whites bright.

3. 03

   Labels printed at load

   Each flavor's 2048 x 832 label (1536 x 624 on phones) is drawn on a canvas by one function, sized to the can's circumference so nothing stretches. A shader crossfades two labels on one mesh.

4. 04

   One number drives the page

   A 720vh section keeps the stage pinned, and every frame turns scroll into one step value: one full turn per flavor, with the label, page color and particles crossfading over each change.

5. 05

   An atmosphere per flavor

   A 2D canvas behind the can draws one effect per flavor: zest sparks, peel rings, cold mist, smoke and embers, pulsing rings and a constellation.

6. 06

   Motion and sound

   Names swap letter by letter 26 ms apart, sections reveal once, and the page loops back to the top behind an ink wipe. Optional Web Audio sound steps up a semitone per flavor, with no audio files.

7. 07

   Tuned for phones

   Below 768 px the can drops to 64 segments, 1536 px labels and a 1.6 pixel-ratio cap, and the particles thin out.

In this kit

• src/

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

• models/

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

• public/

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

• 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

• jsconfig.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 6.4 · React 18.3 · three.js 0.171 · Tailwind CSS 3.4 · Web Audio

File size

1.4 MB

Triangles

6,092

Load time

2.7 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)

Browser

Needs WebGL 2: current Chrome, Edge, Firefox, Safari 15+ (a CSS can stands in without it)

Released

Sep 2026

Version

1.0.2

From download to client site

1. 01

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

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

   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 devCopyCopied
4. 04

   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