Tsukikage

How it's made

1. 01

   One courtyard, one night

   Every section is a camera position in the same moonlit shrine courtyard, so the page reads as one walk from the gate to the duel rather than a stack of panels. A camera script of cues, each with its own phone framing, moves through it as you scroll.

2. 02

   Wet stone that mirrors

   The flagstones carry a height field, so rain collects in the low parts with real shorelines. Puddles mirror the torii, the lanterns and the maples through a planar reflection pass, broken by ripples and a raindrop every few seconds.

3. 03

   Light in the air

   The scene renders in HDR with raymarched moonlight through the moon's shadow map, shafts through the canopy, god rays from the disc, height fog, bloom and depth of field, then a Night Ink grade: cool shadows, warm lantern highlights.

4. 04

   Five blades from one table

   Each sword's steel, temper line, guard, handle wrap and scabbard are built from a few numbers, with its own effect: moonglow, leaf embers, smoke, lightning or foxfire. Change a colour in the table and the sword itself changes.

5. 05

   A duel with an honest clock

   The game is a pure state machine with scripted tests. Reaction time is measured from the first frame that draws the leaf on the water, so the number on the result card is the reaction the visitor really had.

6. 06

   Textures from nine images

   Nine images generated for the kit (flagstone, lacquer, cedar, roof tiles, stone, bark, two leaf atlases and a mountain backdrop) became full material sets in code: height, normals, roughness and occlusion, with half-size copies for phones.

7. 07

   Fast on phones, safe without WebGL

   Desktop starts on the high tier and phones on medium, and a governor steps down when frames run long. Without WebGL 2, a still courtyard and a 2D duel take over and every section and the form still work.

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/

• server/

• index.html

• package.json

• package-lock.json

• vite.config.ts

• tailwind.config.js

• postcss.config.js

• tsconfig.json

• vercel.json

• .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 · TypeScript 5.9 · Tailwind CSS 3.4 · three.js 0.186 · Lenis 1.3 · Framer Motion 11 · GLSL shaders (HDR bloom and god rays) · Volumetric moonlight and depth of field · Night Ink colour grade · WebAudio (sound synthesised live) · Self-hosted fonts (Shippori Mincho B1 / Zen Kaku Gothic New / IBM Plex Mono)

File size

8.4 MB

Triangles

459,620

Browser

Needs WebGL 2 with float render targets for the live courtyard: current Chrome, Edge, Firefox and Safari on desktop and phones. Desktop starts on the high tier and phones on medium with half-size textures; a governor steps down when frames run long. Without WebGL 2, or if the world can't start, a still courtyard and a 2D duel take over and every section and the form still work. Reduced motion turns off the rails, the slow motion and the camera shake. Tested in headless Chromium with software rendering at 1440 x 900 and 390 x 844: no errors, no failed requests, no sideways scroll. Not yet tested on a real GPU, in Safari or Firefox, or on real phones.

Released

Oct 2026

Version

1.0.1

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