cursor study

Cursor Study

A custom cursor should add authorship without stealing attention from the interface.

the starting point

Custom cursors get annoying fast. The shape has to feel authored, but it should still behave like a normal pointer.

setting up the shape

The cursor keeps the familiar arrow silhouette, then softens it with a smaller size, rounded geometry, and a slight rotation.

The white outline sits outside the black fill, so it separates from dark or busy surfaces without becoming a halo.

polishing the restraint

The custom cursor should back off when precision matters. Text inputs, native controls, and dense UI should keep the system cursor.

## Cursor Restraint Contract

Is the pointer adding information?
├── No  -> use the system cursor
└── Yes
    ├── Is the surface dense or text-heavy?
    │   ├── Yes -> back off
    │   └── No
    │
    ├── Does contrast need help?
    │   ├── Yes -> outside white outline
    │   └── No  -> black fill only
    │
    └── Is the cursor becoming decorative?
        ├── Yes -> reduce size / shadow
        └── No  -> keep it

A custom cursor should earn its place; the native cursor wins whenever precision matters.

rules I keep

size 13x15px smaller than a decorative badge

rotation -8deg lying down slightly, still readable

outline outside white drawn behind the fill so it stays outside the black shape

shadow two soft drops separation without glow

final code

.animated-cursor__arrow {
  width: 13px;
  height: 15px;
  transform: rotate(-8deg);
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.12));
}

.animated-cursor__outline {
  stroke: rgb(255 255 255);
  stroke-width: 1.6px;
}