How to build UI components with real physics without weeks of polish

01Why the usual way fails

Physical motion is full of small details: overshoot, friction, weight and the way a part settles at rest. Getting one piece right usually takes several rounds of tweaking, and each round needs your eyes, not just code. Asking an AI coding agent helps with the first pass, but it re-reads its context on every step, so complex UI burns tokens fast and still needs your polish. On top of that, every piece has to work with reduced motion, keyboards, and light and dark themes, which multiplies the work.

02How Tactile UI helps

Tactile UI is a library of interface objects that already have the physics worked out, such as pins on springs, discs on axles and fluid in a glass. Next to the objects there are finished page sections built around them, like a departures board, a pricing hero or a 404 page. Instead of building the mechanism yourself, you construct an object on an element, set its options and use it in your app. Because the pieces are finished, your agent can reuse them rather than generate new UI from scratch.

03Step by step

1. Start with the free pieces, such as the Odometer or the Compass, to see how an object is set up.
2. Install a piece by copying it, through the shadcn CLI, or by pointing your agent at the MCP endpoint.
3. Construct the object on an element, pass the options you want, and call update or destroy when your app changes.
4. Pick a block if you need a whole section, like a pricing hero, instead of a single control.
5. Switch the finish at the foot of the list to check how the piece looks in the theme you plan to use.

04Tips

• Before you pay, try the six open source pieces in a real page. They show you how the objects are built and whether the style fits your project.
• If you work with Claude or Cursor, connect the MCP endpoint so the agent reads each piece's docs instead of guessing how to use it.
• Check every piece with reduced motion turned on. A physical control should still be usable when animation is off, and each piece's page lists the states it was designed for.
• Keep one finish across the whole app. Mixing materials like oak and phosphor on the same screen makes the hardware look less believable. Pick the finish first, then build the rest of the page around it, so colours and light stay consistent from section to section.

05Questions