Shoyu

How it's made

1. 01

   A real site from one file

   Name, address, order links, time zone, hours, menu and copy live in one file, and the hero, menu, hours table, footer and search data all read from it. Open now is worked out in the restaurant's own time zone, and a close earlier than the open runs past midnight.

2. 02

   A bowl on a lathe

   The donburi is one closed profile turned on a lathe, so it has real thickness: black lacquer outside, vermilion inside, with the square raimon spiral drawn by its shader and a gilded lip under a clear coat.

3. 03

   One shader for all the food

   Noodles, chashu, soft egg, naruto, nori, menma, negi, sesame and the counter share one material. Each piece carries its kind and its own coordinates, and the shader draws the braised spiral, the jammy yolk, the pink swirl and the fibres from them.

4. 04

   Noodles that hang

   Each strand runs from the chopsticks' pinch down into the broth, fanning out and kinking every centimetre like wavy noodles. Drops of broth and chili oil hang frozen along them, with a crown of droplets where they leave the broth.

5. 05

   One number runs the rain

   Every topping has an air pose and a rest pose. One scroll value drops them in turn, easing in like gravity with a small settle, and each landing sends a ripple across the broth while the chili oil spreads into red pools.

6. 06

   Broth that reflects

   The surface is its own small shader: a slow swirl, the ripples, beads of fat and pools of oil with ragged edges, and tight reflections of the pendant, the neon and the street worked out without a reflection render.

7. 07

   Three in the morning

   One warm spotlight gives the only shadow and a pool on matte wood, a narrow red rim light is aimed upward through the bowl so it never reddens the counter, and the street glows out of focus behind a red neon sign drawn in the site's own font.

8. 08

   A camera script per chapter

   Each chapter sets the framing, angle, rain, steam and dimming at points in its scroll, with separate phone framings. The sign hangs outside the hero's view, and the visit chapter turns to it like a storefront.

9. 09

   Fast on Windows

   Linear output so no shader compiles twice, 2D noise only, one food shader and lights that never switch on and off: 20 shader programs and about two seconds to the first frame. Japanese fonts are trimmed at build time to the characters the site uses.

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.

• index.html

• package.json

• package-lock.json

• vite.config.ts

• tsconfig.json

• tailwind.config.js

• postcss.config.js

• 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 · three.js 0.186 · Tailwind CSS 3.4 · GLSL shaders · Procedural geometry

File size

0.1 MB

Triangles

154,393

Load time

1.0 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)

Browser

Needs WebGL 2: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones get fewer noodle strands and steam sprites, a lighter bowl, a smaller shadow map and a capped pixel ratio, and the pixel ratio and then bloom step down if a device can't keep up. Reduced motion stills the drifting toppings, the steam and the sign's flicker. Without WebGL the menu, hours, map and ordering still work. Tested in headless Chrome on a real GPU at 1440 x 900 and 390 x 844; Safari, Firefox and real phones weren't part of the tests.

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