Direct manipulation is the highest form of UI. A six-dot grip handle that appears only when your cursor drifts left of the content — a 150ms delay that prevents the handle from flickering during normal reading. The drag ghost follows with opacity 0.6 and a 1-degree tilt, just enough to say 'I've been lifted off the page.' The blue insertion line that slides between blocks is the real hero: it answers the question 'where will this land?' before you release. Ninety percent of drag-and-drop anxiety is about the destination, not the journey.
Build a Notion-style block drag handle micro-interaction. Design philosophy — direct manipulation: 1. Handle: A 6-dot grid (2 columns × 3 rows, 3px dots, 5px gap) in #c3c2bf. Appears 24px to the left of a block when the mouse hovers within 40px of the block's left edge. 2. Appear animation: Opacity 0→1 over 150ms ease-out. The delay prevents the handle from flickering during normal mouse movement across the page. 3. Cursor change: On handle hover, cursor changes to 'grab'. On mousedown, cursor becomes 'grabbing'. 4. Drag ghost: The dragged block becomes semi-transparent (opacity 0.6) with a slight rotation (1-2deg) and elevated shadow (0 8px 24px rgba(0,0,0,0.12)). The ghost follows the cursor with a spring lag (using transform with requestAnimationFrame). 5. Insertion indicator: A horizontal line (2px height, 100% width) in #2383e2 (blue) that appears between blocks where the item will be dropped. The line slides to the nearest valid position with 150ms ease-out. 6. Drop animation: On release, the block animates from its ghost position to its new position using a spring curve (300ms, cubic-bezier(0.34, 1.56, 0.64, 1)). The opacity returns to 1 and rotation returns to 0. 7. Plus button: A "+" icon appears below the handle on hover, allowing quick block insertion. The interaction should feel like rearranging physical cards on a table.