Playground · Apr 2026
Home-page hover frameworks
Three unified hover frameworks vs. the current shipping behavior.
Which hover framework feels right for the home page?
results →No votes yet — be the first.
Current — what the site ships now
- Index list: the whole row tints on hover, the label shifts to accent, and the arrow nudges right (200ms). This is the live home-page navigation.
- Blog list: only the title reacts, the row ignores the pointer.
Other options I considered
Richer, unified hover treatments I explored as alternatives to the current index list — each applied to a bento explore grid and the blog list. Vote on whichever you’d ship.
Quiet lift
- One primitive: every card lifts 4px, 250ms, ease-out. No scale, no wash.
- Rows: full-width bg tint + title color shift. Same pattern as the writing page, now shared.
- Tradeoff: safest and most coherent, but least 'moment'. Relies on the grid itself being the statement.
Cursor arrow
- Cards don't move at all — a tiny ↗ fades in at the top-right and nudges outward.
- Rows echo the same arrow to the right of the date.
- Tradeoff: reads as magazine navigation, very on-brand editorial. Less visceral feedback than a lift.
Content breathes
- Cards stay put. A accent rule slides in under the title, subtitle nudges + brightens.
- Rows: title nudges right with an underline that wipes in beneath it.
- Tradeoff: most expressive and typographic, but relies on consistent card anatomy (title + sub) to work.
On reuse
Whichever one we pick, the implementation is a small set of shared class strings (or a single <HoverCard> / <HoverRow> wrapper) with three tokens: duration, ease, and the primitive itself. That same wrapper gets used on the home bento, the writing list, the recent-posts block, the work index, and anywhere else a similar card/row pattern appears.
The photography gallery card stays on its own thing — that effect is tied to the photography context and should read as intentional, not the default.