Skip to the pieces
TACTILE UI

Browse

Everything

120 pieces — 17 objects, 30 blocks, 62 kit parts, 11 templates. Every card is running; touch it.

  1. Pin Screen Object · The pin-art toy, as a surface. Press a word through polished pins under a raking lamp, drag it, wipe it, or shake it flat. Your hand is the mould.
  2. Filings Object · Iron filings on paper, magnets underneath. Thousands of slivers swing into a real field and write a hidden word in iron, lit from one lamp. Your pointer is one more magnet.
  3. Ferrofluid Object · Ferrofluid in a dish. It gathers toward the pointer and erupts into sharp spikes, then melts back into a trembling puddle. Your pointer is the magnet.
  4. Chladni Plate Object · A black plate on a shaker, strewn with sand, with a frequency knob. Turn it onto a resonance and the plate sings: the sand walks off the parts that move and gathers on the lines that stand still, and the plate draws its own figure.
  5. Detent Dial Object · A rotary control you count by feel. The value sticks at each notch and clicks over, and the light stays where the lamp is. Not a slider in a round costume.
  6. Compass Object · A liquid-damped compass. The card swings past the mark and settles while a lit display reads the bearing. Your hand turns the knurled bezel, one click a degree.
  7. Search Dial Object · The heavy dial of an edit console. JOG steps frames under your finger, SHTL is a spring-return shuttle whose angle is the speed, SCRL is a flywheel you flick and it coasts. J, K and L work as in every editor.
  8. Knob Kit part · A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
  9. Flip-Dot Object · The flip-disc sign from buses and stations. Every disc swings over, hits its stop, bounces and latches, so each message arrives as a clattering wave. One sign, or a board of them.
  10. Odometer Object · A mechanical drum counter. A digit moves only while the one to its right carries, so 1,099 to 1,100 rolls three drums over together. Not a number that fades into another.
  11. Phosphor Scope Object · A cathode-ray tube behind smoked glass. The beam leaves light behind it: a radar sweep lights your contacts and they fade, a trace glows where the signal lingers. Real afterglow, not a blur.
  12. Spectroscope Object · A prism spectroscope on an optical bench. Every wavelength is traced through the glass, so turning the table slides the spectrum, stops it at minimum deviation and turns it back. The telescope names the line.
  13. LCD Kit part · A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
  14. VFD Kit part · A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
  15. LED bar chart Kit part · A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers and a lit readout for the exact value.
  16. LED matrix Kit part · A dot-matrix display of round LEDs behind smoked acrylic, each with its own bloom and a short warm-up and fade. Status words in a 5×7 face drawn for it, a sparkline, bars, a few icons: “DEPLOY OK”, tokens per second, queue depth.
  17. Iris Object · A lens’s iris diaphragm, as a reveal. Curved blades pivot on their pins, close to a pinhole and open onto what lies beneath, the engraved f-stop ring turning with them.
  18. Reeded Glass Object · A pane of fluted glass on rails. Each reed is a lens that slices what is behind into flipped strips, smeared sideways and sharp top to bottom. Slide it aside by its pull and the content is there.
  19. Ring-bound Notebook Object · A flip book of cards on two rings, seen from above. Lift the lower card over the rings and the page turns: your finger holds the card where it took it, and let go, gravity decides which way it falls.
  20. Vessel Object · A glass of liquid as a gauge. It pours in when the value rises, sloshes when the page jolts and rings when tapped, lit like lab glassware in a photograph.
  21. Needle gauge Kit part · A moving-coil panel meter: a printed scale under glass, a thin needle that swings past the mark and settles, a lamp for the bands and a small LCD for the exact reading.
  22. Ring meter Kit part · The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with the value in lit digits in the middle.
  23. Ladder Kit part · An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
  24. Pull-cord Bulb Object · A pendant lamp that is a switch. Pull the acorn: the detent resists and snaps, and the filament warms from dull red to white while the lamp sways. It can switch the whole page’s finish.
  25. Cassette Object · A clear cassette as a progress bar. The right pack grows as the work goes on and the hubs turn while it runs, the emptier one faster. Your finger winds the tape.
  26. Pocket Player Block · A pocket cassette player for your recordings. PLAY latches down; STOP springs it back and, stopped, pops the door open on its spring. Choose a recording and it swaps the tape and plays.
  27. Venue Marquee Block · A club’s site on the night, under a brass flip-dot marquee. Tonight’s acts clatter in one at a time, amber discs resolving into a name, over the running order and the tickets.
  28. Dark Hero Block · A dark editorial hero over black ferrofluid. The pool follows the cursor from anywhere on the section and rises into spikes under it before the headline has been read.
  29. Attract CTA Block · A newsletter band whose button is a magnet. As the pointer comes near, brass filings behind it turn, stream in and stand round it in a bristling ring, and stay there.
  30. Hand Press Launch Block · A coming-soon section revealed by a hand. As it scrolls into view a palm presses into a pin board from behind, fingertips last, and stays; the date and a real signup sit beside it.
  31. Engraved Client Plates Block · “Used in production by…”, as metal name plates. Brushed aluminium or anodised black, screwed or riveted, each client’s mark cut into the metal with one quiet number under it.
  32. Pin 404 Block · A 404 standing out of a pin board. The visitor wipes it flat by hand; a moment later it climbs back up, because the page is still missing.
  33. Field 404 Block · A 404 on a sheet of lost steel filings. As the visitor moves, a field-strength readout climbs and the iron slowly finds 404. The copy owns the joke; two plain links lead out.
  34. FAQ Index Block · An FAQ as a card-index drawer. Each question is typed along a card’s edge with its subject on a staggered tab; pull one and it lifts out to show the answer. An accordion underneath.
  35. Cloth-lit Cubes Block · A features row of small devices on a desk. Each feature is a cube in speaker cloth with its icon lit through the weave; one shows its figure on lamps, one breathes as the live one.
  36. Synth Panel Block · A synthesiser’s live front panel. Turn any of seven machined dials and the scope redraws the filtered, driven waveform before a note is heard.
  37. Thermostat Block · A home-climate section with a glazed ceramic dial. It clicks at every degree, draws the work left as an arc from the room to the set point, and turns itself when you pick a time of day.
  38. Patch Bay Block · A rack panel of jacks with a cable hanging from each source. Carry a plug to where the events should go and it seats with a click; the lamp beside it lights for every event the cable carries.
  39. Machined Footer Block · A footer made as the bottom panel of a device. Printed columns of links, a status window with a real lamp, a changelog key, an Aluminium / Graphite switch for the whole page, the build number stamped in.
  40. Portfolio Iris Block · A photographer’s index where every frame is a shutter. Photographs peek through graphite blades, open whole on hover or focus, and shut where they stand when a filter leaves them out.
  41. Carousel Kit part · Slides seen one at a time through a viewer’s gate: transport keys either side of a frame counter on an LCD, lamp keys to jump, swipe on touch. Nothing moves on its own unless you ask it to.
  42. Portfolio Template · A design studio’s portfolio as a museum case: eight things the studio made, each built from kit parts, standing on two shelves with printed labels, a register below, and a case study for each with the object live on a stage.
  43. Impression Hero Block · A studio’s hero on a full-bleed board of brass pins. The brand word rises out of it under a raking lamp, and the visitor’s hand lifts the pins between the nav and the headline.
  44. Iron Hero Block · A magnetics company’s opening, set like a physics monograph. On the mounted plate below, the name is written in iron filings that swing after the pointer and settle back into the word.
  45. Speaker Launch Block · A speaker launch where the product works on the page. Press Play and a loop made in the browser lifts a gold bowl of ferrofluid into spikes on every kick.
  46. Camera Launch Block · A launch hero for a fast prime, where the lens is the Iris. Turn its aperture ring and the photograph beside it follows: round bokeh wide open, nine-sided points stopped down.
  47. Hi-Fi Volume Block · An amplifier hero in walnut and brushed brass. The input selector snaps and lights its legend, the attenuator clicks 2 dB a step, and two VU needles swing to what the music would read.
  48. Bar Kit part · The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
  49. Shutter Preloader Block · A studio landing page that loads behind a shutter. The Iris breathes over the hero while a counter runs on its blades, then opens as the headline rises; every nav link closes it again.
  50. Pricing Drums Block · A price printed on brass drums. Switch the period or the currency and the figure rolls to its new value with the period engraved beneath; a tally shows the founder seats actually left.
  51. Reading Progress Block · A long read with a test tube for a progress bar. The tube in the margin fills with ink as the essay is read, and sloshes when the reader skims.
  52. Blog Template · An engineering journal for a fleet of neighbourhood batteries: a nameplate, the newest entry as a cover whose picture is its own reading, a ruled ledger of numbered entries, and a long read with notes in the margin and a figure you can replay.
  53. Goal Tally Block · A fundraiser’s total on big printed drums. They roll up as each pledge lands, beside a feed of named supporters and a lane-rope rail to the goal. Pledge, and your £25 carries through.
  54. Trip Computer Block · An instrument cluster as a stats band. An odometer with red tenths, a trip meter whose Reset winds the drums back to nought, the range counting down. One preset turns it into a SaaS band.
  55. Scoreboard Block · A match centre round a flip-dot scoreboard. Big amber numbers and a clock counting real seconds; a goal ripples the whole board outward before the number turns over.
  56. Readout Kit part · A printed label over a value: key figures, with the unit small and the change in words.
  57. Departures Board Block · A departures board of flip-dot lines under an enamel fascia. A train starts boarding, another slips five minutes, the first departs and every row below moves up in a clattering cascade.
  58. Crowdfund Flask Block · A fundraiser where the total is honey in a flask. It pours to the share raised on first view and counts the pounds on its enamel patch; every reward backed pours a little more in.
  59. Accordion Kit part · Printed sections that open in place. Each head ends in a small square key printed +; open, the key latches below the plate and reads −.
  60. Chat Kit part · An AI chat as a teleprinter, with restraint: what you type sits in a recess; the answer prints on a perforated slip with an amber lamp at the print head; code comes up on display glass. Composer with attachments and a send key that becomes Stop.
  61. Alert Kit part · A message let into the surface, with an annunciator: a small lit legend — Note, Done, Check, Fault — beside the words that say what happened.
  62. Avatar Kit part · A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
  63. Profile card Kit part · A person’s ID plate: their coin set in a countersunk socket, name and role, a rating plate of facts engraved in tabular figures, and one key to act. Compact for one line.
  64. Tag Kit part · A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
  65. Status Kit part · A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
  66. Lamp Kit part · The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing — always next to words.
  67. Key Kit part · Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
  68. Icon key Kit part · A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.
  69. Commit key Kit part · A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says how it ended.
  70. Calendar Kit part · A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut between two caps, and events are lamps named in the line below.
  71. Date picker Kit part · A date field with its calendar card in a slot underneath: type a date in any common form for your locale, or press the key and the card slides out. Single dates and ranges; shown the Intl way, posted as ISO.
  72. Panel Kit part · A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
  73. Tray Kit part · A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
  74. Grille and cloth Kit part · Perforated metal and speaker cloth, for the place where a real device would breathe or sound.
  75. Chart recorder Kit part · A strip-chart recorder: gridded paper advancing under a pen that rides a rail, drawing the live value as the paper moves and printing the time in the margin. For p95 latency, tokens per second, grid frequency, a cold room’s log.
  76. Lamp heatmap Kit part · A heatmap as a matrix of small panel lamps set into the plate: each lamp’s brightness is the value, off to full in four steps, with a printed legend. Deploys per day over a year, incidents by hour of the week, energy by the hour.
  77. Plot Kit part · Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now.
  78. Glass Kit part · Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
  79. Check Kit part · An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
  80. Dashboard Template · A home-energy screen for a house, not an ops room: the headline says what the house is doing, three big readouts, the ground floor drawn as a plan of circuits with their switches and a room gauge, the day on the chart recorder, the battery and tonight’s rules.
  81. On-call Template · An on-call console at 3 a.m., for a payments incident: one alarm plate with a pilot lamp, the time open in a lit display and latency on a chart recorder; acknowledge, escalate, page and roll back; the rota as a board of name cards.
  82. Agent console Template · An operator’s desk for agents in production: the fleet’s status on an LED sign as the masthead, the chosen run’s steps as a full-width LED tape, runs in a rail, throughput on the recorder, evals on a heatmap, spend on a ring, and a command line.
  83. Analytics Template · A monthly report laid out like a printed annual report: one 176 px LCD figure, the retention cohorts as the centrepiece heatmap, usage in glass, signups by source on LED bars, a sortable feature table and numbered notes. Nothing moves at rest.
  84. Dialog Kit part · A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
  85. Command palette Kit part · Every action and page behind one key: a modal plate whose entry line is a lit display, with the results printed below and the chosen one pressed in.
  86. Menu Kit part · A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
  87. Empty state Kit part · What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.
  88. File tree Kit part · Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.
  89. Upload Vessel Block · A file-import dialog where the upload fills a beaker. Water pours in with the bytes, fizzes while the files are checked, and stands full with a tick when the data is ready.
  90. Field Kit part · Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
  91. Combo Kit part · One field with its one action in a shared well: subscribe, search, add.
  92. Stepper Kit part · A small integer with − and + keys either side, in one well.
  93. Sign-in Kit part · Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that re-prints the plate, and errors that say how to fix them.
  94. Scrub field Kit part · A number you can type or drag, the way a pro tool’s value field works: an engraved ruler under the numerals slides beneath a fixed index as the value moves.
  95. Tumbler lock Kit part · A PIN or one-time code dialled into a combination lock: number wheels behind a slot in the plate, turning on detents. Right, a locking bar drops into their notches; wrong, they spin back to blank.
  96. List Kit part · Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others — from the keyboard or by its grip.
  97. Processing State Block · A long job’s progress card, crowned by ferrofluid. The dish breathes with the work, surges as each of four steps completes, and settles to a mirror under the word “Balanced.”
  98. Side rail Kit part · App navigation in a panel: the current page is a recess with its lamp lit. The rail on the left of this page is one.
  99. Tabs Kit part · Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.
  100. Pagination Kit part · Pages for tables and lists: numbered keys in a tray with the current page latched down, seven slots so the row never changes width. Compact, it is a transport with a track counter.
  101. Notifications Kit part · A key with a counter window in its cap, and a card of messages hung from it. Each unread message has its lamp lit; reading it puts the lamp out and the counter steps down.
  102. Onboarding Kit part · Setting something up: stations along a groove — done ones with their lamp lit, the current one a raised cap — and a checklist of check keys with a progress slot.
  103. Popover Kit part · A card hung from the key that opened it, with a printed leader running back to the key. Not modal: the page stays live around it.
  104. Progress Kit part · Progress through a task: ink filling a groove, never a coloured bar.
  105. Radio Kit part · One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.
  106. Selector Kit part · One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
  107. Select Kit part · A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
  108. Vault sign-in Template · A two-step sign-in with nothing else on the page: one screwed plate whose lit display says LOCKED, the sign-in part (Google, GitHub or an email code), then the code dialled into a tumbler lock, and the display opening.
  109. Fader Kit part · A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
  110. Spec list Kit part · Key and value facts, printed like the plate on the back of a device.
  111. Table Kit part · Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
  112. Text area Kit part · Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
  113. Toast Kit part · A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.
  114. Switch Kit part · On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
  115. Rocker Kit part · A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
  116. Tooltip Kit part · A one-line name for an icon key, printed on a small dark plate above it on hover and on keyboard focus.
  117. Website Template · An uptime product site that speaks in specimens: “Nothing to report.” at display size, a live check of your own address, a year of its own alerts as lamps, three controls that are the whole setup, how it decides to speak, a printed rate card and questions.
  118. Billing Template · A billing statement you can operate, for a nine-seat studio: the amount due in display type, usage on LED bars, the plan changed by a rotary selector with the proration printed as invoice lines, seats and notices, and a guarded danger plate.
  119. Shop Template · A product page for a piece of desk hardware, laid out like a catalogue spread: the “photograph” is the unit itself, built from kit parts and changed by the configurator, beside a display model number, options, the price and a cart drawer with a checkout.
  120. Docs Template · Documentation as a printed service manual, for a feature-flag service: a numbered contents with a search that filters it, a display chapter numeral, code on dark plates with copy keys, printed warnings, and an instrument on the bench that runs what the page describes.