Userinterface.wiki
A living manual for better interfaces by Raphael Salaja. Covers motion, typography, pseudo-elements, animation principles, and sound design. Source: userinterface.wiki.
Design Position
| Field | Value |
|---|---|
| Design family | Reference and inspiration ledgers |
| Use when | Use when mining Userinterface.wiki for references to translate into design constraints. |
| System map | Design System Map |
| Proof path | Translate references into named patterns, tokens, or constraints; do not copy the source wholesale. |
Articles
| Article | Key Takeaway |
|---|---|
| Laws of UX | Psychological principles behind every interface that feels right |
| Animating Container Bounds | Custom useMeasure hook + Motion for smooth container width/height animation |
| Morphing Icons | Real shape transformation between icon states, not crossfades. Inspired by Benji's Claude experiments |
| Generating Sounds with AI | Using Cursor + Web Audio API to build a library of UI sounds from scratch |
| Mastering AnimatePresence | Advanced Motion features: reading presence state, manual exit control, directional animations, nested exits |
| Sounds on The Web | Sound is the forgotten sense in web design. Adds feedback, personality, and presence that visuals alone cannot achieve |
| To Spring or Not To Spring | Choosing between easing curves and springs in interface motion design |
| Pseudo Elements | Modern CSS pseudo-elements go far beyond ::before and ::after. View transitions, scroll markers, and interactions that once required JS |
| 12 Principles of Animation | Foundational Disney principles (squash/stretch, timing, exaggeration) applied to web interfaces |
Key Themes
Sound design for UI. Generating sounds programmatically with Web Audio API rather than sourcing pre-made sound files. Cursor as a tool for exploring audio parameter spaces. The thesis now ships as a library: @web-kits/audio - declarative audio where a sound is a plain object and a patch is a JSON palette. Source: audio.raphaelsalaja.com, 2026-04-22
Motion as meaning. Springs vs easing is not a stylistic choice - springs model physical objects with mass and tension, easing curves model pure timing. Use springs when the animation represents something physical (dragging, throwing). Use easing when the animation represents a state change (fade in, slide up).
AnimatePresence mastery. The custom prop controls directional animations. onExitComplete fires after all children have exited. mode="popLayout" removes exiting elements from flow immediately. Nested exits require each level to have its own AnimatePresence.
Pseudo-elements as interaction primitives. ::view-transition-* for page transitions, ::scroll-marker for scroll-driven navigation, ::highlight() for custom text selection. These reduce JS overhead for common interaction patterns.
Timeline
- 2026-07-01 | Design category refresh added this page to the Reference and inspiration ledgers family, linked it to Design System Map, and kept it standalone because Userinterface.wiki owns a distinct design decision surface in this family. Source: User request, 2026-07-01