Scroll Split Card

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

Installation

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

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Usage

<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

Prop	Type	Default	Description
`imageSrc`	`string`	—	URL of the hero image to split
`cards`	`ScrollSplitCardItem[]`	—	Array of card content (max 3)
`startHint`	`string`	`'Scroll down'`	Text shown at scroll start
`endHint`	`string`	`'So cool, right?'`	Text shown at scroll end
`class`	`string`	—	Additional CSS classes

ScrollSplitCardItem

Prop	Type	Description
`title`	`string`	Card back-side heading
`description`	`string`	Card back-side description text
`bgColor`	`string`	CSS background color for back side
`textColor`	`string`	CSS text color for back side

Slots

Slot	Props	Description
`icon-{i}`	`{ index }`	Icon slot for card back (i=0-2)

Behavior

The component unfolds in three scroll-driven stages:

Stage 1 (0–40%) — Cards separate horizontally, scale down to 0.9, and borders animate from sharp to rounded
Stage 2 (40–80%) — Cards flip on the Y-axis with a subtle Z-axis tilt
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.

Edit Report

Scroll Choreography

Scroll Stack