Hover Stack

Component 254

About

Overlapping card stack that fans out around the hovered card — the active card lifts and straightens while its neighbors push aside. Fixed-size card interior, pointer-type aware, respects reduced motion.

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

Code

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

Usage.tsx

"use client";

import HoverStack from "@/components/ui/hover-stack";

export default function HoverStackDemo() {
  return (
    <section className="flex h-screen w-full flex-col items-center justify-center gap-[4vw] overflow-hidden bg-[#fff9ec] px-4">
      <div className="flex w-full flex-col items-center text-center text-[#1a1a1a]">
        <h1
          style={{ fontWeight: 300 }}
          className="text-[5.5vw] tracking-tight max-[1025px]:text-[7vw] max-md:text-[9vw]"
        >
          Hover Stack Cards
        </h1>
      </div>

      <HoverStack />
    </section>
  );
}