Sticky Scroll Cards Demo

1"use client";
2 
3import {
4  ChevronDown,
5  Gem,
6  Infinity as InfinityIcon,
7  Layers,
8  LockOpen,
9} from "lucide-react";
10import { useEffect, useRef, useState } from "react";
11import { CatalogScrollHint } from "@/components/catalog/catalog-scroll-hint";
12import { resolveScrollRoot } from "@/lib/catalog/resolve-scroll-root";
13import { waitForScrollerReady } from "@/lib/scroll/scroller-ready";
14import { StickyScrollCards } from "@/components/sora-ui/effects/sticky-scroll-cards";
15 
16const FRONT = {
17  title: "First Frame",
18  description:
19    "A single moment, held in place before everything begins to move.",
20  icon: <ChevronDown />,
21};
22 
23const CARDS = [
24  {
25    title: "Final Hold",
26    description:
27      "Everything settles into place, leaving a lasting frame that feels complete.",
28    icon: <LockOpen />,
29  },
30  {
31    title: "Layered Time",
32    description:
33      "Moments stack, overlap, and reveal themselves slowly as the scroll continues.",
34    icon: <Layers />,
35  },
36  {
37    title: "Weight & Flow",
38    description:
39      "Elements carry presence, easing in and out with balance, never rushed, never still.",
40    icon: <Gem />,
41  },
42  {
43    title: "Soft Motion",
44    description:
45      "Subtle shifts and gentle transitions that build a quiet sense of rhythm as you move forward.",
46    icon: <InfinityIcon />,
47  },
48];
49 
50export default function StickyScrollCardsExample() {
51  const rootRef = useRef<HTMLDivElement>(null);
52  const [scroller, setScroller] = useState<Element | Window | undefined>();
53 
54  useEffect(() => {
55    const node = rootRef.current;
56    if (!node) {
57      return;
58    }
59 
60    const resolved = resolveScrollRoot(node);
61 
62    waitForScrollerReady(resolved)
63      .then(() => {
64        setScroller(resolved);
65      })
66      .catch(() => {
67        /* preview unmounted */
68      });
69  }, []);
70 
71  return (
72    <div className="w-full" ref={rootRef}>
73      <CatalogScrollHint label="Scroll to flip and dismiss cards" />
74 
75      {scroller ? (
76        <StickyScrollCards
77          cards={CARDS}
78          containerQuery
79          embedded
80          front={FRONT}
81          headline="Scroll to pin, flip, and let go"
82          scroller={scroller}
83          timing={{
84            cardDismissDuration: 70,
85            cardFlipTrigger: 140,
86            cardsEnterEnd: 70,
87            dismissStart: 210,
88          }}
89          variant="studio"
90        />
91      ) : null}
92    </div>
93  );
94}