Skip to content
Pinky UI

navigation

Cursor Preview Nav

A project index whose links reveal contextual preview media on hover or focus.

  • navigation
  • portfolio
  • preview
  • editorial

Quick usage

usage
import { CursorPreviewNav } from "@pinky-ui/experiences";

<CursorPreviewNav items={projects} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsCursorPreviewNavItem[]—Labeled links with preview media.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Every destination remains a stable labeled anchor.
  • Keyboard focus triggers the same contextual preview as hover.

Performance

  • Reuses the capped preview and shared pointer architecture.
  • No React state is written per pointer frame.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Portfolio and case-study indexes

When not to use

  • Utility navigation or image-heavy long lists

Skill

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.

Open this skill on its own page