Start here
Introduction
Tactile UI is a collection of interface objects with real physics (pins on springs, discs on axles, iron in a magnetic field, fluid in a glass) and of blocks: finished sections of a website built around one of those objects doing a real job.
Every piece here can be watched moving. The home page runs live in your browser for everyone, and so do the objects, and the blocks in the home page's strip, on a category's cards. A piece's own page keeps its stage and its controls behind a sign-in until you are in: sign in with Google or GitHub, which costs nothing, and the piece runs live, with every setting to change. The other blocks show a recording on a category's cards until you sign in. The Odometer and the other free pieces, and the pieces free with an account, run live for everyone on their own page, signed in or not. The kit's other parts show a recording (or a still, where there is nothing to operate) to anyone without the Tactile UI Kit, and play live with it.
What the Pass adds
- The source. Each object is one ES module and one stylesheet. No framework, no build step, no dependencies.
- The example. A complete, runnable page at exactly the settings you chose: the Code tab.
- The prompts. For each piece, a *reproduce* prompt that specifies it down to the tokens, and a *remix* prompt that teaches the technique for your own design.
- The package. A zip with the source, the example, both prompts, a checksum for every file and the licence.
- Everything added later, without paying again.
The Founder Pass is $99 for the first fifty seats and $129 for the next fifty, and includes the Tactile UI Kit; after that the Pass is $199 and covers the objects and blocks, and the kit is sold on its own. Both are one payment, for the life of the product. At $99, a full refund within 30 days, for any reason. Every other Pass: within 14 days, if you have not downloaded or opened the code. See pricing.
Objects and blocks
An object is the mechanism: the Flip-Dot sign, the Odometer, the Iris. It is a class you construct on an element, configure with options, update and destroy.
A block is a section built with an object: a departures board, a pricing hero, a 404 page. It ships with its own markup, styles and fonts, and the object it uses travels with it in the package.
Free to look at, honest about it
Every piece's page lists what it is made of, how big it is, how many tests hold it to its behaviour and every state it was designed for, including reduced motion. A piece that runs live runs in your browser, so it can be inspected like any website's code; the licence is what governs using it. The Odometer is free and open source: take it and use it. Free and paid says what each kind of piece lets you do.
Next: Installation.