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 shadcn@latest add https://scrollx-ui.vercel.app/registry/parallaxcards.json 

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

PropertyTypeDefaultDescription
cards{ lightBg: string; darkBg: string; content: React.ReactNode; }[][]
Array of cards with light/dark background and content.
heightnumber | string"100vh"
Height of the scroll container. Each card is sticky (70vh tall).

Built withby Ahdeetai.