LM-08Consumer tech

Tasto

An aluminium mechanical keyboard you can type on, built in code.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A four-page site for TASTO 75, a made-up 75% keyboard in milled aluminium, drawn live with three.js on one canvas that stays in place as the pages change. The hero types its own headline, then lets the visitor type on the board, with every key sound synthesised in the browser. Scroll takes the board apart into eight layers, cuts a switch open mid-press and lets the visitor hear each of the four plates. A switches page draws each force curve as you press, a specs page has a dimensioned drawing, and a configurator prices the finish, switches, keycaps and plate and ends in a reservation form you connect to your own form service (it sends nothing until you do). For keyboard makers, desk-gear brands and anyone selling a product people want to hear.

How it's made

  1. One table for the whole board

    Every key, the case and the knob are in one table in millimetres. The 3D board, the 2D fallback, the dimension drawing and the typing all read it.

  2. The keyboard, built in code

    The case, the sculpted keycaps, the knob, the plate, the PCB, the foam, the switches and the stabilisers are lofted and extruded from that table in three.js. That comes to 171,536 triangles and no model files.

  3. Legends drawn in Inter

    Every keycap's print is drawn into one canvas when the page loads, and a shader tints it for each keycap set. So finishes and keycap sets change live across the whole site.

  4. A switch that follows its force curve

    The cut open switch's leg, tactile bump, click jacket and spring are shaped from the same force-curve functions that draw the chart and drive the sound.

  5. One canvas under four pages

    One fixed canvas sits between each section's background and its words. Named stages and camera fits move it as you scroll, with springs, clipping and a 2D fallback.

  6. Light and sound, made in the browser

    Two studios are baked into reflection maps and crossfade as dark chapters scroll in. Every thock is synthesised with Web Audio, with its own voice for each plate and each switch type.

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

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

  • 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 · React 18 · three.js 0.171 · Tailwind CSS 3 · React Router 6 · React Hook Form and Zod · Framer Motion 11 · Web Audio (synthesised key sounds) · Inter (self-hosted)
File size
10.1 MB
Triangles
171,536
Load time
1.7 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Current Chrome, Edge, Safari and Firefox on desktop and phones. The 3D needs WebGL 2. Without it, or when the 3D is slow to start, the page draws the same keyboard in 2D, and every section, the typing, the configurator and the form still work. Phones get a lighter render budget and their own camera framings. Tested in headless Chromium at 1440 x 900 and 390 x 844.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. 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. 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. 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 dev

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

An original design built entirely in code. The keyboard, the cut open switch, the textures, the lighting and every key sound are made in the browser, and the page loads no model, image, video or audio file. The legends are drawn in Inter (OFL). The .glb files are exports of the same code. The code was written by an AI coding assistant (Claude Code). No AI image, video, 3D or audio generator was used. TASTO is a demo name with no trademark search run.

Buy LM-08 Tasto

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.