Skip to content
Pinky UI

Cursor Preview Nav

`CursorPreviewNav` reveals contextual media for project or editorial links while keeping the list itself stable. It is strongest for portfolios, case-study indexes and visually led archives.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Rest
Active

Cursor Preview Nav · one controlled state

Purpose

CursorPreviewNav reveals contextual media for project or editorial links while keeping the list itself stable. It is strongest for portfolios, case-study indexes and visually led archives.

Use meaningful images and a manageable list; previews should confirm a destination, not carry essential information. Avoid it for utility navigation, touch-first workflows, or lists where image loading would dominate. Do not combine it with image trails or a custom cursor.

Every item remains a normal labeled link and keyboard focus activates the same preview as hover. Touch and reduced-motion users keep the list without pointer choreography. Reuse optimized media and keep previews modest to limit decode and paint cost.

Source: packages/skills/navigation/cursor-preview-nav.md