GalleryInspiration, Motion
Design Spells
A collection of the tiny, delightful details that make products feel loved.
What it is
Design Spells catalogues small, intentional touches in real products: a clever empty state, a playful hover, a thoughtful loading animation, a witty microcopy. Each is a short clip or screenshot with credit to the product.
Why it’s here
Delight lives in the details, and this is a library of details. Great for the last ten percent of a project when the structure is done and it still feels flat.
Best for
- microinteractions
- polish
- empty states
- final ten percent
Can my agent use this?
Agent limited agent friendlinessAs a reference only. Describe the specific detail to your agent ("animate the checkmark when the task completes, like this clip") and name a library such as Motion to implement it with.
Limited: Mainly a visual reference. Great for humans and for describing a direction, but there's little an agent can read or install.
Access methods
- Public website
Related resources
Motion-Primitives 
Motion-Primitives
Tasteful animated components for React, built with Motion.
Component libraryFreeOpen sourceexcellent agent friendlinessStaff pickAnimations on the Web 
Animations on the Web
Emil Kowalski's course on making web animation feel right.
Guidelimited agent friendlinessStaff pickMobbin 
Mobbin
The biggest library of real app screens and user flows.
Gallerylimited agent friendlinessAwwwards 
Awwwards
Where the most ambitious, animation-heavy websites get recognised.
GalleryFreelimited agent friendliness