Scroll Stack

Cards 17

About

Here is Scroll Stack component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Stack to your project and fits it to your theme.

Code

How Scroll Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import ScrollStack, { ScrollStackItem } from "@/components/ui/scroll-stack";

const DemoScrollStack = () => {

  return (
    <div className="w-full h-screen">
      <ScrollStack
        itemDistance={120}
        baseScale={0.8}
        itemScale={0.05}
        rotationAmount={3}
        blurAmount={1.5}
        onStackComplete={() => console.log("Stack complete!")}
      >
        {[...Array(6)].map((_, i) => (
          <ScrollStackItem key={i}>
            <div className="text-2xl font-bold text-center text-white bg-blue-500 h-full flex items-center justify-center rounded-[30px]">
              Card #{i + 1}
            </div>
          </ScrollStackItem>
        ))}
      </ScrollStack>
    </div>
  );
};

export default DemoScrollStack;