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.
Today
Current
- Work scales (300ms), the other cards lift (200ms), Collecting adds a unique gradient wash (500ms).
- Blog list: only the title reacts, the row ignores the pointer.
Framework A
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.
Framework B
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.
Framework C
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.