Design Engineer

What makes UI feel right.

8 lessons

1. Glow Cards

   Interactive CSS-only glow effect cards that track the pointer position using custom properties.

2. Instant tooltips on consecutive hover

   Something native UIs get right that most web tooltips don't.

3. CSS border-style: dashed

   Why CSS dashed borders fall short and how to build precise, fadeable dotted lines with repeating-linear-gradient.

4. Dice button

   A dice button animated with CSS 3D Transforms.

5. Borders with box-shadow

   Make UI surfaces feel sharper and more dimensional.

6. Expanding Hit Areas in CSS

   Why hover states flicker between elements, and how to fix it, WCAG 2.5.8

7. Direction-Aware Navigation

   How to build the Aave navigation menu in Radix UI.

8. Keyboard navigation shouldn't be animated

   When a command menu is driven by the keyboard, animated hover states feel laggy. Detect input modality with data attributes and skip transitions for keyboard users.