LM-32Consumer tech

Oryn

Smart glasses on a cobalt light stage, built live in 3D and taken apart as you scroll.

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 landing page for Oryn One, a made-up pair of smart glasses, built from a finished mockup and made live in three.js. It opens on a deep cobalt light stage: a giant condensed headline, the frame lit like a product shoot with a heads-up display floating in the right lens, and a glass panel where the visitor picks one of three colorways and a clear or sun lens, with a 360 dial bound to the drag. Drag the glasses round from any angle; the callout pinned to the hinge follows them. Scroll, and the page runs three chapters on the same frame: Form & feel folds the temples, then explodes the frame with numbered callouts; A clearer view cycles the navigation, message and translation cards in the lens, turns it from clear to sun and fans it into its four layers; Quiet intelligence turns the shells to an x-ray and the camera travels the temple past the camera, capture light, mics, open-ear speaker, touch strip and battery. Watch the film plays a 22 second cut of the same shots. There is no model file: the frame is generated in a Web Worker at load from analytic sweeps, so it holds up close. Every word and spec sits in one file, and the three colorways in another. For eyewear and wearable brands, consumer hardware launches, and any product page that needs its product shown, not described.

How it's made

  1. The mockup, made live

    The hero is laid out in the mockup's own pixels times one scale unit, so the composition holds at every desktop size: the wordmark, the pill nav, the headline fitted to the viewport by its widest line, the Make it yours panel and the three tab band. Tablets tighten and phones stack.

  2. Glasses built from sweeps

    No model file. A closed cross-section with a pillowed face, a lens groove and a polished bevel step is swept round a classic trapezoid outline, then wrapped on a cylinder and tilted like a real frame. Temples are superelliptic sweeps along a spine whose curve ramps in and out, with the touch strip, speaker slot and mic port pressed into a refined grid.

  3. Materials that read close up

    Smoked crystal acetate with a deeper marbled layer read with parallax, transmission and a crisp clear coat; lenses with dispersion and an iridescent AR coat; a brushed hinge collar with five barrels; an embossed temple; and a heads-up display drawn on a canvas every frame.

  4. A stage inside the scene

    The cobalt plate is drawn inside the 3D scene, so the lenses refract it, and it passes through the exact inverse of the tone curve, so after the final pass it matches the photo pixel for pixel. A baked studio gives the acetate its silver faces, and the floor carries a contact shadow, a reflection and rainbow-fringed lens caustics.

  5. The page drives the camera

    Every scroll position resolves to one full shot (camera, fold, explode, x-ray, lens layers, HUD card, backdrop) from a single cue table, blended between neighbours. The film button plays the same resolver on a timeline, and callouts are pinned to anchors inside the model, so they follow the fold and the explode.

  6. Built for real hardware

    Every device starts on the light tier and a governor raises quality once frames prove cheap. Every material compiles before the first frame, opaque parts that can't be seen through a lens skip the transmission pass, and nothing renders while the tab is hidden. A GPU that keeps choking falls back to the still.

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.

  • bench/

  • scripts/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • tailwind.config.js

  • postcss.config.js

  • tsconfig.json

  • README.md

    Start here. What's inside and how to run it.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

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

  • 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.3 · React 18.3 · TypeScript 5.9 · three.js 0.186 · Tailwind CSS 3.4 · Lenis 1.3 (smooth scroll) · Web Worker (geometry generation) · GLSL shaders · Procedural geometry · Self-hosted fonts (Anton and Manrope)
File size
0.6 MB
Triangles
226,000
Browser
Needs WebGL 2 for the 3D: current Chrome, Edge, Firefox and Safari, on desktop and phones. Every device starts on the light tier (about 85,000 triangles) and a governor raises quality once frames prove cheap; a GPU that keeps choking on the light tier, a context that stays lost or no WebGL 2 hands the page to a still image, and every section, the configurator and the film still work. Reduced motion stills the drift and the reveals. Tested in headless Chrome on software WebGL at 1920 x 1080, 1586 x 992, 1024 x 768 and 390 x 844; real GPUs, Safari, Firefox and real phones weren't part of the 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

Built in code: the glasses are swept sections, lenses and hardware written for this kit and generated in the browser (an original design, not modelled on or traced from any real product, with no maker's marks), and the acetate marbling, the temple emboss and the heads-up display are drawn at load. The cobalt backdrop and the fallback still were generated with an image model for this design by Parallel and show no real people, products or marks. The fonts are self-hosted under the SIL Open Font License; three.js and the other libraries are listed in THIRD_PARTY.md. Written with an AI coding assistant (Claude Code) under Parallel's direction. Oryn is made up, and every spec, price and name in the demo is a placeholder.

Buy LM-32 Oryn

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.