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
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