# Accordion Gallery

> Image panels that expand on hover or focus, with 3D tilt, parallax imagery and a staggered caption.

A row of image panels. Hover, click or focus a panel to open it: it widens, turns to colour and shows its caption, while closed panels tilt away and their images shift toward it. Arrow keys move between panels.

<demo-accordion-gallery>



</demo-accordion-gallery>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/accordion-gallery.json"
```

## Usage

```vue
<script setup lang="ts">
  import AccordionGallery from '~/components/ui/accordion-gallery/AccordionGallery.vue';
  import type { AccordionGalleryItem } from '~/components/ui/accordion-gallery/types';

  const items: AccordionGalleryItem[] = [
    {
      image: 'https://picsum.photos/id/1015/900/1200',
      label: 'Canyon',
      link: '#',
    },
    {
      image: 'https://picsum.photos/id/1018/900/1200',
      label: 'Ridgeline',
      link: '#',
    },
    {
      image: 'https://picsum.photos/id/1039/900/1200',
      label: 'Falls',
      link: '#',
    },
  ];
</script>

<template>
  <AccordionGallery
    :items="items"
    :default-index="1"
    :height="460"
    ease="power3.out"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        AccordionGalleryItem[]
      </code>
    </td>
    
    <td>
      5 demo panels
    </td>
    
    <td>
      <code>
        { image, label?, link?, alt? }
      </code>
      
      . A <code>
        link
      </code>
      
       makes the panel a link.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        default-index
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Index of the panel that starts open.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Colour of the caption bar and focus ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        overlay-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#060010'
      </code>
    </td>
    
    <td>
      Tint over closed panels and the caption gradient.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Caption text colour.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        460
      </code>
    </td>
    
    <td>
      Height in pixels. Vertical orientation uses 1.6×.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      Space between panels in pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        16
      </code>
    </td>
    
    <td>
      Corner radius of each panel in pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        expand-ratio
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.52
      </code>
    </td>
    
    <td>
      Share of the row the open panel takes (0.2–0.9).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        orientation
      </code>
    </td>
    
    <td>
      <code>
        'horizontal' | 'vertical'
      </code>
    </td>
    
    <td>
      <code>
        'horizontal'
      </code>
    </td>
    
    <td>
      Lay panels out in a row or a column.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Transition length in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ease
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'power3.out'
      </code>
    </td>
    
    <td>
      GSAP-style ease name: <code>
        power1
      </code>
      
      –<code>
        power4
      </code>
      
       <code>
        .in/.out/.inOut
      </code>
      
      , <code>
        sine.*
      </code>
      
      , <code>
        expo.*
      </code>
      
      , <code>
        circ.out
      </code>
      
      , <code>
        back.out
      </code>
      
      , <code>
        none
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        parallax
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How far closed images shift toward the open panel.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      3D tilt of closed panels in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.06
      </code>
    </td>
    
    <td>
      Delay between the caption bar and the caption text (s).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'hover' | 'click'
      </code>
    </td>
    
    <td>
      <code>
        'hover'
      </code>
    </td>
    
    <td>
      Open a panel on hover or only on click.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-labels
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show the caption on the open panel.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grayscale
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Closed panels are grayscale; the open one is in colour.
    </td>
  </tr>
</tbody>
</table>

On screens up to 520px wide the panels stack in a column and the tilt is off.

## Accessibility

- The gallery is a `role="list"`; every panel is focusable, named by its label, and the open one has `aria-current="true"`.
- Focus opens a panel. Arrow keys move focus to the next or previous panel and open it.
- On a closed panel with a `link`, the first click only opens it; the second follows the link.
- With `prefers-reduced-motion: reduce` panels change without animation.
- Ported from [React Bits](https://reactbits.dev/components/accordion-gallery) by David Haz.