# User Interface Wiki

## Docs

- [A Living Manual for Better Interfaces](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/introduction.md): Explore a comprehensive collection of articles, patterns, and best practices for designing and building user interfaces that evolve with the field
- [Contributing to the Wiki](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/contributing.md): Guidelines for contributing articles, demos, and improvements to the User Interface Wiki
- [Laws of UX](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/principles/laws-of-ux.md): Psychological principles behind interfaces that feel right, including Fitts's Law, Hick's Law, Miller's Law, Doherty Threshold, and Postel's Law.
- [Design Philosophy](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/principles/design-philosophy.md): Our approach to building interfaces that feel human, responsive, and intentional. Core principles for creating experiences users love.
- [12 Principles of Animation](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/animation/12-principles-of-animation.md): A guide to the foundational principles of animation, from squash and stretch to timing and exaggeration, and how they can be applied to create more engaging and lifelike animations.
- [To Spring or Not To Spring](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/animation/to-spring-or-not-to-spring.md): Strategies for choosing between easing curves and springs in interface motion design.
- [Mastering Animate Presence](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/animation/mastering-animate-presence.md): Learn how to use the more advanced features of Motion's AnimatePresence component. Reading presence state, manual exit control, directional animations, and nested exits.
- [Animating Container Bounds](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/animation/animating-container-bounds.md): Learn how to animate the width and height of containers using a custom useMeasure hook and Motion, making your UI respond smoothly to content changes.
- [Morphing Icons](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/visual/morphing-icons.md): Icons that transform through actual shape transformation, not crossfades. Every icon uses exactly three SVG lines.
- [Taking Advantage of Pseudo-Elements](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/visual/taking-advantage-of-pseudo-elements.md): Modern CSS pseudo-elements go far beyond ::before and ::after. From view transitions to scroll markers, these invisible helpers unlock interactions that once required JavaScript.
- [Sounds on The Web](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/audio/sounds-on-the-web.md): Sound is the forgotten sense in web design. Used well, it adds feedback, personality, and presence that visuals alone cannot achieve.
- [Generating Sounds with AI](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/audio/generating-sounds-with-ai.md): I'm not a sound engineer, but I know what good sound sounds like. Here's how I used Cursor and the Web Audio API to build a library of UI sounds from scratch.
- [Component Architecture](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/technical/component-architecture.md): Component structure patterns, file organization, and colocated styles in the User Interface Wiki codebase
- [Styling System](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/technical/styling-system.md): CSS Modules approach, theme variables, and styling patterns in the User Interface Wiki
- [Accessibility Standards](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/technical/accessibility.md): Accessibility requirements including semantic HTML, ARIA attributes, focus management, and reduced motion support
- [Web Audio API Implementation](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/technical/web-audio-api.md): Deep dive into procedural sound generation using the Web Audio API for UI feedback
- [Motion Implementation Patterns](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/technical/motion-implementation.md): Advanced animation patterns using Motion (Framer Motion) with React 19 and the React Compiler
- [Performance Optimization](https://mintlify.wiki/raphaelsalaja/userinterface-wiki/technical/performance-optimization.md): Performance standards for Next.js 16, React 19, and React Compiler optimization techniques


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.