LM-09Consumer tech

Aura

A smart ring you turn by hand, under a dusk sky.

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 is light and loads in a few seconds on most phones. The video above shows the full site.

A smart-ring wellness site with a 3D ring you drag to turn, in three finishes, over a moving dusk sky. Glass cards for sleep, movement and a daily score, SVG charts, a guided breathing timer, optional ambient sound and three atmospheres, all running in the browser. For wearables, wellness apps and jewelry brands.

How it's made

  1. Built in ChatGPT from one mood image

    Designed and coded with an AI coding assistant in ChatGPT from a single reference of a glowing ring over warm clouds, as an original take rather than a copy. Later rounds added the constant spin, the moving glass sky, more charts and more motion.

  2. A ring turned on a lathe

    An 11-point profile spun through 192 segments makes the band, an open cylinder makes the inner wall, and thin tori make the polished edges, their glow and the engraved groove: about 25,700 triangles, with no model file.

  3. Metal lit by a generated room

    MeshPhysicalMaterial with full metalness and a clearcoat reflects three.js's RoomEnvironment through PMREM, with ACES tone mapping at 1.65 and a warm key, an amber rim and a lilac fill light. Champagne, Silver and Obsidian blend in rather than snap.

  4. Spin, drag and keys

    It turns once every 24 seconds, eases to a stop while you drag and back up when you let go, bobs gently, and answers the arrow keys. Reduced-motion settings stop the spin.

  5. A sky that moves with you

    One cloud image sits under a mist and a shade layer that drift with the pointer, with frosted glass cards on top, three atmospheres (Velvet dusk, Lunar blue, Copper dawn) and 22 CSS keyframe entrances.

  6. Everything runs in the browser

    SVG charts with bars and flow modes, a breathing timer paced 4 seconds in and 6 out, optional ambient sound from three Web Audio oscillators, and settings kept in local storage. No server and no health API.

  7. Exported to run anywhere

    The published version was exported from ChatGPT's site framework as a plain Vite and React project. 72 of its 77 source files are the originals, and CHANGES.md lists every edit.

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.185 · TypeScript 5.9 · Tailwind CSS 4.2 · Web Audio
File size
1.1 MB
Triangles
25,664
Load time
1.1 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2: Chrome and Edge 111+, Firefox 128+, Safari 16.4+
Released
Sep 2026
Version
1.0.2

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

The ring is built in three.js code, with the same ring included as .glb files in three finishes. The sound is synthesized. The cloud background and the ring's loading image were made during the build; ASSETS.md lists every file.

Buy LM-09 Aura

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.