cutagent-interface-cursor-animation
Interface cursor animation
Make the cursor explain the interaction. Its path, state, and emphasis should reveal what changes in the interface, not wander decoratively over the screen.
Map the interaction
Review the screen recording or interface frames and list the meaningful states: starting view, target control, hover or focus, click or drag, interface response, and settled result. Keep only actions needed to understand the task.
Choose the correct cursor state for the action—pointer, text, grab, resize, crosshair, or another supplied state. Prefer supplied cursor artwork for a standard pointer; construct polygon geometry only when a custom silhouette is needed, and check that its outline is closed and does not cross itself. A Unicode arrow in Text+ can render as a colored emoji or change shape with font fallback. Place the pointer tip on its target and keep its body away from the control label. If the recording already contains a baked cursor, avoid a doubled pointer: use it as-is, crop or rebuild the interface when feasible, or state that clean replacement is blocked.
Design readable motion
Place cursor anchors at real interface targets. Travel directly with a gentle ease, brief deceleration before precise clicks, and no unexplained loops. Long moves may arc around important content; short moves should remain efficient.
Build click feedback from editable geometry: a quick scale compression, small ring, tint, or focus pulse synchronized to the UI response. Keep it local to the click; a broad glow that washes out the label weakens the interaction. Use drag motion with clear pickup, continuous travel, and release. Let scrolling move the interface while the cursor remains plausibly attached to its control.
Use zooms and callouts sparingly. Establish the full interface before pushing in, keep the target inside a safe readable region, and return or cut only after the viewer has understood the result. Maintain consistent cursor scale relative to the interface across reframes.