Client Hover Preview

A wall of client names under blend-mode chrome. Hovering a name wipes a centered image preview open with a clip-path and cross-fades as you move between clients.

Component

Trusted Us

Native Instruments,

Oura,

Hender Scheme,

B&O Play,

Nothing,

Gentle Monster,

Officine Panerai,

Polestar,

Fragment Design,

Superfuture,

Bang & Olufsen,

Sonos.

Install

npx shadcn@latest add https://ui.aryank.space/r/client-hover-preview.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

Prop	Type	Default	Description
clients	string[]	12 product studios	Hoverable names, punctuation included.
images	string[]	12 BLANK-hosted JPGs	Centered preview images revealed per client.
header / footerLeft / footerRight	string	Trusted Us / Experiment 503 / Developed by BLANK	Chrome copy around the client wall.

Customize

clientstextarea

The client names in the wall.

imagesasset-url

One preview image per client, matched by index.

Dependencies

gsap