Sticky Scroll Cards

Scroll-driven card stack where images pin and scale as you scroll.

Installation

$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/sticky-scroll-cards.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 StickyScrollCards from '~/components/ui/sticky-scroll-cards/StickyScrollCards.vue';
</script>

<template>
  <!-- Wrap in a tall scroll container so the sticky stack pins as you scroll -->
  <div class="h-screen overflow-y-auto">
    <StickyScrollCards />
  </div>
</template>

Props

Prop	Type	Default	Description
`cards`	`StickyScrollCardItem[]`	`[]`	Array of card objects with title and src
`hint`	`string`	`''`	Hint label shown above card stack
`class`	`string`	`''`	Additional CSS classes

StickyScrollCardItem

Field	Type	Description
`title`	`string`	Card title
`src`	`string`	Image URL

Edit Report

Stepper

Swipe Row