Fluid Hover
Use a single moving surface to preview the item under the pointer.
Installation
One prompt for your coding agent to set up Reflow and use this system in Remix.
Blink or glide
Watch both cursors. The highlight on the left blinks out in every gap. The highlight on the right stays visible and glides from one row to the next.
Plain hover blinks at every gap
Fluid hover glides across the gaps
Show the math
With nearest enabled, the closest row stays highlighted even in the gaps.
3 axes
Use the same interaction for horizontal tabs, vertical lists, and grids.
axis="x"axis="y"axis="both"Inbox
Selected folder
Drafts
Choose this folder
Sent
Choose this folder
Trash
Choose this folder
When to split a list
Keep related choices together. Separate workspace navigation from account actions.
What it costs
Two hundred rows share a single hover element. Move through the list to see the event count.
Use when
- Every row or card can be clicked.
- Items are close together and remain in place.
- Menus, tabs, and grids present related choices.
Skip when
- An accidental click has serious consequences.
- Only some items can be clicked.
- Large gaps separate the items, or rows shift during scrolling.
Reduced motion
With reduced motion enabled, the highlight remains available without traveling between rows. The scripted comparison stops, and the lists still respond to your pointer.
Reference
Attach the fluidHover mix to a positioned list or grid. Keep focus, roles, and keyboard handling on its controls.
Options
| Option | Type | Purpose |
|---|---|---|
axis | x | y | both | The dimension used to measure proximity. Defaults to y. |
nearest | boolean | Keep the highlight active in gaps. Defaults to false. |
highlightedSelector | string | Read the highlighted row from a primitive or scripted demonstration. |
selectedSelector | string | Track a separate selection surface. |
Returns
The mix array can be assigned to the host element’s mix prop or combined with its other mixes.
Highlight layers
| Attribute | Element | Purpose |
|---|---|---|
data-rf-hover-item | Interactive row | Marks a target inside the host. |
data-rf-hover-layer | Direct child | Draws the shared hover surface. |
data-rf-selection-layer | Direct child | Optionally draws the separate selection surface. |
Use rf-highlight for layer geometry and rf-hover-highlight for the standard hover color.