Hover Expand

March 9, 2026

A vertical list of rows that expand on hover to reveal a full-width photograph, animated with Motion spring physics.

Installation

File Structure

hover-expand.tsx

Usage

import { HoverExpand } from "@/components/unlumen-ui/hover-expand";

const items = [
  {
    label: "Kyoto",
    sublabel: "Japan",
    description: "Ancient temples hidden among bamboo groves",
    image: "/images/kyoto.jpg",
  },
];

<HoverExpand items={items} />;

API Reference

HoverExpand

Prop	Type	Default	Description
`items`	`HoverExpandItem[]`	-	Array of items to display.
`collapsedHeight?`	`number`	`68`	Row height in pixels when not hovered.
`expandedHeight?`	`number`	`320`	Row height in pixels when hovered.
`className?`	`string`	-	Additional CSS classes on the container.

HoverExpandItem

Prop	Type	Default	Description
`label`	`string`	-	Primary row label.
`image`	`string`	-	Image URL revealed on hover.
`sublabel?`	`string`	-	Secondary metadata shown beside the label (country, year, category, etc.).
`description?`	`string`	-	Short descriptor that slides in from the left when the row is expanded.
`imageAlt?`	`string`	`""`	Alt text for the image.

Notes

Row height animates with a Motion spring (stiffness: 280, damping: 32, mass: 0.9) — the expand and collapse feel physical, not timed.
The background image animates from scale: 1.06 to scale: 1 on expand, giving a subtle zoom-in reveal. On collapse the reverse plays.
Non-hovered items fade to opacity: 0.38, keeping visual focus on the active row.
description slides in from x: -8 to x: 0 with a 0.12s delay after expand starts — it appears only after the row has opened enough to be readable.
A gradient overlay (from-black/70 via-black/20 to-black/10) is baked into the component to keep white labels legible over any image.
Use landscape images (16:9 or wider) for best results at the default expandedHeight. Square or portrait images will be cropped by object-cover.
The component works best with 4–8 rows. More rows will still function but the list may exceed viewport height when fully collapsed.
The file is marked "use client" and relies on onHoverStart / onHoverEnd — not suitable for server rendering without a client boundary.

Credits

Inspired by the horizontal accordion hover popularized on editorial design studio portfolios — hovering a thin column expands it sideways to reveal a photograph. This component rotates the axis to vertical, making it a better fit for standard document flow.

Original horizontal pattern notably seen on Skiper UI and various portfolio galleries.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.