LM-12Jewelry

Sprue

A custom engagement ring you choose, then watch cast and set.

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 one-page site for SPRUE, a custom engagement ring workshop, with the ring built live in three.js from four choices: band, cut, metal and stone weight, 512 rings in all. Scroll and that ring is made in nine chapters: drawn in pencil, printed in wax, planted on a casting tree, invested in plaster, burnt out, cast, broken out, polished and set, with live numbers such as its weight in the chosen metal. The diamond is traced in a shader so it throws fire as it turns, and the page goes dark through the kiln. The choices travel as a short bench-ticket code in the address bar and go with a booking form for a sitting. For jewelers, ring makers and goldsmiths.

How it's made

  1. The spec

    Four choices (band, cut, metal, stone weight) define 512 rings. Each option carries the numbers the 3D model is built from, and the whole ring fits in a short bench-ticket code kept in the address bar.

  2. A ring built from numbers

    The band is a cross-section swept round the finger, the claws are tubes with hinged tips, and each stone is cut facet by facet from standard proportions. Every choice rebuilds it live, about 26,000 triangles.

  3. One material for every stage

    A single metal shader plays wax, the hollow after burnout, molten metal, firescale and the mirror polish. Each stage follows the order the metal reaches that part of the ring.

  4. A diamond traced in the shader

    Light is refracted into the stone once per color, bounced off the pavilion facets and let out through the crown, so the stone throws fire and its pattern shifts as it turns.

  5. A photographer's studio in code

    Soft boxes, strip lights and black flags are built once and baked into reflection maps, so the polished metal shows crisp light and dark bands.

  6. A camera script tied to the scroll

    Each of the nine chapters has cues that set the camera and the stage at points through its scroll. In the kiln chapters one CSS variable turns the whole page dark with the scene.

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

  • 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.171 · Tailwind CSS 3.4 · React Router 6.30 · JavaScript (JSX)
File size
1.7 MB
Triangles
25,968
Load time
958 ms (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Current Chrome, Edge, Safari and Firefox on desktop and phones. The ring needs WebGL; without it the loader lifts and the page, configurator and booking form still work. Reduced motion is respected. Tested in headless Chromium at 1440 x 900 and 390 x 844 with software rendering; Safari, Firefox and real phones were not part of the packaging 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. 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

An original design from Designed by Parallel, LLC, built entirely in code: the ring, the four stone cuts, the casting tree, the studio lighting and every stage of the making are generated in the browser from numbers. The site loads no model files, photos or textures and uses no AI imagery; the .glb files in the zip are exports of the same code. The code was written by an AI coding assistant (Claude Code) from our brief.

Buy LM-12 Sprue

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.