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.

All footage is recorded of 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.

Selection of work from my portfolio

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.

Screenshot of the platform with a 3 column layout: sidebar, content, and prototype area
Two column layouts offer better navigation through long-form content

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.

DD is used by designers on world-class teams

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

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

FREE

Logos Carousel

Motion React

Resources contains useful code snippets, insights into my design process, private bookmarks, a downloadable component library, and more.

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.

FAQ