AnimationsNew
Image Reveal List
A list of large labels. Hovering a row pops its image up under the cursor, and it glides after the mouse.
Customize
color
lineColor
tagColor
labelColor
Based on Image Reveal (MIT license) · Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { img: string; label: string; tag: string }[] | — | List rows: image, large label and a tag on the right. |
| imageWidth | number | 300 | Width of the floating image in pixels. |
| imageHeight | number | 220 | Height of the floating image in pixels. |
| stiffness | number | 150 | Spring stiffness: higher means the image catches the cursor faster. |
| damping | number | 15 | Spring damping: lower means more wobble. |
| color | string | "#ffffff" | Colour of the small square next to each tag. |
| lineColor | string | "rgba(255, 255, 255, 0.1)" | Colour of the lines between rows. |
| tagColor | string | "rgba(255, 255, 255, 0.55)" | Colour of the tags on the right. |
| labelColor | string | "#ffffff" | Colour of the large labels. |
| className | string | — | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge