# Dome Gallery

> Immersive 3D dome gallery projecting images on a hemispheric surface. Drag to spin it with inertia and click a tile to fly it out into a centered viewer.

A gallery of images laid out on the inside of a 3D dome. Drag to spin the dome; it keeps turning with inertia when you let go. Click (or press Enter on) a tile and it turns to face you, then grows into a centered viewer. Click the backdrop or press Escape to send it back to its place.

<demo-dome-gallery>



</demo-dome-gallery>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import DomeGallery from '~/components/ui/dome-gallery/DomeGallery.vue';

  const images = [
    { src: '/photos/one.jpg', alt: 'Harbour at dawn' },
    { src: '/photos/two.jpg', alt: 'Desert road' },
    '/photos/three.jpg',
  ];
</script>

<template>
  <div class="relative h-150 w-full">
    <DomeGallery
      :images="images"
      :fit="0.8"
      :segments="34"
      :max-vertical-rotation-deg="0"
      overlay-blur-color="#120F17"
      grayscale
    />
  </div>
</template>
```

The gallery fills its parent, so give the parent a height.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        images
      </code>
    </td>
    
    <td>
      <code>
        (string | GalleryImage)[]
      </code>
    </td>
    
    <td>
      7 samples
    </td>
    
    <td>
      Image URLs, or objects with <code>
        src
      </code>
      
       and optional <code>
        alt
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fit
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Size factor for the dome radius based on the container size.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fit-basis
      </code>
    </td>
    
    <td>
      <code>
        'auto' | 'min' | 'max' | 'width' | 'height'
      </code>
    </td>
    
    <td>
      <code>
        'auto'
      </code>
    </td>
    
    <td>
      Which container dimension the radius is based on.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        min-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        600
      </code>
    </td>
    
    <td>
      Minimum dome radius in pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        Infinity
      </code>
    </td>
    
    <td>
      Maximum dome radius in pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pad-factor
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      Padding around the viewer frame, as a share of the smaller side.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        overlay-blur-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#120F17'
      </code>
    </td>
    
    <td>
      Background, vignette and edge-fade color. Match your page.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-vertical-rotation-deg
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        5
      </code>
    </td>
    
    <td>
      Maximum vertical tilt in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        drag-sensitivity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        20
      </code>
    </td>
    
    <td>
      Pixels of drag per degree of rotation. Higher is slower.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enlarge-transition-ms
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        300
      </code>
    </td>
    
    <td>
      Duration of the open and close transitions in milliseconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        segments
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        35
      </code>
    </td>
    
    <td>
      Number of columns around the dome.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        drag-dampening
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Inertia damping after a drag (clamped to 0–1, higher glides more).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opened-image-width
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '400px'
      </code>
    </td>
    
    <td>
      Width of the enlarged image.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opened-image-height
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '400px'
      </code>
    </td>
    
    <td>
      Height of the enlarged image.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        image-border-radius
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '30px'
      </code>
    </td>
    
    <td>
      Corner radius of the tiles.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opened-image-border-radius
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '30px'
      </code>
    </td>
    
    <td>
      Corner radius of the enlarged image.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grayscale
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Render every image in grayscale.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- Every tile is a focusable `role="button"` labelled with its `alt` text. Enter or Space opens it; Escape closes the viewer.
- With `prefers-reduced-motion: reduce`, drag inertia and the tile turn transitions are switched off.
- Ported from [React Bits](https://reactbits.dev/components/dome-gallery) by David Haz.