Glide
One wash for a group of choices, travelling to the item nearest the pointer — or the keyboard's highlight — instead of each item lighting and going dark on its own. A pass along a list is one movement, not a blink at every gap. The sidebar, Select and Calendar wear it.
A list
import { Glide } from "@/components/shared/glide";
<Glide items="button" shape="squircle-lg">
{items}
</Glide>A strip
<Glide items="button" axis="x" shape="squircle-lg">…</Glide>A grid
<Glide items="button" axis="xy" shape="squircle-lg">…</Glide>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string | — | A selector for the choices inside. Disabled ones never light. |
| axis | "y" | "x" | "xy" | "y" | A list, a strip, or a grid. |
| follow | "pointer" | "highlighted" | "pointer" | The mouse, or the component's own data-highlighted — Base UI moves that for keys and mouse alike (Select). |
| current | string | — | The chosen item(s). Hover never lights over one: its own wash is enough. |
| showCurrent | boolean | false | Draw the current item's wash too, sliding when it changes (the sidebar's page). |
| shape | string | — | The items' shape, for the wash: squircle-lg, rounded-(--cell-radius)… |
Guidelines
- Use it where every item can be chosen, they sit close and they stay put: menus, selects, the sidebar, tabs, a calendar's days. Not on tables, sparse cards, lists that move, or anything a wrong click would hurt.
- Give each item the ghost wash, then hand it over with
group-data-glide/glide:hover:bg-transparent: until the glide has measured — on the server, before hydration — the items wash themselves. - The hover glides on
duration-quick, the current wash slides onduration-fast, both onease-smooth-out. A wash appears in place the first time; with reduced motion it fades rather than travels. - Split at a divider: a different kind of choice is a new Glide, and the wash never crosses into it.