Hover Expand

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
`items`	`HoverExpandItem[]`	-
`collapsedHeight?`	`number`	`68`
`expandedHeight?`	`number`	`320`
`className?`	`string`	-

HoverExpandItem

Prop	Type	Default
`label`	`string`	-
`image`	`string`	-
`sublabel?`	`string`	-
`description?`	`string`	-
`imageAlt?`	`string`	`""`

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.