Obverse

How it's made

1. 01

   Money you can hold

   The brief was a fintech page where the product is two thick coins and a metal card, interactive and following the scroll. The name, palette, type, copy and UI were all made new for the kit; every rate and fee is labelled illustrative.

2. 02

   Coins and a card in code

   Lathe profiles give the coins polished rims and reeded edges, the raised symbols get knurled tops, and the guilloche under the lacquer is computed per pixel so it stays crisp. The card's engraving is cut from canvas height fields into brushed anisotropic metal, with a raised EMV chip and three finishes that share every map.

3. 03

   One stage behind the page

   A single WebGL 2 canvas paints the paper itself, the dark bands lined up with the HTML to the pixel, soft shadows, then the 3D in HDR with 4x multisampling. Bloom comes from the metals only, and an inverse tone curve keeps the page's CSS colours exact.

4. 04

   360s and 180s with the scroll

   Each chapter is a pose of the three objects in view space with absolute angles, blended between markers on the page and followed with critically damped springs. A cue 360 degrees on from the last makes a full turn, 180 shows the other face, and tall screens get their own poses.

5. 05

   Effects that belong to the objects

   Six modules: an engraved field with ripples, a turning seal, wakes and shockwaves; foil dust; sparks; light trails; star glints; and light on the objects themselves. Each switches itself off if it fails, and a governor sheds the heavy ones under about 30 frames a second.

6. 06

   A UI printed like money

   Plates with microtext and registration marks, charts that draw and scrub, digits that roll, foil accent words with a sweeping sheen, buttons with a running light, plates that tilt toward the pointer and a cursor that names what each object does.

7. 07

   Phones and speed

   Phones start on a light tier with smaller maps and fewer particles, the objects sit above the copy, and one render loop runs everything with no layout reads per frame. Nothing animates off screen, and reduced motion shows every final state.

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.

• bench/

• tools/

  Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

• licenses/

• index.html

• package.json

• package-lock.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

• eslint.config.js

• .env.example

• .gitignore

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

• 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 · Plain JavaScript (JSX) · GLSL shaders · Procedural geometry (no model file) · HDR bloom with 4x MSAA · Tailwind CSS 3.4 (base layer) · Schibsted Grotesk and Instrument Sans (self-hosted) · Instrument Serif and Geist Mono (self-hosted) · GLB exports (Playwright exporter)

File size

4 MB

Triangles

333,699

Browser

Needs WebGL 2: current Chrome, Edge, Firefox and Safari on desktop and phones. Phones, touch screens and devices under 4 GB of memory start on a lighter tier (lighter objects, 1024 px card maps, a lower pixel ratio, fewer dust flakes), and a governor steps down when frames run long. Without WebGL 2 the stage switches itself off and the page opens without the 3D. Reduced motion shows every final state. Tested from a fresh unzip in headless Chromium with software rendering at 1440 x 900 and 390 x 844: no errors, no failed or outside requests, no sideways scroll. Not yet tested on a real GPU, in Safari or Firefox, or on real phones.

Released

Nov 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