Tenebra

How it's made

1. 01

   A jet from facet planes

   No model file. The airframe is an original design built in code: a union of convex pieces, each cut from a table of flat planes, so every facet is exactly flat. Bays, trapeze, inert store, sensors and control surfaces move.

2. 02

   Real terrain

   USGS elevation of the Sierra Nevada, Owens Valley and a desert basin, baked to lossless 16-bit maps and drawn as one level-of-detail mesh with heightfield shadows.

3. 03

   The real sun

   Every heading is chosen from the sun's real position for late January at 37 degrees north, so the sunset, the blue hour and the sunrise light the jet the way they would.

4. 04

   Sky in the paint

   The sky and the terrain are baked into the jet's reflections one face per frame, so each facet mirrors its own patch of sky.

5. 05

   A radar it beats

   A pulse runs out over the snow from a ground site. An illustrative model plots the return: a quiet floor with a few narrow spikes off the edges, against a rounded shape that floods back.

6. 06

   Through the sensors

   Every shader writes heat as well as colour, so the night range exercise can wipe into a FLIR and DLIR view with gain, reticle, a laser mark and an inert store's impact that cools.

7. 07

   One scroll, one table

   A single cue file sets the camera, the sun, the airframe and the sensors at every scroll position; the page blends between them with critically damped springs.

In this kit

• src/

  Full source. The complete site as its own project, ready to run.

• public/tenebra/

• bench/

• 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

• vite.config.ts

• tailwind.config.js

• postcss.config.js

• tsconfig.json

• .env.example

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

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

• CHANGES.md

  Changelog. What changed in each version of the kit.

See a real zip, opened

Specs

Stack

Vite 8.2 · React 18.3 · TypeScript 5.9 · three.js 0.186 · Lenis 1.3 · Tailwind CSS 3.4 · GLSL shaders · Procedural geometry (no model file) · Geist and Geist Mono (self-hosted from npm)

File size

3.5 MB

Triangles

527,794

Load time

1.2 s (First frame of the live 3D view (median of 3 cold loads), measured on version 1.0.0's production build, desktop Chrome, RTX 4050, Oct 2026; 1.1.0 keeps the same shader programs and draws a lighter airframe. Triangles: the most one frame draws across the beats at the high tier (the radar beat).)

Browser

Chrome and Edge on Windows (RTX 4050 and Intel Arc), checked on version 1.0.0; version 1.1.0 changes the airframe and the copy and was checked in headless Chrome with software WebGL at 1440 x 900 and 390 x 844. Needs WebGL 2. Without it, or on a GPU too slow for the lowest tier, the page shows a still (the jet's edge drawing over a painted sky) and every section and the form still work.

Released

Oct 2026

Version

1.1.0

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