Interactions
Hover Reveal
A two-column client index. Hovering a name fades-and-scales the preview into focus while the active row magnetically drifts under the cursor.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<HoverReveal
label="Clients"
items={[
{ name: "Linear", src: "/clients/linear.webp" },
{ name: "Vercel", src: "/clients/vercel.webp" },
{ name: "Stripe", src: "/clients/stripe.webp" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | HoverRevealItem[] | — | List of `{ name, src, alt? }`. 2–12 entries works best for the typography rhythm. |
| label | string | null | "Clients" | Small uppercase label above the list. Pass `null` to hide. |
| defaultActiveIndex | number | 0 | Initial active row for uncontrolled use. |
| activeIndex | number | — | Controlled active index. When provided, the component is fully controlled. |
| onActiveChange | (index: number) => void | — | Fires whenever the active index changes (hover, focus, click, keyboard). |
| imageAspect | string | "4/5" | CSS aspect-ratio for the mobile image frame. |
| imageMinHeight | number | string | "34rem" | Min height of the desktop frame. Numbers are treated as px. |
| formatIndex | (index: number) => string | — | Custom formatter for the index column. Defaults to zero-padded `01`, `02`… |
| hideIndex | boolean | false | Hide the index column entirely. |
| imageZoom | number | 1.4 | Starting scale of an entering image — zooms from this down to 1. |
| imageScaleDuration | number | 1.4 | Duration of the image zoom-out, in seconds. |
| disableParallax | boolean | false | Disable cursor-driven parallax on the active image. |
| disableFloat | boolean | false | Disable the idle vertical float. |
| disableMagnetic | boolean | false | Disable the magnetic pull on row text. |
| disableSkew | boolean | false | Disable the skew on the active row. |
| className | string | — | Classes applied to the root. |
| imageClassName | string | — | Classes applied to the image element inside the frame. |
Use cases
Client / logo wall
Replace a static logo grid with an editorial index that rewards exploration.
Team page
List of team members with portrait reveals on hover.
Case studies index
Studio / agency site listing recent projects, each with a representative cover.
Press / press kit
Editorial list of features and mentions, each with a hero shot of the publication.