Canvas Interactions
product
A few days of close, fiddly work on the two interactions you touch most on the canvas — the radial step menu and the add-node button. The kind of polish that’s invisible when it’s right and maddening when it’s not.
Radial step menu
- Drew the inner circle on top of the pie slice so the center reads cleanly
- Gated slice activation on exiting the inner circle, so you don’t accidentally trigger a slice the instant the menu opens
- Experimented with a center-hover-to-close gesture, then reverted it — it fought the muscle memory more than it helped
Add-node button
- Extended the hit area into the connector gap so the button is easier to land on
- Brightened the plus button on hover for clearer feedback
- Gave the hit area clearance from a node’s marching ants so the two don’t fight for the same pixels
- Dropped the expanding “Add step” pill — it was more motion than the moment needed
Performance
Skipped off-screen marching-ants work via content-visibility, so animation cost scales with what’s actually on screen rather than the size of the whole flow.