# Collection Surfer

> A 3D scroll-driven collection viewer where items surf along a perspective track. Perfect for immersive showcases.

<demo-collection-surfer>



</demo-collection-surfer>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import CollectionSurfer from '~/components/ui/collection-surfer/CollectionSurfer.vue';
  import type { CollectionSurferItem } from '~/types/components';

  const items: CollectionSurferItem[] = [
    {
      id: 1,
      image:
        'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&q=80',
      title: 'HERITAGE 01',
    },
    {
      id: 2,
      image:
        'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&q=80',
      title: 'HERITAGE 02',
    },
    // ...
  ];
</script>

<template>
  <CollectionSurfer :items="items" variant="magnetic" class="h-150" />
</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>
        CollectionSurferItem[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Array of items with id, image URL, and title
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'magnetic' | 'uplift' | 'simple'
      </code>
    </td>
    
    <td>
      <code>
        'magnetic'
      </code>
    </td>
    
    <td>
      Interaction style. Magnetic scales on hover, uplift moves vertically, simple has no hover effects
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>