Farfield

How it's made

1. 01

   A pack built from numbers

   Every dimension of the pack is written in metres in one file, and the body is unrolled into a flat sheet where seams and strap paths are drawn. The same lines shape the 3D cloth and the generated seam maps, so every stitch sits on its seam.

2. 02

   Built off the main thread

   Body, floating lid, straps, moulded buckles, harness, hip belt and mesh pockets are generated as plain arrays in a Web Worker: 230,564 triangles on desktops, 95,630 on phones. Ambient occlusion is baked per vertex by casting rays through a voxel copy of the pack.

3. 03

   Cloth that reads as cloth

   Ripstop, cordura, webbing twill, stretch knit and spacer mesh are generated as normal maps from height fields at their real size. Physical materials add charcoal and grey zones, stitching, prints, the ripstop grid, dust, scuffs and a sheen that follows the colour.

4. 04

   Photographs that come alive

   Three mountain photographs are measured (the rock, the sun, the rows of cloud and grass, a depth guess) and a shader gives them parallax, drifting cloud, wind, sun rays, snow off the summits and stars. A change of photograph plays as a time-lapse behind a front of cloud.

5. 05

   Light that matches

   The pack is lit from where each photograph's sun is, and its reflections come from four lighting environments generated in code and blended with the photographs. One final pass grades the 3D and the photograph together.

6. 06

   Scroll as a camera script

   Every beat is a cue (camera, framing on the rock, photograph, light, lid, exploded view), and the sections carry markers that name them. A director blends the cues under the scroll and follows them through a spring; one loop runs the 3D, the smooth scroll and every animated interface piece.

7. 07

   Hands on

   Drag to walk round the pack, turn it on the configurator's turntable, hover a colour to preview it, scrub the day ruler. Long jumps cut through black, and the film mode plays the page by itself.

8. 08

   Phones and slow machines

   Phones get a lighter pack, smaller maps and photographs and their own framing for every beat. A frame-time governor lightens the rendering on a desktop that falls behind.

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.

• index.html

• package.json

• package-lock.json

• .npmrc

• .gitignore

• vite.config.js

• postcss.config.js

• tailwind.config.js

• eslint.config.js

• jsconfig.json

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

• ASSETS.md

  Asset list. Every image and font in the kit, where it came from and its license.

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

• CHANGES.md

  Changelog. What changed in each version of the kit.

• LICENSE.md

  Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack

Vite 8.2.4 with @vitejs/plugin-react 6.0.5 · React 18.3.1 and React DOM 18.3.1 · three.js 0.171.0 (r171) · Lenis 1.3.26 (smooth scrolling) · React Router DOM 6.30.6 · Tailwind CSS 3.4.19 (starter components and the not-found page) · PostCSS 8.5.25 · Autoprefixer 10.4.24 · Node.js 20 or newer

File size

28.4 MB

Triangles

230,564

Browser

Current Chrome, Edge, Firefox and Safari on desktop and phones with WebGL 2 (Chrome and Edge 111, Safari 16.4, Firefox 128 or newer); without WebGL it shows a still of the pack.

Released

Oct 2026

Version

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