Hover Gallery

A flex strip of plates that expand on hover or click, with spring tilt for neighbors. Built with motion. Bundled photos install under components/3d/hover-gallery/images.

Default

Hover or focus a strip to expand it; neighbors tilt in 3D. Demo images ship with the install.

Loading…

Installation

CLI

npx @sonojs/ui@latest add hover-gallery

Also needsnpm i lucide-react motion

Usage

page.tsx

"use client"

import { HoverGallery } from "@/components/3d/hover-gallery"

export default function Page() {
  return (
    <HoverGallery
      itemHeight={420}
      onImageClick={(index, item) => {
        console.log(index, item.title)
      }}
    />
  )
}

Props

Prop	Type	Default	Description
items	HoverGalleryItem[]	bundled demo	Full items with url, title, category, description.
images	string[]	-	URL-only list; titles/meta fall back to the demo set.
itemHeight	number · string	420	Plate height (px number or CSS length).
gap	number	10	Gap between plates in pixels.
perspective	number	1000	CSS perspective for the tilt.
hoverScale	number	1.05	Image scale when a plate is active.
transitionDuration	number	0.5	Active image scale duration in seconds.
enableKeyboardNavigation	boolean	true	Arrow keys, Enter/Space, Escape.
autoPlay	boolean	false	Cycle the active plate automatically.
autoPlayDelay	number	4000	Autoplay interval in ms.
onImageClick	(index, item) => void	-	Fires when a plate is clicked or activated.
onImageHover	(index, item) => void	-	Fires when a plate is hovered.
className	string	-	Classes on the outer wrapper.
style	CSSProperties	-	Inline styles on the outer wrapper.