Parallax Cards

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

Smart Scheduling

Automatically book meetings at the best times — no more back-and-forth emails.

Privacy First

Your data stays yours — always encrypted, never sold or shared.

AI Suggestions

Let AI recommend the best time slots, tasks, and workflows automatically.

Cloud Sync

Keep everything up-to-date across your devices with instant cloud sync.

Integrates Easily

Works with tools you already love: Google, Notion, Slack, and more.

Team Ready

Designed for teams — with roles, collaboration, and shared calendars.

Installation

npx scrollx-ui@latest add 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

cards?: { lightBg: string; darkBg: string; content: React.ReactNode; }[]
Array of card objects with light/dark background classes and JSX content.
height?: number | string
Sets the container height. Defaults to "100vh".
Each card is sticky (70vh tall), scrolls into view one by one, and supports dark/light modes via Tailwind classes.