# Devouring Details

> Interactive reference manual and downloadable React components for micro-interactions and interface craft

Devouring Details is an interactive reference manual on interaction design and UI craft created by Rauno Freiberg, a Staff Design Engineer at Vercel. Structured across principles, prototypes, and resources, it provides 23 detailed chapters exploring animations, gestures, and UI physics alongside 23 downloadable React components.

Website: https://devouringdetails.com/

## What it is for

- Learn the mechanics of subtle interaction design, physics simulation, and motion choreography
- Study real production prototypes and inspect their implementation details
- Download and adapt ready-to-use React interaction components for web applications
- Reference practical design principles when refining UI micro-interactions

## Features

- 23 in-depth chapters covering interaction principles, prototypes, and resources
- 23 downloadable React components with full source code
- Interactive custom platform featuring live prototypes rather than static lessons
- Deep dives into concepts like motion choreography, simulating physics, and gesture containment
- Curated collection of code snippets, design workflows, and private bookmarks
- Access to a private community for questions and feedback

## Pricing

Paid. $249 one-time purchase (select prototypes/resources free)

## Details

- Type: Article or course
- Category: [Design](https://xiry.app/topics/design.md)
- Open source: no
- Platforms: Web
- For: Design engineers, product designers, and frontend developers focused on interaction design and UI craft.
- Tags: interaction design, ui, react, animation, frontend, design engineering

## Why it was saved

- [@shadcn, 1 July 2025](https://x.com/shadcn/status/1940044795780768099): Covers everything the author knows about interactions and design; includes 20 chapters and 20 downloadable React components.

## Related

- [Heroicons](https://xiry.app/resources/heroicons): Free, open-source SVG icon library created by the Tailwind CSS team (Website, Free)
- [Shader Gradient](https://xiry.app/resources/shader-gradient): Design tool for generating animated 3D moving gradients and web components. (Web app, Free)
- [15 UI Sites You'll Need](https://xiry.app/resources/15-ui-sites-you-ll-need): Curated collection of 15 UI and design resources for polished websites. (List, Free)
- [Design Spells](https://xiry.app/resources/design-spells): Curated collection of micro-interactions and delightful design details (Website, Free)
- [Designeer](https://xiry.app/resources/designeer): Curated directory of design engineering tools, components, and inspiration (Website, Free)
- [Hover-Play Video Cards Starting on Thumbnail Frame](https://xiry.app/resources/hover-play-video-cards-starting-on-thumbnail-frame): Interaction pattern for seamless video card previews on hover (Tip, Free)

Updated 10 October 2026. Page: https://xiry.app/resources/devouring-details

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.