# Infinite Image Field

> A camera-based infinite scrolling image grid on canvas, driven by cursor position with smooth velocity interpolation.

<demo-infinite-image-field>



</demo-infinite-image-field>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/infinite-image-field.json"
```

## Usage

```vue
<InfiniteImageField :image-width="200" :image-height="280" :gap="28" />
```

## 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[]
      </code>
    </td>
    
    <td>
      12 Unsplash URLs
    </td>
    
    <td>
      Array of image URLs to display in the grid
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        image-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        200
      </code>
    </td>
    
    <td>
      Width of each image cell in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        image-height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        280
      </code>
    </td>
    
    <td>
      Height of each image cell in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        28
      </code>
    </td>
    
    <td>
      Gap between image cells in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        5
      </code>
    </td>
    
    <td>
      Maximum camera scroll speed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        smoothing
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.07
      </code>
    </td>
    
    <td>
      Camera velocity smoothing factor (0-1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Border radius for image cells in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      ---
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
</tbody>
</table>