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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
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 #2F2E2B4D. 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 #0000001F). The ghost follows the cursor with a spring lag (using transform with requestAnimationFrame).
5. Insertion indicator: A horizontal line (2px height, 100% width) in #B5654A (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.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.