Snap to guide

Drag a block across a canvas: the distance to the nearest column centre is measured on every move, and inside 12px the block jumps onto it with a 2px kick, a guide line appears and an ALIGN tag names it. Leave the threshold and it is free again.

What it is

Drag a card around a layout and it finds the column by itself: as it nears the centre line it clicks into place, a guide appears and a label confirms the alignment. Walk it away and it is free again. The behaviour of every good design tool and dashboard builder, distilled: the user places, the system aligns. Use it in editors, kanban boards, widget layouts and anything with a grid people rearrange.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 8 集「8 个高级交互提升 App 和小程序的质感差别」· 05 拖动自动吸到线上 Snap To Guide