Panels expand on hover or focus, revealing parallax imagery and captions.
Hover, focus or click a panel to expand it. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<{ image: string; label?: string; link?: string; alt?: string }> | 5 sample panels | The panels to render. Each needs an image, and optionally a label, link and alt text. |
defaultIndex | number | 2 | Index of the panel that is expanded on load, so the gallery never looks dead. Read once on mount. |
accentColor | string | '#ffffff' | Colour of the caption accent bar and the focus ring. |
overlayColor | string | '#060010' | Colour used for the bottom legibility gradient and the dimming of collapsed panels. |
textColor | string | '#ffffff' | Colour of the caption text. |
grayscale | boolean | true | Desaturate collapsed panels and restore full colour on the expanded one. |
showLabels | boolean | true | Whether captions reveal on the expanded panel. |
duration | number | 0.6 | Duration of the expand / collapse transition in seconds. |
ease | string | 'power3.out' | GSAP easing used for every transition. |
parallax | number | 0.5 | Strength of the internal image drift as panels resize (0 disables it). |
tilt | number | 8 | Degrees of 3D rotation applied to collapsed panels, easing to flat on the open one. |
stagger | number | 0.06 | Delay between the caption bar and text reveal, in seconds. |
trigger | 'hover' | 'click' | 'hover' | How a panel expands on pointer devices. Focus and tap always expand too. |
height | number | 460 | Height of the row in pixels (width of the column when vertical). |
gap | number | 10 | Gap between panels in pixels. |
radius | number | 16 | Corner radius of each panel in pixels. |
expandRatio | number | 0.52 | Fraction of the row the expanded panel occupies (0.2 to 0.9). |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Lay the accordion out as a row or a column. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves focus to a panel and expands it. |
| ArrowRight + ArrowDown | Expands the next panel, wrapping at the end. |
| ArrowLeft + ArrowUp | Expands the previous panel, wrapping at the start. |