# Tactile UI

> Interface objects with real physics — pins, magnets, fluid, springs and gears — and finished website blocks built with them. Vanilla ES modules and CSS, no dependencies. Free to try on the site; a Pass (founder $89, then $150, one-time) licenses the source, the prompts and the packages.

## Docs
- [Introduction](https://tactile-ui.me/docs/introduction)
- [Installation](https://tactile-ui.me/docs/installation)
- [Frameworks](https://tactile-ui.me/docs/frameworks)
- [Licence](https://tactile-ui.me/licence)

## Objects
- [Pin Screen](https://tactile-ui.me/objects/pin-screen): The pin-art toy as a surface: a close-packed field of polished pins in a machined frame, with a word, a hand or any image standing proud under a raking lamp — pushed, dragged, wiped or kept until you shake it flat.
- [Detent Dial](https://tactile-ui.me/objects/detent-dial): A rotary input with physical detents: the value sticks at each notch and clicks over, the drag survives crossing the bottom of the dial, and the light stays where the lamp is.
- [Flip-Dot](https://tactile-ui.me/objects/flip-dot): The electromagnetic flip-disc sign from buses and stations: painted discs that swing over on their axles, hit their stops, bounce and latch, so every new message arrives as a clattering wave — a single sign, or a whole board whose lines change one at a time behind glass.
- [Ferrofluid](https://tactile-ui.me/objects/ferrofluid): A pool of glossy black magnetic fluid in a shallow dish. Bring the pointer near and it gathers toward it and erupts into a lattice of sharp spikes; take it away and they melt back into a trembling puddle.
- [Iris](https://tactile-ui.me/objects/iris): A camera lens's iris diaphragm as a reveal: curved blades pivoting on pins close to a pinhole and open onto real content beneath, with an engraved f-stop ring that turns as they move.
- [Odometer](https://tactile-ui.me/objects/odometer): A mechanical drum counter as a number display: printed numerals on turning drums behind a glass window, where a digit moves only while the one to its right carries — so 1,099 → 1,100 rolls the tens and hundreds over together. (free)
- [Vessel](https://tactile-ui.me/objects/vessel): A glass of simulated liquid as a gauge: it pours in when the value rises, sloshes when the page jolts, rings when tapped, and is lit and shaded like a photograph of lab glassware.
- [Filings](https://tactile-ui.me/objects/filings): Iron filings on a sheet of paper with magnets underneath: thousands of slivers swing into a real magnetic field, sweep a bare moat round a hidden word and pile onto its strokes, so the name appears written in iron — filled letters, lit from one lamp — and a magnet under the pointer stirs it.
- [Pull-cord Bulb](https://tactile-ui.me/objects/pull-cord): A pendant lamp that is a switch: pull the acorn on its cord, feel the detent resist and snap, and the filament warms from dull red to warm white while the cord springs back and the lamp sways.
- [Compass](https://tactile-ui.me/objects/compass): A heading instrument: a printed card floating in liquid swings under a fixed lubber line inside a knurled bezel — turn the bezel in 1° detents and the card follows, passes the mark and settles, while a lit display in the hub reads the bearing.
- [Phosphor Scope](https://tactile-ui.me/objects/phosphor-scope): A round cathode-ray tube behind smoked glass in a bead-blasted plate, drawn by a beam that leaves light behind it: a radar sweep lights your contacts as it passes and they fade, a trace glows brighter where the signal lingers, and words written by the beam flicker like a vector monitor.

## Blocks
- [Impression Hero](https://tactile-ui.me/blocks/impression-hero): A studio's landing hero where the brand word rises out of a full-bleed board of brass pins under a raking lamp, the nav and a low band of headline, copy and one call to action sitting on the board's dark ends while the visitor's hand lifts the pins in between.
- [Pin 404](https://tactile-ui.me/blocks/pin-404): A page-not-found section where 404 stands out of a framed pin board lying on the page like a desk toy: the visitor wipes it flat with their hand, and a moment later it climbs back up — because the page is still missing.
- [Hand Press Launch](https://tactile-ui.me/blocks/hand-press-launch): A coming-soon section whose reveal is physical: as it comes into view a hand presses into a pin board from behind — palm first, fingertips last — and stays, with the product and its promise on one side and the date and a real email signup on the other.
- [Synth Panel](https://tactile-ui.me/blocks/synth-panel): A synthesiser's product section where the front panel is live: turn any of seven machined dials and the scope redraws the filtered, driven waveform before a note is heard.
- [Thermostat](https://tactile-ui.me/blocks/thermostat): A calm home-climate section whose glazed ceramic dial clicks at every degree, draws the work left to do as an arc from the room to the set point, and turns itself when you press a period of the day.
- [Hi-Fi Volume](https://tactile-ui.me/blocks/hifi-volume): An amplifier's product hero in walnut and brushed brass where a snapping input selector lights its legend, a 24-step attenuator clicks 2 dB at a time, and two backlit VU needles swing to what the music would really read.
- [Departures Board](https://tactile-ui.me/blocks/departures-board): A station's departures section where a flip-dot board hangs from an enamel fascia and changes one line at a time — a train starts boarding, another slips five minutes, the first departs and every row below it moves up in a clattering cascade.
- [Scoreboard](https://tactile-ui.me/blocks/scoreboard): A club's live match centre built around a stadium scoreboard of flip-dot modules in a steel frame — big amber numbers, a clock counting real seconds — where a goal ripples the whole board outward from its centre before the number turns over.
- [Venue Marquee](https://tactile-ui.me/blocks/venue-marquee): The top of a club's own site on the night, where a brass flip-dot marquee bolted to the wall clatters tonight's acts in one at a time — the name as a scatter of amber discs that resolves, the set time and room under it in white — over the running order and a ticket card.
- [Speaker Launch](https://tactile-ui.me/blocks/speaker-launch): A speaker's launch hero where the product shot is the product working: press Play and a loop synthesised in the browser lifts a gold bowl of ferrofluid into a crown of spikes on every kick, beside the name in a hairline serif, the price and the pre-order.
- [Dark Hero](https://tactile-ui.me/blocks/dark-hero): A dark editorial landing hero where a pool of black ferrofluid lies behind a headline set in a heavy serif and follows the cursor from anywhere on the section, gathering, leaning and rising into spikes under it before the headline has been read.
- [Processing State](https://tactile-ui.me/blocks/processing-state): A long job's progress card over the app it belongs to — a percentage, the time left and four counted steps — crowned by a dish of ferrofluid that breathes with the work, surges as each step completes and settles to a mirror under the word “Balanced.”
- [Portfolio Iris](https://tactile-ui.me/blocks/portfolio-iris): A photographer's index of work where every frame is a camera shutter: six painted photographs peek through graphite blades, open whole when you hover or focus a project, and shut where they stand when the category filter leaves them out.
- [Camera Launch](https://tactile-ui.me/blocks/camera-launch): A launch hero for a fast prime where the lens is the Iris itself: turn its engraved aperture ring and the sample photograph beside it follows — the city behind a glass of wine melts into round bokeh wide open, closes to nine-sided points and comes sharp stopped down, while the shutter speed doubles stop by stop.
- [Shutter Preloader](https://tactile-ui.me/blocks/shutter-preloader): A film studio's landing page that loads behind a camera shutter: the Iris breathes over the whole hero while a huge counter runs on its blades, then opens slowly onto the page as the headline rises — and every nav link is the same shutter closing, a chapter card, and the page behind it changed to the coast at another hour.
- [Pricing Drums](https://tactile-ui.me/blocks/pricing-drums): A pricing section where the price is printed on brass drums in a blackened-brass plate: switch monthly, yearly or lifetime, or change currency, and the figure rolls to its new value with the period engraved beneath it, while a small tally shows the founders’ seats actually left.
- [Goal Tally](https://tactile-ui.me/blocks/goal-tally): A community fundraiser for reopening a 1930s lido, where the total raised is printed on large drums that roll up as each pledge lands — a feed of named supporters, a lane-rope progress rail with its goal and stretch goal, and a pledge button that sends your own £25 carrying through the drums.
- [Trip Computer](https://tactile-ui.me/blocks/trip-computer): An instrument cluster as a stats band: an odometer with red tenths, a trip meter whose Reset winds the drums backwards to nought, the range counting down and the average settling, behind one sheet of cluster glass with a speed tape — or, switched to its platform preset, a SaaS band where requests served turn over and Deploy winds the counter back.
- [Reading Progress](https://tactile-ui.me/blocks/reading-progress): A long read from a journal of working glass — an essay on the test tube, set with a drop cap, a figure drawn to scale and a hanging pull quote — where a slim test tube in the margin fills with ink as the essay is read and sloshes when the reader skims.
- [Crowdfund Flask](https://tactile-ui.me/blocks/crowdfund-flask): A beekeepers' co-op raising the money for a shared honey house, where the total raised is honey in a round-bottomed flask — it pours itself to the share raised on first view, counts the pounds up on its enamel patch, and every reward backed pours a little more in.
- [Upload Vessel](https://tactile-ui.me/blocks/upload-vessel): A product's file-import dialog, shown over the dimmed app, where the upload fills a lab beaker — water pours in with the bytes, the beaker fizzes while the files are checked and indexed, and it stands full with a tick when the data is ready.
- [Iron Hero](https://tactile-ui.me/blocks/iron-hero): A precision-magnetics company's opening set like a physics monograph — ruled masthead, serif headline with an italic turn — above a mounted plate on which the company's name is written in iron filings that swing after the visitor's pointer and settle back into the word.
- [Field 404](https://tactile-ui.me/blocks/field-404): A not-found page on a black sheet of scattered steel filings that have lost their pattern: as the visitor moves, a field-strength readout climbs and the iron, slowly and physically, finds 404 — while the copy owns the joke and two plain links lead out.
- [Attract CTA](https://tactile-ui.me/blocks/attract-cta): A newsletter band whose Subscribe button is a magnet: as the pointer comes near, brass filings scattered on the sheet behind it turn, stream in and stand round the button in a bristling ring — and stay there when the pointer leaves.