interaction study

Hover Row Study

The row should respond quickly, but the work should remain the hero.

active previewsentinelpreview handoff leads the hover so the row feels connected

the starting point

A project row needs to feel alive without becoming the whole interaction. A heavy underline or big shift makes the list feel louder than the work.

setting up the handoff

The row and the preview should move as one system. The copy shifts a few pixels, while the preview changes quickly enough that the user feels the connection.

The metadata stays quiet until hover. That keeps scanning calm and leaves the title as the primary thing to read.

polishing the response

The movement is intentionally tiny. The goal is not to announce hover; it is to make moving between projects feel continuous.

## Hover Handoff Contract

Pointer enters a project row
├── Preview changes first       -> 140ms
├── Title shifts slightly       -> 6px / 220ms
├── Metadata becomes readable   -> 220ms color shift
└── Pointer leaves the group
    ├── Keep last preview briefly
    └── Fade only when the user fully exits

The preview should feel connected to the row without making the row louder than the work.

rules I keep

copy move 6px enough to feel intentional

preview swap 140ms fast handoff between projects

meta color 220ms secondary copy stays secondary

final code

.project-row-copy {
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-project-row]:hover .project-row-copy {
  transform: translateX(6px);
}