TypeUI Micro Interactions: 113 AI-Ready UI Interaction Prompts (Show HN Review)

TypeUI launched a catalog of 113 interactive UI micro-interaction patterns, each paired with a copyable implementation prompt meant to be handed to an AI coding assistant. The Show HN post reached 50 points and 20 comments, and the dominating theme in the discussion was that the examples look promising but ship without the polish a design-focused product is expected to have.

The catalog lives at typeui.sh/micro-interactions and is organized into 12 component categories. It is a prompt library as much as it is a component gallery: every entry shows a live behavior and offers an implementation prompt to copy.

What TypeUI's micro-interactions library actually contains

TypeUI's micro-interactions page lists 113 interactive examples grouped by UI surface. Each example provides a live preview and a copyable prompt for generating the implementation, marketed under the name "TypeUI Creative."

The 12 categories on the page are:

  • Buttons — confirmation, undo, copy feedback, loading states, upload progress, including a hold-for-1.2-seconds-to-confirm pattern.
  • Inputs — password visibility, autosave, validation, formatting, character counts, and suggestions, including an email-domain suggestion that proposes "Did you mean gmail.com?" and a Caps Lock detection toggle.
  • Selection controls — checkboxes, toggles, and radios that reveal settings, update totals, filter results, and enable or disable actions (for example, permission radios for Read, Edit, and Manage).
  • Modals — confirmation, validation, drag dismissal, and unsaved-changes handling, with an emphasis on keyboard focus preservation.
  • Drawers — edge gestures, linked backdrops, and expanding panels with pointer and keyboard alternatives.
  • Tooltips — hover cards, link previews, and shared hover delays.
  • Toasts — undo actions, asynchronous results, and swipe dismissal.
  • Step navigation — progress, validation, returning to completed steps, and remaining time (for example, "Time remaining 2 min").
  • Lists — reordering, pinning, archiving, inserting, and previewing items.
  • Sliders — range selection, snap points, tooltips, scrubbing, and before-and-after comparison, including defined stops at 0, 25, 50, 75, and 100.
  • Cards — expanding details, flipping content, revealing actions, swiping, and shared-element transitions.

Commenters confirmed the patterns are useful but not production-ready

Hacker News commenters who tested the examples reported concrete behavioral bugs rather than stylistic disagreements, which makes the criticism unusually specific.

Commenter pftburger praised several effects — the action slide-out, the wall reveal, and the slide-off reveal — and then listed defects:

the swap icon state theme preview switcher cascades the element brightness rather than fading them together.

The confirm reveal has something wrong with the spring every third or fourth click, which is strange

Cards: the stacked deck cycle. When you click Next, it doesn't draw the top card.

The shared element expand option: when you minimize, the spring dampening pushes the components outside of the container.

Swipe to dismiss causes the container to temporarily show a scroll bar.

Commenter cosmotic flagged three interaction-design problems in the first few examples:

toggle animation on the heart moves the same direction for add and subtract (confusing)

hold-to-trigger indicator is covered by finger on touch screen

remove button confirmation can be accidentally confirmed by double click

The finger-covering problem is a touch-ergonomics issue: a hold-to-confirm affordance that renders its progress indicator under the user's own fingertip cannot communicate progress while the gesture is in progress.

The harshest assessment came from xhayden, who questioned whether the catalog demonstrates anything an AI model could not produce in one shot:

A lot of these are fairly unpolished and don't seem to have been designed with much consistency. I think if I gave Opus 5.5 instructions to make pretty much any of these components it could produce these 1-shot.

That comment also raised two product-design points. First, the verification code example animates transitions between digits but not the check icon update. Second, the bio character counter allows only 20 characters of overfill past the limit, which xhayden argued defeats the purpose: the point of an overfill counter is to let users type their full text and then edit down. The comment also noted that copying a prompt requires creating an account and that no obvious path explains customization options.

Fe2O3 noted the marketing framing, observing that a testimonial quoted from shadcn reading "It's one of the resources I used recently" is an odd top-line endorsement for a catalog whose whole job is visual polish.

Not every comment was critical. cpan22 wrote simply, "these look great."

Pricing and access drew scrutiny

Two commenters cited prices for accessing the prompts, and the figures they gave do not match each other, so neither should be treated as an official number.

  • tintor summarized the offer as "$30/month for a button on web page?"
  • xhayden cited "a minimum of $10/mo" and argued that many free component sites offer comparable output.

Commenter jonshariat raised a practical question about the business model: if the patterns are rendered in a public browser, an agent could presumably inspect and reproduce them, so does using TypeUI's MCP integration produce measurably better output than scraping the previews? The catalog page itself does not document MCP setup or prompt customization options.

An alternative workflow: structured design tools plus agents

Commenter totetsu described a competing approach that combines a structured design tool with agent access rather than a prompt catalog. The setup runs Penpot on Fly.io and connects it to an MCP server plus a browser-use tool, then adds image generation and code execution for converting generated PNGs into SVGs. The stated goal is to get "the best of both worlds, of a structured ui design tool, and a flexible adaptive chat interface."

This is the core architectural tension the thread surfaces: a fixed catalog of 113 curated prompts offers consistency but constrains customization, while a general agent driving a real design tool offers flexibility but no guarantees of quality per component.

A cross-platform animation caveat worth knowing

One commenter, deburo, pushed back on the claim that animations looked choppy, attributing the problem to how Chrome maps the CSS prefers-reduced-motion media feature to the Windows "Animation Effects" accessibility setting. Users who disable animation effects in Windows will see reduced or absent motion on the web as a side effect, which can look like a broken component rather than an intentional accessibility behavior.

Summary of the dispatch

TypeUI's micro-interactions library packages 113 UI behavior patterns as copyable AI implementation prompts across buttons, inputs, selection controls, modals, drawers, tooltips, toasts, step navigation, lists, sliders, and cards. The Hacker News response treated the concept as valuable and the execution as unfinished, citing specific spring and layout bugs, touch-target oversights, inconsistent state coverage in examples like verification codes and character counters, and a pricing wall in front of the prompts.

Sources