LM-07Fashion

Umbral

Polarised sunglasses that take the glare off the water, 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 shop for UMBRAL, a made-up brand of polarised shield sunglasses, drawn live with three.js. A pinned scroll story shows midday glare on a sea drawn in one shader, turns the lens upright until the glare goes, hands the visitor a dial to try it, shows the sea through the lens in four tints, then splits the lens into its labelled layers. Below it sit three frames with finish swatches, a builder where the pair turns and folds its temples beside a small view of the sea through the chosen lens, a bag kept in the browser and a checkout you connect to Stripe or Shopify. For eyewear brands, opticians and outdoor gear shops.

How it's made

  1. Frames as numbers

    Each frame is a lens outline of about twenty points in millimetres, bent round the face by a wrap curve, a base curve and a tilt. The brow, rim and corner brackets are offsets of that outline, traced and extruded in code.

  2. A lens that behaves like one

    The lens refracts, and it's tinted by how much light it absorbs through its 2.1 mm. The mirror coats are thin films: Solar Mirror runs from gold at the top to violet at the bottom.

  3. A studio made for mirrors

    A long overhead strip, a graded card and dark flags are baked into one reflection map. They draw clean lines along every rim and keep black nylon black, with no lights in the scene.

  4. The sea at noon, polarised

    One shader splits each ray's light into its two Fresnel parts. So turning the lens upright really does take the glare off the water, and the readout's numbers come from the same equations.

  5. One canvas, every view

    A single WebGL canvas draws the hero, the pinned story and the builder, each into its own box on the page. It only redraws when something has moved.

  6. A shop underneath

    The chosen pair lives in the address and the bag in the browser. Checkout goes through one function that you swap for Stripe Checkout or Shopify.

  7. Models and pictures from the same code

    The zip ships every frame and finish, and the lens layers, as .glb files, with scripts that re-export them byte for byte and redraw all 36 product pictures.

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.

  • 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 · React 18 · three.js 0.171 · React Router 7 · Lenis · Tailwind CSS 3 · GLSL shaders
File size
27.2 MB
Triangles
176,000
Load time
1.9 s (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 3D needs WebGL 2. Without it, the hero and the builder show still pictures, and the bag and checkout still work. It honours reduced motion.
Released
Oct 2026
Version
1.0.0

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, built in code. The three shield frames are numbers bent round a face, the lens is a refracting, tinted material with thin-film mirror coats, and the sea is one shader. Nothing was traced from a real product. The site loads no model files (the .glb files in models/ are exports of the same code), there are no photos and no AI-generated images: the 36 product pictures are renders of the site's own 3D. The code was written by an AI coding assistant under Parallel's direction. The brand, the names and every product claim are demo placeholders.

Buy LM-07 Umbral

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.