Focus & interaction

Cursor Path

Loading…
Part7s typicallandscape · portrait · square

Overview

Guide a small cursor across a populated launch plan toward View settings. End the brief trail on arrival and let a quiet hover reveal the control’s purpose.

Build

  1. 01

    Hold the cursor away from the control.

  2. 02

    Make the main approach in 0.84 seconds, followed by a 0.21-second correction.

  3. 03

    Anchor the tip at the target; keep the arrow rigid.

  4. 04

    Reveal hover and tooltip after arrival, while the motion emphasis disappears.

Example source React / TSX

examples/focus-cursor-path.tsx · Uses the catalog’s shared composition helpers.

Loading source…