Midgrey

How it's made

1. 01

   Write the brief

   A rental-studio site that puts the visitor on the stage: three stages at their real size, a grey ball and a chrome ball, and real lamps to move round them.

2. 02

   Build the stages in code

   Every wall, cyc, lamp, modifier, stand and the rental camera is three.js geometry in real metres. The scene has no model, texture or HDR file.

3. 03

   Light it in real units

   Each lamp has a real output and each modifier a real size and loss. A light meter in code works out the stop, so every number on the page is the true reading.

4. 04

   Develop the frame

   A darkroom pass exposes at the metered stop, adds a tight glow and tone maps. Middle grey prints at exactly the page's own grey, so the stage melts into the page.

5. 05

   Script the scroll

   Eleven sections, one per zone from black to white. Each one moves the camera, blends the lighting in stops and dips to black between stages.

6. 06

   Turn it into a tool

   The designer lets visitors drag lamps, swap gear and read the meter and the monitor. They can then book that exact setup as a printable call sheet.

7. 07

   Render the stills and models

   The stage photos, look thumbnails and share card are rendered from the same scene. The props are exported from the same code as .glb files.

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.

• scripts/

• 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 · React Router 6.30 · three.js 0.171 · Tailwind CSS 3.4 · JavaScript (JSX)

File size

1.8 MB

Triangles

67,624

Load time

1.7 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 scene needs WebGL 2; without it the pages still work and show flat drawings of the ball rig. Phones and touch screens get a lighter scene. Tested in headless Chromium at 1440 × 900 and 390 × 844.

Released

Oct 2026

Version

1.0.1

From download to client site

1. 01

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

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

   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 devCopyCopied
4. 04

   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