motion-and-storytelling

Name: motion-and-storytelling
Author: dembrandt

287installs5forks

How to install motion-and-storytelling?

dembrandt/dembrandt-skills/motion-and-storytelling

$npx -y skills add dembrandt/dembrandt-skills --skill motion-and-storytelling

Installs into the current project.

Summary

Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and emotionally resonant. Use when designing transitions, micro-interactions, onboarding flows, scroll anim

Files · 1

View on GitHub

SKILL.md

1	# Motion and Storytelling in UI
2
3	Animation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.
4
5	The key word is subtlety. In UI, motion should be felt, not watched.
6
7	---
8
9	## Disney's 12 Principles Applied to UI
10
11	### 1. Squash and Stretch
12	Objects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.
13
14	```css
15	button:active { transform: scale(0.96); }
16	button { transition: transform 80ms ease-out; }
17	```
18
19	Use sparingly — reserved for primary CTAs and satisfying confirmations.
20
21	### 2. Anticipation
22	A small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming.
23
24	### 3. Staging
25	Present one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging.
26
27	### 4. Straight Ahead vs Pose to Pose
28	Pose to pose — defining start and end states and letting the system interpolate — is the CSS/JS approach. Define clear initial and final states; let `transition` or a spring physics library handle the in-between.
29
30	### 5. Follow-Through and Overlapping Action
31	Elements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.
32
33	```css
34	.item:nth-child(1) { animation-delay: 0ms; }
35	.item:nth-child(2) { animation-delay: 50ms; }
36	.item:nth-child(3) { animation-delay: 100ms; }
37	```
38
39	### 6. Ease In and Ease Out
40	Nothing in nature starts or stops instantly. Use easing curves, not linear transitions.
41
42	\| Easing \| Use for \|
43	\|---\|---\|
44	\| `ease-out` (fast start, slow end) \| Elements entering the screen — feels natural arrival \|
45	\| `ease-in` (slow start, fast end) \| Elements leaving the screen — feels intentional exit \|
46	\| `ease-in-out` \| Elements moving between positions on screen \|
47	\| Spring physics \| Interactive elements that respond to touch/drag \|
48
49	Never use `linear` for UI motion — it reads as mechanical and unfinished.
50
51	### 7. Arcs
52	Natural movement follows arcs, not straight lines. Tooltips and popovers that scale from their origin point (rather than fading uniformly) follow this principle. `transform-origin` matters.
53
54	### 8. Secondary Action
55	A supporting motion that reinforces the main action. In UI: an icon inside a button that shifts slightly when the button is pressed. A checkmark that draws itself after a form submission. These details reward attention without demanding it.
56
57	### 9. Timing
58	Duration is meaning. Fast = responsive, energetic. Slow = weighty, important.
59
60	\| Duration \| Use for \|
61	\|---\|---\|
62	\| 80–120ms \| Micro-interactions (button press, hover) \|
63	\| 150–250ms \| Component transitions (dropdown open, tooltip) \|
64	\| 250–400ms \| Page-level transitions, modal entrance \|
65	\| 400–600ms \| Hero animations, onboarding sequences \|
66	\| > 600ms \| Almost always too long — the user is waiting \|
67
68	### 10. Exaggeration
69	A small, deliberate overstatement makes an action feel satisfying. In UI: a success checkmark that overshoots slightly before settling, or a notification badge that pops just slightly larger than its final size. The exaggeration is 10–15%, not theatrical.
70
71	###

People who liked this also viewed

6 picks

Type

motion-and-storytelling

287installs5forks

View on GitHub

How to install motion-and-storytelling?

dembrandt/dembrandt-skills/motion-and-storytelling

$npx -y skills add dembrandt/dembrandt-skills --skill motion-and-storytelling

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Motion and Storytelling in UI
2
3	Animation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.
4
5	The key word is subtlety. In UI, motion should be felt, not watched.
6
7	---
8
9	## Disney's 12 Principles Applied to UI
10
11	### 1. Squash and Stretch
12	Objects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.
13
14	```css
15	button:active { transform: scale(0.96); }
16	button { transition: transform 80ms ease-out; }
17	```
18
19	Use sparingly — reserved for primary CTAs and satisfying confirmations.
20
21	### 2. Anticipation
22	A small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming.
23
24	### 3. Staging
25	Present one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging.
26
27	### 4. Straight Ahead vs Pose to Pose
28	Pose to pose — defining start and end states and letting the system interpolate — is the CSS/JS approach. Define clear initial and final states; let `transition` or a spring physics library handle the in-between.
29
30	### 5. Follow-Through and Overlapping Action
31	Elements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.
32
33	```css
34	.item:nth-child(1) { animation-delay: 0ms; }
35	.item:nth-child(2) { animation-delay: 50ms; }
36	.item:nth-child(3) { animation-delay: 100ms; }
37	```
38
39	### 6. Ease In and Ease Out
40	Nothing in nature starts or stops instantly. Use easing curves, not linear transitions.
41
42	\| Easing \| Use for \|
43	\|---\|---\|
44	\| `ease-out` (fast start, slow end) \| Elements entering the screen — feels natural arrival \|
45	\| `ease-in` (slow start, fast end) \| Elements leaving the screen — feels intentional exit \|
46	\| `ease-in-out` \| Elements moving between positions on screen \|
47	\| Spring physics \| Interactive elements that respond to touch/drag \|
48
49	Never use `linear` for UI motion — it reads as mechanical and unfinished.
50
51	### 7. Arcs
52	Natural movement follows arcs, not straight lines. Tooltips and popovers that scale from their origin point (rather than fading uniformly) follow this principle. `transform-origin` matters.
53
54	### 8. Secondary Action
55	A supporting motion that reinforces the main action. In UI: an icon inside a button that shifts slightly when the button is pressed. A checkmark that draws itself after a form submission. These details reward attention without demanding it.
56
57	### 9. Timing
58	Duration is meaning. Fast = responsive, energetic. Slow = weighty, important.
59
60	\| Duration \| Use for \|
61	\|---\|---\|
62	\| 80–120ms \| Micro-interactions (button press, hover) \|
63	\| 150–250ms \| Component transitions (dropdown open, tooltip) \|
64	\| 250–400ms \| Page-level transitions, modal entrance \|
65	\| 400–600ms \| Hero animations, onboarding sequences \|
66	\| > 600ms \| Almost always too long — the user is waiting \|
67
68	### 10. Exaggeration
69	A small, deliberate overstatement makes an action feel satisfying. In UI: a success checkmark that overshoots slightly before settling, or a notification badge that pops just slightly larger than its final size. The exaggeration is 10–15%, not theatrical.
70
71	###

People who liked this also viewed

6 picks

Type