Card Stack

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface CardStackProps extends React.ComponentProps<"div"> {
8  /** Pixels from the top of the viewport where the first card pins. */
9  offset?: number
10  /** Pixels of the card below that stay visible once it is covered. */
11  peek?: number
12  /**
13   * How much a fully covered card shrinks, as a fraction of its size. Off by
14   * default: it only reads as depth when `peek` is large enough to show a real
15   * strip of the card behind.
16   */
17  scale?: number
18  /** How much a fully covered card fades, from 0 to 1. */
19  dim?: number
20  /** Pixels of scroll the last card stays pinned for once it lands. */
21  tail?: number
22  /** Pin the cards but leave them at full size and opacity. */
23  disabled?: boolean
24}
25 
26/** Smoothstep. Eases the start and the end of the burial. */
27function smooth(t: number) {
28  return t * t * (3 - 2 * t)
29}
30 
31/**
32 * Sticky positions against the nearest scrolling ancestor, not always the page,
33 * so the measurements have to be taken against that same box.
34 */
35function findScrollport(node: HTMLElement) {
36  let parent = node.parentElement
37  while (parent) {
38    const overflow = getComputedStyle(parent).overflowY
39    if (overflow === "auto" || overflow === "scroll") {
40      return parent
41    }
42    parent = parent.parentElement
43  }
44  return null
45}
46 
47/**
48 * Each card pins a little lower than the last, so a covered one keeps a strip on
49 * screen. Progress is measured from the card *after* it: a pinned card stops
50 * moving, so only what is burying it knows how buried it is.
51 */
52export function CardStack({
53  children,
54  className,
55  offset = 96,
56  peek = 14,
57  scale = 0,
58  dim = 0.12,
59  tail = 200,
60  disabled = false,
61  style,
62  ...props
63}: CardStackProps) {
64  const ref = React.useRef<HTMLDivElement>(null)
65 
66  React.useEffect(() => {
67    const root = ref.current
68    if (!root) {
69      return
70    }
71 
72    const items = () =>
73      Array.from(
74        root.querySelectorAll<HTMLElement>("[data-slot='card-stack-item']")
75      )
76 
77    // The pin position is per card and never changes, so it is written once
78    // rather than recomputed on every frame of every scroll.
79    for (const [index, item] of items().entries()) {
80      item.style.setProperty("--card-top", `${offset + index * peek}px`)
81    }
82 
83    if (
84      disabled ||
85      window.matchMedia("(prefers-reduced-motion: reduce)").matches
86    ) {
87      for (const item of items()) {
88// … truncated