micro-interactions

Name: micro-interactions
Author: dembrandt

277installs5forks

How to install micro-interactions?

dembrandt/dembrandt-skills/micro-interactions

$npx -y skills add dembrandt/dembrandt-skills --skill micro-interactions

Installs into the current project.

Summary

Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel alive — an animated icon, a satisfying toggle, a subtle reveal. Borrowed from the natural world, they add delight without distraction. Use when designing interactive

Files · 1

View on GitHub

SKILL.md

1	# Micro-Interactions
2
3	A micro-interaction is a moment. A checkbox that draws its checkmark. A heart that pulses when liked. A toggle that eases into place with a little overshoot. A confetti burst on completing a goal. These moments are small in duration — 200–600ms — but they communicate that the product was made by people who cared.
4
5	The reference is always the natural world. Nothing in nature snaps instantly. Everything has weight, momentum, and a moment of settling.
6
7	---
8
9	## What Makes a Good Micro-Interaction
10
11	A micro-interaction earns its place when it:
12
13	1. Confirms an action — makes the result of a click, tap, or input unmistakably clear
14	2. Rewards a milestone — celebrates something the user worked toward
15	3. Reveals something — unfolds information in a way that aids understanding
16	4. Adds texture — makes an otherwise flat moment feel physical and real
17
18	It fails when it:
19	- Delays the user (animation blocks the next action)
20	- Repeats too often (becomes noise, not signal)
21	- Exists only for decoration (no information is conveyed)
22
23	---
24
25	## Natural World as Reference
26
27	Physical objects have inertia, springiness, and weight. UI that borrows these properties feels intuitive because it matches expectations built over a lifetime.
28
29	\| Natural behaviour \| UI equivalent \|
30	\|---\|---\|
31	\| A door swinging to rest \| Toggle that overshoots slightly before settling \|
32	\| Water dripping \| Staggered list item reveals \|
33	\| A rubber band snapping back \| Pull-to-refresh bounce \|
34	\| A leaf falling \| Gentle fade + drift downward on dismiss \|
35	\| A bell ringing \| Icon that briefly oscillates (shakes) on trigger \|
36	\| A stamp pressing paper \| Inner element shift (e.g. icon nudge) without shifting button bounds \|
37
38	The motion should feel inevitable — as if the element has physical properties and cannot behave any other way.
39
40	---
41
42	## Patterns
43
44	### Animated Icons
45
46	Icons that animate on trigger communicate state change more vividly than a static swap.
47
48	Checkmark draw-on: A checkmark that draws itself from start to end point on completion.
49	```css
50	@keyframes check-draw {
51	from { stroke-dashoffset: 20; }
52	to { stroke-dashoffset: 0; }
53	}
54	.checkmark path {
55	stroke-dasharray: 20;
56	animation: check-draw 300ms ease-out forwards;
57	}
58	```
59
60	Heart pulse on like: Scale up slightly then settle back.
61	```css
62	@keyframes heart-pulse {
63	0% { transform: scale(1); }
64	40% { transform: scale(1.25); }
65	100% { transform: scale(1); }
66	}
67	```
68
69	Hamburger → close morphing: Lines animate to form an × when a menu opens.
70
71	Bell shake on notification: A brief oscillating rotation.
72
73	Loading spinner: Rotate with easing rather than linear — a spring rotation feels alive; linear feels mechanical.
74
75	### Toggle / Switch
76
77	A toggle should feel like a physical switch, not a state change.
78
79	```css
80	.toggle-thumb {
81	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
82	/* cubic-bezier with overshoot — the thumb slides and bounces slightly */
83	}
84	.toggle:checked .toggle-thumb {
85	transform: translateX(20px);
86	}
87	```
88
89	The cubic-bezier `(0.34, 1.56, 0.64, 1)` produces a spring effect — the thumb overshoots and settles. This is the difference between a switch that feels cheap and one that feels premium.
90
91	### Success / Completion
92
93	Mark moments of genuine completion — a form submitted, an onboarding step finished, a goal reached.
94
95	- Checkmark animation that draws on
96	- Subtle confetti for high-value milestones (first purchase, account created, goal achieved) — use sparingly, never for routine actions
97	- Green fill transition on a progress bar completing
98	- Number count-up when a stat reaches its final value
99
100	### Rev

People who liked this also viewed

6 picks

Type

micro-interactions

277installs5forks

View on GitHub

How to install micro-interactions?

dembrandt/dembrandt-skills/micro-interactions

$npx -y skills add dembrandt/dembrandt-skills --skill micro-interactions

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Micro-Interactions
2
3	A micro-interaction is a moment. A checkbox that draws its checkmark. A heart that pulses when liked. A toggle that eases into place with a little overshoot. A confetti burst on completing a goal. These moments are small in duration — 200–600ms — but they communicate that the product was made by people who cared.
4
5	The reference is always the natural world. Nothing in nature snaps instantly. Everything has weight, momentum, and a moment of settling.
6
7	---
8
9	## What Makes a Good Micro-Interaction
10
11	A micro-interaction earns its place when it:
12
13	1. Confirms an action — makes the result of a click, tap, or input unmistakably clear
14	2. Rewards a milestone — celebrates something the user worked toward
15	3. Reveals something — unfolds information in a way that aids understanding
16	4. Adds texture — makes an otherwise flat moment feel physical and real
17
18	It fails when it:
19	- Delays the user (animation blocks the next action)
20	- Repeats too often (becomes noise, not signal)
21	- Exists only for decoration (no information is conveyed)
22
23	---
24
25	## Natural World as Reference
26
27	Physical objects have inertia, springiness, and weight. UI that borrows these properties feels intuitive because it matches expectations built over a lifetime.
28
29	\| Natural behaviour \| UI equivalent \|
30	\|---\|---\|
31	\| A door swinging to rest \| Toggle that overshoots slightly before settling \|
32	\| Water dripping \| Staggered list item reveals \|
33	\| A rubber band snapping back \| Pull-to-refresh bounce \|
34	\| A leaf falling \| Gentle fade + drift downward on dismiss \|
35	\| A bell ringing \| Icon that briefly oscillates (shakes) on trigger \|
36	\| A stamp pressing paper \| Inner element shift (e.g. icon nudge) without shifting button bounds \|
37
38	The motion should feel inevitable — as if the element has physical properties and cannot behave any other way.
39
40	---
41
42	## Patterns
43
44	### Animated Icons
45
46	Icons that animate on trigger communicate state change more vividly than a static swap.
47
48	Checkmark draw-on: A checkmark that draws itself from start to end point on completion.
49	```css
50	@keyframes check-draw {
51	from { stroke-dashoffset: 20; }
52	to { stroke-dashoffset: 0; }
53	}
54	.checkmark path {
55	stroke-dasharray: 20;
56	animation: check-draw 300ms ease-out forwards;
57	}
58	```
59
60	Heart pulse on like: Scale up slightly then settle back.
61	```css
62	@keyframes heart-pulse {
63	0% { transform: scale(1); }
64	40% { transform: scale(1.25); }
65	100% { transform: scale(1); }
66	}
67	```
68
69	Hamburger → close morphing: Lines animate to form an × when a menu opens.
70
71	Bell shake on notification: A brief oscillating rotation.
72
73	Loading spinner: Rotate with easing rather than linear — a spring rotation feels alive; linear feels mechanical.
74
75	### Toggle / Switch
76
77	A toggle should feel like a physical switch, not a state change.
78
79	```css
80	.toggle-thumb {
81	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
82	/* cubic-bezier with overshoot — the thumb slides and bounces slightly */
83	}
84	.toggle:checked .toggle-thumb {
85	transform: translateX(20px);
86	}
87	```
88
89	The cubic-bezier `(0.34, 1.56, 0.64, 1)` produces a spring effect — the thumb overshoots and settles. This is the difference between a switch that feels cheap and one that feels premium.
90
91	### Success / Completion
92
93	Mark moments of genuine completion — a form submitted, an onboarding step finished, a goal reached.
94
95	- Checkmark animation that draws on
96	- Subtle confetti for high-value milestones (first purchase, account created, goal achieved) — use sparingly, never for routine actions
97	- Green fill transition on a progress bar completing
98	- Number count-up when a stat reaches its final value
99
100	### Rev

People who liked this also viewed

6 picks

Type