# Scroll Split Card

> Scroll-driven card that splits into 3 panels and flips to reveal content.

<demo-scroll-split-card>



</demo-scroll-split-card>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/scroll-split-card.json"
```

## Usage

```vue
<script setup lang="ts">
  import ScrollSplitCard from '~/components/ui/scroll-split-card/ScrollSplitCard.vue';
</script>

<template>
  <ScrollSplitCard
    image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200"
    start-hint="Scroll down"
    end-hint="So cool, right?"
    :cards="cards"
  >
    <template #icon-0>
      <Icon name="lucide:image" class="size-8 text-white/70" />
    </template>
    <template #icon-1>
      <Icon name="lucide:globe" class="size-8 text-white/70" />
    </template>
    <template #icon-2>
      <Icon name="lucide:calendar" class="size-8 text-white/70" />
    </template>
  </ScrollSplitCard>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        imageSrc
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      URL of the hero image to split
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cards
      </code>
    </td>
    
    <td>
      <code>
        ScrollSplitCardItem[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Array of card content (max 3)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        startHint
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Scroll down'
      </code>
    </td>
    
    <td>
      Text shown at scroll start
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        endHint
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'So cool, right?'
      </code>
    </td>
    
    <td>
      Text shown at scroll end
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>

## ScrollSplitCardItem

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

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Card back-side heading
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Card back-side description text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bgColor
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      CSS background color for back side
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        textColor
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      CSS text color for back side
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Props
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        icon-{i}
      </code>
    </td>
    
    <td>
      <code>
        { index }
      </code>
    </td>
    
    <td>
      Icon slot for card back (i=0-2)
    </td>
  </tr>
</tbody>
</table>

## Behavior

The component unfolds in three scroll-driven stages:

1. **Stage 1 (0–40%)** — Cards separate horizontally, scale down to 0.9, and borders animate from sharp to rounded
2. **Stage 2 (40–80%)** — Cards flip on the Y-axis with a subtle Z-axis tilt
3. **Stage 3 (80–100%)** — Cards lift up (-200px) and the back-side content text fades in

The component uses a spring-physics smoothing on scroll progress for fluid animation.