Parallax Cards

A vertical sticky-scroll component that displays stacked cards with parallax behavior.

Installation

npx shadcn@latest add @scrollxui/parallaxcards

Usage

import ParallaxCards from "@/components/ui/parallaxcards";

<CardContent className="flex flex-col items-center justify-center h-full not-prose text-inherit">
  <div className="mb-4">{card.icon}</div>
      <h2 className="text-3xl sm:text-4xl font-bold mb-4">{card.title}</h2>
      <p className="text-lg max-w-2xl mb-6">{card.description}</p>
    <Button variant={card.variant}>Learn More →</Button>
</CardContent>

API Reference

`ParallaxCards`

A vertical sticky-scroll component that displays stacked cards with parallax behavior.

Props

Property	Type	Default	Description
`cards`	{ lightBg: string; darkBg: string; content: React.ReactNode; }[]	`[]`	Array of cards with light/dark background and content.
`height`	number \| string	`"100vh"`	Height of the scroll container. Each card is sticky (70vh tall).