Nadir

How it's made

1. 01

   The comp, made live

   The page keeps the design comp's bones (the light page and dark hero card, the headline fading to silver, the mint button, the feature strip, Explore in 3D and 01 / 03, the two image tiles), measured against it for type, card height and where the aircraft sits. Then everything in the card is live.

2. 02

   An aircraft built from sections

   The drone is built the way an industrial designer sketches one: runs of chamfered, filleted outlines and airfoils lofted into skins, so every edge catches a thin line of light. A glossy mint canopy over a bead-blasted aluminium body, folding arms with hinge lines, motor pods with turning bells, twisted two-blade rotors that blur when they spin, and under the nose a three-axis gimbal with the LiDAR head in polished metal.

3. 03

   One aircraft, the whole way down

   The aircraft is drawn once, on its own transparent canvas over the content and under the nav. Each section only describes where it wants it (a shot: where it sits on screen, how big, the camera's angle round it, its pose and its light), and the scroll blends one shot into the next, so it never cuts: hero, hover over the intro, into the mission, through toward the viewer, the teardown, then a small companion down the rest of the page that lands by the wordmark.

4. 04

   A million points, generated

   A worker writes the survey at load: a curved six-pier road bridge with railings, lamps, girders, cross-frames and wire-wrapped piers, a river, wooded banks and a far ridge. Each point carries an intensity, a kind and a deviation from the last survey, and one shader colours them by intensity, elevation or change, runs the scan front, lights the spot under the gimbal and mirrors the valley in the river.

5. 05

   A mission that is the scroll

   The pinned mission is a pure function of scroll progress: the route drawing over the valley, the flight and the scan with the point count climbing, then the change map and the camera down at the water by Pier 3 with the finding pinned to it. The laser leaves the aircraft's window wherever it is on screen. Scrolling back runs it all backward exactly.

6. 06

   Taken apart in daylight

   The page turns light for the technology section, so the paper is the studio and the aircraft casts a soft shadow on it. Scrolling lifts the parts away in order, each with its number pinned to it in a layer above the aircraft, holds them open, puts them back and spins the rotors up.

7. 07

   Careful with the GPU

   The survey views draw into their elements' rectangles on one canvas, and the aircraft renders only the box around itself on the other. Views give their memory back off screen, very large screens are capped, slow devices step down and get FXAA in place of multisampling, and a lost GPU context is rebuilt. The busiest frame is about 44,000 triangles plus the points.

8. 08

   A form that holds up

   Book a demo goes through a backend function into an admin-only table: field checks, a bot trap, five sendings an address in ten minutes, a flood brake, and a repeat from the same person merged into the first with the newest details and every sending kept. The team works it at /requests, and the CSV export keeps formulas from running.

In this kit

• src/

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

• base44/

• public/

  Media and assets. The images, clips, textures and icons the page loads.

• index.html

• bench.html

• package.json

• package-lock.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

• eslint.config.js

• .env.example

• 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 · React Router 7.18 · three.js 0.171 · Tailwind CSS 3.4 · Lenis 1.3 (smooth scroll) · Base44 SDK 0.8 (database / functions / sign-in) · One Base44 backend function (Deno) · Web Worker (point cloud generation) · GLSL shaders · Procedural geometry · Google Fonts (Geist / Geist Mono)

File size

0.9 MB

Triangles

44,080

Browser

Needs WebGL 2 for the 3D: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones get about a third of the points and a lighter aircraft; any device steps its resolution down if the frame rate falls (measured against its own screen rate), very large screens are capped at 6 million pixels a view, and a lost GPU context is rebuilt. Without WebGL 2 the renders stand in and every section, the mission's chapters and the form still work. Reduced motion stills the sway, the twinkle, the laser and the looping lights. Needs a Base44 app behind it for the form, the table and the team's inbox. Tested in headless Chrome at 1536 x 1024, 1440 x 900, 390 x 844 and 360 x 740, with no sideways scroll; Safari, Firefox and real phones weren't part of the tests.

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