Tain

How it's made

1. 01

   A product that maps onto a material

   Tain reads documents, so its story maps onto liquid metal: messy documents in (a lake), understood (an orb), structured (a tray of cells), measured (bars), streamed (beads), kept safe (a monolith), done (a seal). Each section asks the object for one form and the scroll drives the morph.

2. 02

   Shapes, not meshes

   Each form is up to 16 primitives joined by a smooth union. Every primitive morphs on its own staggered clock, so pieces leave one by one, neck and rejoin like liquid instead of popping. One fragment shader marches the scene inside the object's projected bounds only.

3. 03

   The look is the studio

   Chrome is a mirror, so it only looks expensive if what it reflects is designed. An analytic studio of sweeps, slatted boxes, strips and black flags is evaluated per reflected ray, with Schlick Fresnel, one bounce so cells mirror each other, and a contact shadow drawn into a transparent canvas so the page shows through.

4. 04

   Set pieces that do the product's job

   A lake that mirrors the page's own headline, real documents that fall, tip and melt into it, and droplets that fly on an arc and land exactly on a DOM element the page measured, typing its value in as they arrive.

5. 05

   A real app behind Sign in

   The demo is an interface, not screenshots: a documents table, a review screen with fields on the page and keyboard shortcuts, a working schema editor, API keys and logs, a command palette and every state designed (empty, loading, error, success), on one store with seeded sample data.

6. 06

   Light on the GPU

   Drivers inline every function call, so the field is evaluated from one call site per loop and the larger program compiles only after the first frame. Every device starts on the light tier, still frames accumulate to a clean image and then stop drawing, and a script fails the build when the shader grows past its budget.

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.

• bench/

• scripts/

• index.html

• package.json

• package-lock.json

• vite.config.ts

• tailwind.config.js

• postcss.config.js

• tsconfig.json

• 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 · TypeScript 5.9 · React Router 6.30 · Framer Motion 11 · Tailwind CSS 3.4 · WebGL2 with no 3D library · Raymarched signed distance fields · GLSL shaders · Self-hosted fonts (Mona Sans and Martian Mono)

File size

1.6 MB

Browser

Needs WebGL 2 for the chrome: current Chrome, Edge, Firefox and Safari, on desktop and phones. Every device starts on the light tier and a governor on measured GPU time raises quality; the render scale follows the marched pixel count, the larger shader program compiles only after the first frame, and a GPU that keeps choking on the light tier, a lost context or no WebGL 2 swaps the object for still images while every page, form and the app demo still work. Reduced motion stills the liquid and the reveals. Tested in headless Chrome on software WebGL at 1440 x 900, 1152 x 720 and 390 x 844, with no sideways scroll; real GPUs, Safari, Firefox and real phones weren't part of the tests.

Released

Oct 2026

Version

2.0.2

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