Have you ever noticed that some animation sequences can be improved with just a touch of delay? Or that some interactions just feel better without any motion at all?
Devouring Details is an interactive reference manual for interaction-curious designers, containing 20 chapters with 20 downloadable React components.
Hello
My name is Rauno. I work as a Staff Design Engineer at Vercel on our platform, design system, marketing pages, and Next.js Dev Tools. Previously, I was at The Browser Company designing and building the Arc browser.
I have written acclaimed design essays like Invisible Details of Interaction Design and shipped open source software like cmdk that is downloaded millions of times per week to power command menu interfaces for the most modern productivity apps on the web.
Platform
Before working on this I thought to myself: “how have I learned myself?”
By trying to build an idea and realising it sucks in practice. With enough iterations and sometimes by accident I’ll get to a place where it feels really good and I'll suddenly be able to reason why it sucked.
Devouring Details is your shortcut to those learning moments.
This is not a course in the sense that it is not linearly progressive. You won’t solve code challenges, answer quizzes, or follow step-by-step tutorials. Instead, you’ll interact with prototypes on a custom platform and be exposed to details that I pay attention to.

Each chapter is digestible with bite-sized efforts through a scrollable experience that doesn't ask for too much at once.
I myself use this as a reference manual that I periodically revisit while designing. I would often return to copy some code or to reinforce my understanding of a concept.
Structure
Devouring Details is split into 3 units—Principles, Prototypes, and Resources.
Principles explores a design concept in depth with different examples from custom interfaces and production apps.
Inferring intent
Interaction metaphors
Ergonomic interactions
Simulating physics
Motion choreography
Responsive interfaces
Contained gestures
Drawing inspiration
Inferring intent
Interaction metaphors
Ergonomic interactions
Simulating physics
Motion choreography
Responsive interfaces
Contained gestures
Drawing inspiration
Prototypes are deep dives into a single component with references to Principles and Resources. Everything you see here includes downloadable source code.
Line Minimap
Scroll Strip
Radial Timeline
Morph Surface
Line Graph
Next.js Dev Tools
FREELogos Carousel
Motion React
Line Minimap
Scroll Strip
Radial Timeline
Morph Surface
Line Graph
Next.js Dev Tools
FREELogos Carousel
Motion React
Resources contains useful code snippets, insights into my design process, private bookmarks, a downloadable component library, and more.
Behind scenes
FREECode snippets
Design workflow
Component library
Public bookmarks
Frequent questions
Design philosophies
Register
Registration is currently closed and will reopen in October.
In the meanwhile, you can join the waitlist for behind the scenes and to be notified when the registration opens again. I'll never send you spam or nonsense.