web-animation-design

Name: web-animation-design
Author: vercel-labs

326installs750forks

How to install web-animation-design?

vercel-labs/open-agents/web-animation-design

$npx -y skills add vercel-labs/open-agents --skill web-animation-design

Installs into the current project.

Summary

Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate speci

Files · 1

View on GitHub

SKILL.md

1	# Web Animation Design
2
3	A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.
4
5	## Initial Response
6
7	When this skill is first invoked without a specific question, respond only with:
8
9	> I'm ready to help you with animations based on Emil Kowalski's animations.dev course.
10
11	Do not provide any other information until the user asks a question.
12
13	## Review Format (Required)
14
15	When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:
16
17	\| Before \| After \|
18	\| --------------------------------- \| ----------------------------------------------- \|
19	\| `transform: scale(0)` \| `transform: scale(0.95)` \|
20	\| `animation: fadeIn 400ms ease-in` \| `animation: fadeIn 200ms ease-out` \|
21	\| No reduced motion support \| `@media (prefers-reduced-motion: reduce) {...}` \|
22
23	Wrong format (never do this):
24
25	```
26	Before: transform: scale(0)
27	After: transform: scale(0.95)
28	────────────────────────────
29	Before: 400ms duration
30	After: 200ms
31	```
32
33	Correct format: A single markdown table with \| Before \| After \| columns, one row per issue.
34
35	## Quick Start
36
37	Every animation decision starts with these questions:
38
39	1. Is this element entering or exiting? → Use `ease-out`
40	2. Is an on-screen element moving? → Use `ease-in-out`
41	3. Is this a hover/color transition? → Use `ease`
42	4. Will users see this 100+ times daily? → Don't animate it
43
44	## The Easing Blueprint
45
46	### ease-out (Most Common)
47
48	Use for user-initiated interactions: dropdowns, modals, tooltips, any element entering or exiting the screen.
49
50	```css
51	/* Sorted weak to strong */
52	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
53	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
54	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
55	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
56	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
57	--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
58	```
59
60	Why it works: Acceleration at the start creates an instant, responsive feeling. The element "jumps" toward its destination then settles in.
61
62	### ease-in-out (For Movement)
63
64	Use when elements already on screen need to move or morph. Mimics natural motion like a car accelerating then braking.
65
66	```css
67	/* Sorted weak to strong */
68	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
69	--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
70	--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
71	--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
72	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
73	--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
74	```
75
76	### ease (For Hover Effects)
77
78	Use for hover states and color transitions. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations.
79
80	```css
81	transition: background-color 150ms ease;
82	```
83
84	### linear (Avoid in UI)
85
86	Only use for:
87
88	- Constant-speed animations (marquees, tickers)
89	- Time visualization (hold-to-delete progress indicators)
90
91	Linear feels robotic and unnatural for interactive elements.
92
93	### ease-in (Almost Never)
94
95	Avoid for UI animations. Makes interfaces feel sluggish because the slow start delays visual feedback.
96
97	### Paired Elements Rule
98
99	Elements that animate together must use the same easing and duration. Modal + overlay, tooltip + arrow, drawer + backdrop—if they move as a unit, they should feel like a unit.
100
101	```css
102	/* Both use the same timing */
103	.modal {
104	transition: transform 200ms ease-out;
105	}
106	.overlay {
107	transition: opacity 200ms ease-out;
108	}
109	```
110
111	## Timing and Duration
112
113	## Duration Guidelines
114
115	\| Element Type \| Duration \|
116	\| --------------------------------- \| --------- \|
117	\| Micro-interactions \| 100-150ms \|
118	\| Standard UI (tooltips, dropdowns) \| 150-250ms \|
119	\| Modals, drawe

People who liked this also viewed

6 picks

Type

web-animation-design

326installs750forks

View on GitHub

How to install web-animation-design?

vercel-labs/open-agents/web-animation-design

$npx -y skills add vercel-labs/open-agents --skill web-animation-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Web Animation Design
2
3	A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.
4
5	## Initial Response
6
7	When this skill is first invoked without a specific question, respond only with:
8
9	> I'm ready to help you with animations based on Emil Kowalski's animations.dev course.
10
11	Do not provide any other information until the user asks a question.
12
13	## Review Format (Required)
14
15	When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:
16
17	\| Before \| After \|
18	\| --------------------------------- \| ----------------------------------------------- \|
19	\| `transform: scale(0)` \| `transform: scale(0.95)` \|
20	\| `animation: fadeIn 400ms ease-in` \| `animation: fadeIn 200ms ease-out` \|
21	\| No reduced motion support \| `@media (prefers-reduced-motion: reduce) {...}` \|
22
23	Wrong format (never do this):
24
25	```
26	Before: transform: scale(0)
27	After: transform: scale(0.95)
28	────────────────────────────
29	Before: 400ms duration
30	After: 200ms
31	```
32
33	Correct format: A single markdown table with \| Before \| After \| columns, one row per issue.
34
35	## Quick Start
36
37	Every animation decision starts with these questions:
38
39	1. Is this element entering or exiting? → Use `ease-out`
40	2. Is an on-screen element moving? → Use `ease-in-out`
41	3. Is this a hover/color transition? → Use `ease`
42	4. Will users see this 100+ times daily? → Don't animate it
43
44	## The Easing Blueprint
45
46	### ease-out (Most Common)
47
48	Use for user-initiated interactions: dropdowns, modals, tooltips, any element entering or exiting the screen.
49
50	```css
51	/* Sorted weak to strong */
52	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
53	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
54	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
55	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
56	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
57	--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
58	```
59
60	Why it works: Acceleration at the start creates an instant, responsive feeling. The element "jumps" toward its destination then settles in.
61
62	### ease-in-out (For Movement)
63
64	Use when elements already on screen need to move or morph. Mimics natural motion like a car accelerating then braking.
65
66	```css
67	/* Sorted weak to strong */
68	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
69	--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
70	--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
71	--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
72	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
73	--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
74	```
75
76	### ease (For Hover Effects)
77
78	Use for hover states and color transitions. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations.
79
80	```css
81	transition: background-color 150ms ease;
82	```
83
84	### linear (Avoid in UI)
85
86	Only use for:
87
88	- Constant-speed animations (marquees, tickers)
89	- Time visualization (hold-to-delete progress indicators)
90
91	Linear feels robotic and unnatural for interactive elements.
92
93	### ease-in (Almost Never)
94
95	Avoid for UI animations. Makes interfaces feel sluggish because the slow start delays visual feedback.
96
97	### Paired Elements Rule
98
99	Elements that animate together must use the same easing and duration. Modal + overlay, tooltip + arrow, drawer + backdrop—if they move as a unit, they should feel like a unit.
100
101	```css
102	/* Both use the same timing */
103	.modal {
104	transition: transform 200ms ease-out;
105	}
106	.overlay {
107	transition: opacity 200ms ease-out;
108	}
109	```
110
111	## Timing and Duration
112
113	## Duration Guidelines
114
115	\| Element Type \| Duration \|
116	\| --------------------------------- \| --------- \|
117	\| Micro-interactions \| 100-150ms \|
118	\| Standard UI (tooltips, dropdowns) \| 150-250ms \|
119	\| Modals, drawe

People who liked this also viewed

6 picks

Type