LM-10Beauty

Noire

A fragrance launch site with 3D bottles you can turn and uncap.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. This kit downloads about 1.3 MB, so give it 10 to 20 seconds on mobile data. The video above shows the full site.

A launch site for FORME NOIRE, a made-up fragrance collection of three scents: After Hours, Soft Static and Ember Skin. Each scent has its own palette and its own generated world behind it, and switching scents crossfades the world while the pointer and scroll move the parallax and light. The bottle is real 3D, built in code from the bottle art: visitors drag to turn it, uncap it and bring it in close. Below sit a notes study that steps through opening, heart and trace, a three-question scent finder and a shortlist kept in the browser, and each bottle also ships as a .glb file. For perfume houses, candle makers and beauty brands.

How it's made

  1. Three scents, three moods

    After Hours, Soft Static and Ember Skin each get their own material palette and cinematic world, under one editorial type system with glass surfaces.

  2. Generated worlds and bottles

    The three backgrounds were made with ChatGPT's image tool, with a quiet left side for type and open space on the right for the bottle. The bottle art was generated too, as transparent 1254 px WebPs.

  3. 3D bottles from the artwork

    Each bottle's outline is saved as contour rows and built into a closed body and a separate cap with 128 segments. The art maps onto the front, and the back uses colors sampled from it with physical glass and metal.

  4. Lit in code

    An orthographic camera, ACES tone mapping, a hemisphere light, a warm key and a rim light in the scent's colour, three.js's RoomEnvironment with a strip in that colour for reflections, and a canvas-drawn contact shadow. Drag, turn, pause, uncap and close-up controls ease the bottle into place.

  5. A page that follows the scent

    Switching scents crossfades the world, and pointer and scroll drive the parallax and light. A notes study steps through opening, heart and trace, a scent finder scores three questions, and the shortlist lives in local storage.

  6. Exported to run anywhere

    The site moved from ChatGPT's framework to a plain Vite project, with 72 of its 74 source files byte-for-byte the originals. Each bottle also ships as a .glb file.

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.

  • third-party-notices/

  • index.html

  • package.json

  • package-lock.json

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

  • ASSETS.md

    Asset list. Every image and font in the kit, where it came from and its license.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • VERIFICATION.md

  • 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.0 · React 19.2 · three.js 0.186 · TypeScript 5.9 · Tailwind CSS 4.2 · Base UI 1.7 · Lucide icons 1.31 · Procedural geometry · Self-hosted Cormorant Garamond and DM Sans
File size
6.9 MB
Triangles
74,498
Load time
1.1 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2 for the 3D bottles: Safari 16.4+, Chrome and Edge 111+, Firefox 128+. Checked in Chrome on desktop at 1440 x 900; not tested across every browser and phone yet.
Released
Sep 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

Designed and coded in ChatGPT. The three world backgrounds were made with ChatGPT's image tool (their prompts are in HOW-IT-WAS-MADE.md), and the three bottle images were generated for the build too, though their tool and prompt weren't kept. The 3D bottles are built in code from that art, the fonts are Cormorant Garamond and DM Sans under the SIL Open Font License, and there are no stock photos, downloaded models or real brands.

Buy LM-10 Noire

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.