Micro Interactions

Micro interactions for the moments products get wrong.

Serious interactions for real product moments, and funny ones that shouldn't exist (some secretly should). Copy the code or the prompt. New ones drop every week.

61 interactions so far (35 Useful, 14 Secretly Useful, 12 Pure Joke).

Every interaction runs live on the site and ships with a prompt that rebuilds it in any stack. Designed by Outcraft©, built on the Outcraft Design System v2.

Use an interaction

On the site, View Code opens Prompt, HTML, CSS, JS and One File tabs. Each tab has a Copy button that stays in view while you scroll the code; One File also has Download. Copy Prompt copies the prompt. Everything you copy is self-contained: the CSS carries the exact Outcraft tokens and the Geist font it needs, so it works pasted into any page with nothing else installed.

In this repo, each folder is one interaction:

• one-file.html: the whole interaction in one file that works on its own. Open it, or paste it into a page.
• index.html: the demo page with a Reset button.
• component.html, component.css, component.js: the source parts. They use the Outcraft tokens in outcraft-tokens.css. On the site, the copied CSS already includes the tokens each component needs, so nothing else is required.
• prompt-full.md: a copy-ready prompt that rebuilds it in any stack, with the exact Outcraft values (prompt.md is its source).

Each script finds its own [data-mi="…"] element on load and exposes an init function for content added later, for example initBlastRadius(el): init plus the name in PascalCase.

Theming

Every value is an Outcraft token: color, type, radius, shadow, blur, spring and duration. Change the palette tokens in outcraft-tokens.css to re-brand everything at once. Light and dark both work, and Reduce Motion is respected everywhere.

Work on the library

The design rules, the checklist for new interactions and the decision log live in RULES.md, with CLAUDE.md and AGENTS.md pointing AI assistants to it. Those three files are kept on the owner's machine and are not published in this repo. Assistants working on the project read RULES.md first. In short:

python3 tools/build.py --check   # check the rules
python3 tools/build.py           # check, then generate the site, every <slug>/ page and this README's catalogue

The build writes index.html, each <slug>/index.html, one-file.html and prompt-full.md, and refreshes the intro and catalogue in this README, so commit those generated files with every change.

Every icon is a Lucide icon. tools/lucide-icons.json holds the exact Lucide drawings in use, and the build fails any icon that isn't one of them: to use a new icon, copy its drawing from lucide.dev into that file first.

Deploy the repository as a static site (entry point index.html, no build command). On Vercel, import the repo and keep the defaults.

The site's Submit an idea form sends to the Formspree form set as formEndpoint in site.json; Formspree saves each idea and emails it on, so no address appears on the site. If you reuse this repo, put your own Formspree form there, or leave it empty and the form runs in preview mode and sends nothing.

Interactions

No.	Name	Type	Topic
001	Blast Radius	Useful	Files and Data
002	Heavy Save	Useful	Files and Data
003	Point-at-Error	Useful	Forms and Input
004	Coin Drop	Useful	Billing and Plans
005	Shortcut Reveal	Useful	Search and Navigation
006	Spill Counter	Useful	Forms and Input
007	Frosted Peek	Useful	Billing and Plans
008	Refill Timer	Useful	Loading and Status
009	File-Aware Dropzone	Useful	Files and Data
010	Ghost Caret

Credits and license

• Type: Geist and Geist Mono (SIL Open Font License 1.1).
• Icons: Lucide (ISC). The exact drawings in use are in tools/lucide-icons.json.
• Status colors: Radix Colors (MIT).
• Patterns inspired by shadcn/ui (MIT). All code is original.

Released under the MIT license.