lab
Interactions I kept polishing until they felt the way I wanted. Go ahead and play with them.
toast stack
notices stack with depth (scale and offset). hover or focus with the keyboard to open the stack and pause the timers; drag sideways to dismiss (distance > 96 px or velocity > 0.11 px/ms).
command palette
this one is already live site-wide: press ⌘K (ctrl+k on windows and linux) on any page to search pages, posts and actions. arrows navigate, enter opens, esc closes and focus returns to where it was.
draggable sheet
drag down to close. a quick flick closes it even over a short distance (velocity > 0.11 px/ms); pulling up resists instead of hitting a wall.
FLIP reordering
the layout changes at once; a transform animates the position difference (First, Last, Invert, Play) in 250ms. no animating top or height.
- 1review the PR
- 2write the tests
- 3tune the motion
- 4ship it
before and after
the same card raw (default styles) and polished (tokens, spacing, shadow), the top one cut by clip-path. drag the handle or use the arrow keys (shift moves further).
hold to confirm
destructive actions need intent: the fill takes 1.6 s while you hold and snaps back in 200 ms when you let go. space or enter work too.
copy with icon swap
the icon swaps through a slight blur, blending both states into one motion instead of two icons overlapping.
https://github.com/di0rioclip-path tabs
an inverted copy of the list sits on top, clipped to the active tab. the color changes without any tab flickering mid-way.