Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
01
02
03
04
05
06
import { ImageStackHover } from "@/registry/tween/image-stack-hover"
export function ImageStackHoverDemo() {
return <ImageStackHover />
}
import { ImageStackHover } from "@/components/ui/image-stack-hover"<ImageStackHover
folders={[
{
index: "01",
name: "figures",
variant: 1,
images: ["/a.jpg", "/b.jpg", "/c.jpg"],
},
// ...
]}
/>Folders are laid out two-per-row across three rows, each row pulled up so only its colored tab and name peek — a fanned, stacked-paper look. Hovering a folder lifts its label wrapper with a back.out ease and fans its three preview images up from behind with a small stagger and randomized rotation (outer images angle away, the middle one stays near upright); every other folder fades to the disabled palette. The component measures its own width and disables hover below 1000px, keeping the tabs as a plain stacked list on touch. When prefers-reduced-motion: reduce is set, the folders render in their resting state with no hover animation.
| Prop | Type | Default | Description |
|---|---|---|---|
folders | ImageStackFolder[] | 6 defaults | { index, name, images: string[3], variant?: 1|2|3 }. |
background | string | "#f4f7f0" | Page background color. |
foreground | string | "#0f0f0f" | Tab text color when active. |
variantColors | [string, string, string] | yellow / grey / grey | Tab colors for variants 1, 2 and 3. |
disabledBg | string | "#e8ebe4" | Tab background when another folder is hovered. |
disabledFg | string | "#b0b3ad" | Tab text color when dimmed. |
className | string | — | Extra classes on the outer container. |