rickyrichards.com

Product · $30

UI Micro-interaction Library

140 UI micro-interactions for buttons, icons, controls, forms, navigation and feedback, plus studio-inspired signatures: the small moments that make an interface feel considered, ready to hand to an AI tool or drop into your own build.

My library of 140 UI micro-interactions: presses, toggles, menus, cursors, loaders, icon morphs and more, including 20 inspired by Apple, Stripe, Linear and Vercel. Every interaction plays live, can be tried with your own pointer, and comes with a prompt ready to paste into Claude, ChatGPT or Cursor, production-ready HTML, CSS and JavaScript, and notes on states and timing. New interactions are added as the library grows.

Get Access · $30

What’s inside

  • Buttons10

    Presses, hovers and state changes for the thing people click most.

  • Icon interactions20

    Icons that morph between states: menus, media controls, volume, toggles and status.

  • Toggles & controls10

    Switches, checkboxes, sliders, steppers and ratings that feel physical.

  • Inputs & forms10

    Focus, typing, validation and upload moments that guide people through a form.

  • Navigation10

    Menus, tabs, headers and indicators that show where you are and where you can go.

  • Cursor & hover10

    Pointer-driven effects: followers, magnets, tilts, spotlights and reveals.

  • Feedback & status10

    Toasts, progress, success and error states that tell people what just happened.

  • Cards & lists10

    Lifting, expanding, dragging, swiping and reordering content.

  • Overlays10

    Modals, sheets, drawers, tooltips and popovers that arrive and leave cleanly.

  • Data & numbers10

    Counters, charts, prices and progress that animate as values change.

  • Loading & states10

    Skeletons, loaders, empty states and swaps between content.

  • From the studios20

    Interactions inspired by the interface craft of world-class design studios and product teams.

Every interaction comes with

Live, playable demo

Watch it run, then take over with your own pointer and try it.

AI-ready prompt

Written to paste straight into Claude, ChatGPT or Cursor with your own project context.

Production code

Framework-free HTML, CSS and JavaScript with light and dark themes, keyboard support and reduced-motion handling.

Full write-up

Every state and its timing, plus the easing and parameters to tune.

How access works

  1. 01Pay once through Stripe. The checkout is under Fobi, my company.
  2. 02The confirmation page gives you the library link and your passcode straight away, and Stripe emails you a receipt.
  3. 03Open rickyrichards.com/micro-interactions and enter the passcode. It stays unlocked on that browser for 90 days, and you can unlock it again whenever you like.
  4. 04New interactions are added as the library grows, at no extra cost.
Get Access · $30

Questions? Email hello@rickyrichards.com