A hover-driven gallery where titles reveal floating images anchored to the hovered text, with parallax mouse tracking and optional sound.
Enable the enableSound prop to play a subtle tone on each title hover.
Pass an href on each item to make titles navigate on click.
Each item accepts per-image rotations, nudges and sizes to give every project a unique image layout.
$ npx shadcn@latest add https://akshitr.com/r/hover-reveal-gallery.json
import HoverRevealGallery from "@/components/hover-reveal-gallery";
const projects = [
{
id: "obsidian",
title: "obsidian",
images: [
"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400",
"https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400",
"https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400",
],
rotations: [-10, 6, -3],
nudges: [
{ x: 0, y: 0 },
{ x: 20, y: -10 },
{ x: 0, y: 0 },
],
},
];
export default function HoverRevealGalleryDemo() {
return <HoverRevealGallery items={projects} enableSound />;
}| Prop | Type | Default | Description |
|---|---|---|---|
| items | GalleryItem[] | — | List of projects to display. |
| enableSound? | boolean | false | Plays a subtle sine tone on each title hover. |
| className? | string | — | Class applied to the root <section> element. |
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique identifier for the item. |
| title | string | — | Display text rendered as the hover target. |
| images | string[] | — | Array of exactly 3 image URLs, one per slot. |
| href? | string | — | If provided, the title renders as an <a> tag linking to this URL. |
| rotations? | [number, number, number] | [0, 0, 0] | Per-image rotation in degrees. Animates between projects on hover change. |
| nudges? | [{x,y}, {x,y}, {x,y}] | [{x:0,y:0},{x:0,y:0},{x:0,y:0}] | Per-image x/y offset in px added on top of the computed slot position. |
| sizes? | [number, number, number] | [120, 140, 120] | Per-image size in px. |