LM-13Film & photo

Diafra

A cinema prime lens set with an 11-blade iris, 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 five-page site for DIAFRA, a made-up set of seven cinema primes from 18 to 135 mm, built around one live three.js lens that every page shares. On the overview the lens splits in half along its axis with a ray traced through every element, and its 11-blade iris turns the bokeh from round to 11-sided. The Set gives each lens its own row and compares their fields of view, the Bokeh Lab renders a night street through any focal length, stop and focus, and Specs has a dimensioned drawing and the optical layout in section. An enquiry form for hire, purchase or a test day swaps the live lens to the one picked. For lens makers, rental houses and camera gear brands.

How it's made

  1. Seven real optical designs

    Each focal length has its own lens design, traced surface by surface with Snell's law. The focus scale, the ray fans, the iris and the bokeh are all computed from it.

  2. A lens turned in code

    The barrel, rings, gears, cells, mount and glass are closed profiles revolved round the optical axis in two halves, so the lens can split open along its axis and show its section.

  3. Engraved in the site's fonts

    The focus and T stop scales are drawn on a canvas when the page opens, each mark placed where the optics say that distance or stop falls on the ring.

  4. An 11-blade iris that works

    Blades on pivots, driven by a cam ring and solved so the opening halves at every stop: round wide open, eleven-sided a third of a stop down.

  5. One lens for five pages

    A single fixed canvas is shared by every page. Each section says what the lens should show, and one loop per frame picks the section on screen and moves the camera to it.

  6. Bokeh from the iris itself

    The Bokeh Lab draws every out-of-focus light as the iris's exact opening, sized by its circle of confusion and clipped into a cat's eye toward the frame's edge.

  7. Light built in code

    Three studios of strip lights are baked to environment maps and crossfade as the page turns from white to grey to black. Phones get a lighter lens, and a governor trims the pixel ratio when frames run slow.

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/

  • 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 · React Hook Form 7 and Zod 3 · JavaScript (JSX) · Self-hosted Host Grotesk and Geist Mono
File size
18.3 MB
Triangles
221,272
Load time
1.6 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 lens and the bokeh plate need WebGL2; without it (or if the engine doesn't start in time) a 2D canvas drawing of the lens and the plate takes over. Phones get a lighter lens (64 segments, no antialiasing, pixel ratio capped at 1.75) and a pixel-ratio governor; reduced motion is respected. Tested in headless Chromium at 1440 x 900 and 390 x 844 only.
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 from Designed by Parallel, LLC, built entirely in code: the lens, its engravings, the seven optical designs (generic glass families, no maker codes), the studio lighting and the bokeh are generated in the browser. The page loads no model, image, video or audio files (the seven .glb files in models/ are exports of the same code), and nothing was traced from a real lens. Code written with AI coding agents under the studio's direction. DIAFRA is a made-up, uncleared brand and every product figure is a template value; PL and LPL are real mount standards used as specs.

Buy LM-13 Diafra

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.