working on an essay to cover the twelve principles of animation, and how you can take advantage of them on the web

using an exaggerated shake to indicate an error state, a learning from the 12 principles of animation

recreation of dia's split screen tab interaction, to demonstrate follow through and overlapping actions

quick remake of emil's loader from linear, it's a cool example of how perspective can bring depth to interfaces

held actions imo should be more used on the web - removes the need for a "confirm dialog" - does not obscure the user's view - user can easily see what action they are about to make

raphaelsalaja.com/library/12-pri…

for less annoying ux, ensure interactive elements use `user-select: none` to disable highlighting on their inner content. this prevents accidental selections and keeps interactions clean.

ios 26 low battery alert

sometimes the simplest indication is the most effective instead of popping up a toast or dialog, try notifying users contextually where the action happens this keeps the ui clean, prevents distraction, and respects the flow of interaction.

introducing cambio - a simple shared animation component for react cambio.raphaelsalaja.com

interesting pattern here on Clerk's site, it appears they are using the `transform origin` from trigger to animate the dialog popup, haven't seen this used anywhere else, pretty cool stuff.

understanding when not to animate is powerful, a way you can figure this out, is by imagining how an interaction feels after 1000 uses. if it feels sluggish, remove it/tone it down. for example: menus used often don’t need to animate in every time; an exit animation is enough.