sticky-card-stack 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+# scs
+
+React sticky card stack with GSAP ScrollTrigger and Lenis smooth scroll. Build a vertical stack of cards that stick and scale on scroll.
+
+## Install
+
+```bash
+npm install scs
+```
+
+Peer dependencies (install if you don’t have them):
+
+```bash
+npm install react react-dom gsap lenis
+```
+
+## Quick start
+
+1. Call **`useScrollTrigger()`** once at your app root (e.g. in your root layout or main component).
+2. Wrap your cards in **`StickCardStack`** and use **`StickCard`** for each card.
+
+```tsx
+import { StickCardStack, StickCard, useScrollTrigger } from 'scs';
+import 'scs/style.css'; // optional: default card layout and demo styles
+
+function App() {
+  useScrollTrigger();
+
+  return (
+    <StickCardStack scrollHeight={8}>
+      <StickCard
+        header={<h2>Card 1</h2>}
+        content={<p>Content</p>}
+        main={<img src="..." alt="" />}
+      />
+      <StickCard
+        header={<h2>Card 2</h2>}
+        content={<p>More content</p>}
+        main={<img src="..." alt="" />}
+      />
+    </StickCardStack>
+  );
+}
+```
+
+## API
+
+### `useScrollTrigger()`
+
+Call once at the root of your app. Sets up Lenis smooth scroll and syncs it with GSAP ScrollTrigger. Required for `StickCardStack` to work correctly.
+
+### `StickCardStack`
+
+| Prop            | Type       | Default | Description |
+|-----------------|------------|---------|-------------|
+| `children`      | `ReactNode`| —       | Card elements (e.g. `StickCard` components). |
+| `scrollHeight`  | `number`   | `8`     | Height of the scroll area as a multiple of viewport height. |
+| `cardYOffset`   | `number`   | `5`     | Vertical offset between stacked cards (percent). |
+| `cardScaleStep` | `number`   | `0.075` | Scale reduction per card (e.g. 0.075 = 7.5% smaller per card). |
+| `className`     | `string`   | —       | Optional class name for the wrapper. |
+| `colorVariants` | `string[]` | —       | Optional background colors applied per card by index (cycles if fewer than cards). |
+
+### `StickCard`
+
+Each card can be used in two ways:
+
+- **Structured:** `header`, `content`, and `main` props for the default two-column layout (header top, content bottom-left, main right).
+- **Custom:** `children` only; you structure the card yourself.
+
+Shared prop:
+
+- **`colorOverride`** — Optional hex (or other) color for this card; overrides stack variant/`colorVariants`.
+
+Example with custom layout:
+
+```tsx
+<StickCard colorOverride="#1a1a2e">
+  <div className="my-card">…</div>
+</StickCard>
+```
+
+## TypeScript
+
+Exported types:
+
+- `StickCardStackProps`
+- `StickCardProps`
+- `StickCardPropsStructured`
+- `StickCardPropsChildren`
+- `STICK_CARD_STACK_DEFAULTS`
+
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { StickCardStack } from './lib/StickCardStack';
+export { StickCard } from './lib/StickCard';
+export { useScrollTrigger } from './lib/useScrollTrigger';
+export type { StickCardStackProps, StickCardProps, StickCardPropsStructured, StickCardPropsChildren, } from './lib/types';
+export { STICK_CARD_STACK_DEFAULTS } from './lib/types';

package/dist/lib/StickCard.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { StickCardPropsChildren, StickCardPropsStructured } from './types';
+/**
+ * A single card for use inside StickCardStack.
+ * Either use structured props (header, content, main) for the default two-column layout,
+ * or pass children and structure the card yourself.
+ * Variant (1–4) is derived from position in the stack when used inside StickCardStack.
+ */
+export declare function StickCard(props: StickCardPropsStructured): ReactElement;
+export declare function StickCard(props: StickCardPropsChildren): ReactElement;

package/dist/lib/StickCardStack.d.ts

@@ -0,0 +1,12 @@
+import { StickCardStackProps } from './types';
+/** Injected by StickCardStack: variant (1–4) and optional per-card color from colorVariants. */
+export interface StickCardContextValue {
+    variant: number;
+    color: string | null;
+}
+export declare const StickCardVariantContext: import('react').Context<StickCardContextValue | null>;
+/**
+ * A sticky stack of cards that animate on scroll (GSAP + ScrollTrigger).
+ * Use with useScrollTrigger() at app root for smooth scrolling.
+ */
+export declare function StickCardStack({ children, scrollHeight, cardYOffset, cardScaleStep, className, colorVariants, }: StickCardStackProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/types.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+/** Props for the StickCardStack root component */
+export interface StickCardStackProps {
+    /** Card elements; each child is rendered as one stacked card */
+    children: ReactNode;
+    /**
+     * Height of the scroll area as a multiple of viewport height.
+     * @default 8
+     */
+    scrollHeight?: number;
+    /**
+     * Vertical offset between stacked cards (in percent).
+     * @default 5
+     */
+    cardYOffset?: number;
+    /**
+     * Scale reduction per card in the stack (e.g. 0.075 = 7.5% smaller per card).
+     * @default 0.075
+     */
+    cardScaleStep?: number;
+    /** Optional class name for the wrapper element */
+    className?: string;
+    /**
+     * Optional list of background colors (e.g. ['#3d2fa9', '#ff7722']).
+     * Applied per card by index (cycles if fewer colors than cards).
+     * When not provided, cards use the base CSS variables (.card-1 … .card-4).
+     */
+    colorVariants?: string[];
+}
+/** Common props for StickCard */
+export interface StickCardPropsBase {
+    /**
+     * Custom background color for this card (e.g. '#3d2fa9').
+     * When set, overrides stack context (variant/colorVariants) and uses this color only.
+     */
+    colorOverride?: string | null;
+}
+/** Structured card: header (20% top), content (22% at bottom of left column), and main column. */
+export interface StickCardPropsStructured extends StickCardPropsBase {
+    /** Optional header slot at top of left column (e.g. "Join us"). */
+    header: ReactNode;
+    /** Content slot: primary text in left column (e.g. "Football"). */
+    content: ReactNode;
+    /** Main slot: trailing column (e.g. image, media). */
+    main: ReactNode;
+}
+/** Custom layout: you supply children and structure the card yourself. */
+export interface StickCardPropsChildren extends StickCardPropsBase {
+    children: ReactNode;
+}
+/** Props for a single StickCard: either structured (header, content, main) or custom (children). */
+export type StickCardProps = StickCardPropsStructured | StickCardPropsChildren;
+/** Default values for StickCardStack animation options */
+export declare const STICK_CARD_STACK_DEFAULTS: {
+    readonly scrollHeight: 8;
+    readonly cardYOffset: 5;
+    readonly cardScaleStep: 0.075;
+};

package/dist/lib/useScrollTrigger.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Sets up Lenis smooth scroll and syncs it with GSAP ScrollTrigger.
+ * Call once at app root (e.g. in your root layout or App) when using StickCardStack.
+ */
+export declare function useScrollTrigger(): void;

package/dist/scs.css

@@ -0,0 +1 @@
+.stick-card-stack-wrap{position:relative}.stick-card-stack{position:sticky;top:0;height:100svh;width:100%;background-color:#e3e3db}.stick-card-stack .stick-card-stack-inner{position:absolute;inset:0;perspective:850px}.stick-card-stack .stick-card{position:absolute;top:50%;left:50%;width:65%;height:60%;display:flex;justify-content:center;align-items:center;padding:2.5rem;border-radius:1rem;transform-origin:center bottom;will-change:transform}@media(max-width:1024px){.stick-card-stack .stick-card{width:calc(100% - 4rem);height:75%}}

package/dist/scs.js

@@ -0,0 +1,139 @@
+import { jsx as r, jsxs as N, Fragment as H } from "react/jsx-runtime";
+import { createContext as O, useRef as T, useEffect as A, Children as p, useContext as U } from "react";
+import t from "gsap";
+import { ScrollTrigger as h } from "gsap/ScrollTrigger";
+import X from "lenis";
+const w = {
+  scrollHeight: 8,
+  cardYOffset: 5,
+  cardScaleStep: 0.075
+}, R = O(null), j = 4;
+t.registerPlugin(h);
+function M({
+  children: e,
+  scrollHeight: n = w.scrollHeight,
+  cardYOffset: c = w.cardYOffset,
+  cardScaleStep: i = w.cardScaleStep,
+  className: o,
+  colorVariants: m
+}) {
+  const y = T(null), x = T(null);
+  A(() => {
+    const g = y.current, l = x.current;
+    if (!g || !l) return;
+    const s = l.querySelectorAll(".stick-card"), a = s.length;
+    if (a === 0) return;
+    const d = 1 / a;
+    s.forEach((v, u) => {
+      t.set(v, {
+        xPercent: -50,
+        yPercent: -50 + u * c,
+        scale: 1 - u * i
+      });
+    });
+    const b = window.innerHeight * n, E = h.create({
+      trigger: g,
+      start: "top top",
+      end: `+=${b}px`,
+      onUpdate(v) {
+        const u = v.progress, f = Math.min(
+          Math.floor(u / d),
+          a - 1
+        ), k = (u - f * d) / d;
+        s.forEach((C, S) => {
+          if (S < f)
+            t.set(C, {
+              yPercent: -250,
+              rotationX: 35
+            });
+          else if (S === f)
+            t.set(C, {
+              yPercent: t.utils.interpolate(-50, -200, k),
+              rotationX: t.utils.interpolate(0, 35, k),
+              scale: 1
+            });
+          else {
+            const P = S - f, _ = (P - k) * c, $ = 1 - (P - k) * i;
+            t.set(C, {
+              yPercent: -50 + _,
+              rotationX: 0,
+              scale: $
+            });
+          }
+        });
+      }
+    });
+    return () => {
+      E.kill();
+    };
+  }, [n, c, i]);
+  const I = {
+    height: `calc(100svh * ${n})`
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: y,
+      className: o ? `stick-card-stack-wrap ${o}` : "stick-card-stack-wrap",
+      style: I,
+      children: /* @__PURE__ */ r("section", { className: "stick-card-stack", children: /* @__PURE__ */ r("div", { ref: x, className: "stick-card-stack-inner", children: p.map(e, (g, l) => {
+        const s = p.count(e), a = l % j + 1, d = m && m.length > 0 ? m[l % m.length] : null;
+        return /* @__PURE__ */ r(R.Provider, { value: { variant: a, color: d }, children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: "stick-card",
+            style: { zIndex: s - l },
+            children: g
+          }
+        ) });
+      }) }) })
+    }
+  );
+}
+function q(e) {
+  const { colorOverride: n } = e, c = U(R), i = c?.variant ?? 1, o = n ?? c?.color ?? null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o ? "card-demo" : `card-demo card-${i}`,
+      style: o ? { backgroundColor: o } : void 0,
+      children: "children" in e && e.children != null ? e.children : /* @__PURE__ */ N(H, { children: [
+        /* @__PURE__ */ N("div", { className: "col col-leading", children: [
+          /* @__PURE__ */ r("div", { className: "col-header", children: "header" in e ? e.header : null }),
+          /* @__PURE__ */ r("div", { className: "col-content", children: "content" in e ? e.content : null })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "col col-main", children: "main" in e ? e.main : null })
+      ] })
+    }
+  );
+}
+t.registerPlugin(h);
+function B() {
+  A(() => {
+    const e = new X();
+    return e.on("scroll", h.update), t.ticker.add((n) => {
+      e.raf(n * 1e3);
+    }), t.ticker.lagSmoothing(0), h.scrollerProxy(document.body, {
+      scrollTop(n) {
+        return arguments.length && typeof n == "number" && e.scrollTo(n, { immediate: !0 }), e.scroll;
+      },
+      getBoundingClientRect() {
+        return {
+          top: 0,
+          left: 0,
+          width: window.innerWidth,
+          height: window.innerHeight
+        };
+      }
+    }), () => {
+      t.ticker.remove(e.raf), e.destroy();
+    };
+  }, []);
+}
+export {
+  w as STICK_CARD_STACK_DEFAULTS,
+  q as StickCard,
+  M as StickCardStack,
+  B as useScrollTrigger
+};
+//# sourceMappingURL=scs.js.map

package/dist/scs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scs.js","sources":["../src/lib/types.ts","../src/lib/StickCardStack.tsx","../src/lib/StickCard.tsx","../src/lib/useScrollTrigger.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Props for the StickCardStack root component */\nexport interface StickCardStackProps {\n  /** Card elements; each child is rendered as one stacked card */\n  children: ReactNode;\n  /**\n   * Height of the scroll area as a multiple of viewport height.\n   * @default 8\n   */\n  scrollHeight?: number;\n  /**\n   * Vertical offset between stacked cards (in percent).\n   * @default 5\n   */\n  cardYOffset?: number;\n  /**\n   * Scale reduction per card in the stack (e.g. 0.075 = 7.5% smaller per card).\n   * @default 0.075\n   */\n  cardScaleStep?: number;\n  /** Optional class name for the wrapper element */\n  className?: string;\n  /**\n   * Optional list of background colors (e.g. ['#3d2fa9', '#ff7722']).\n   * Applied per card by index (cycles if fewer colors than cards).\n   * When not provided, cards use the base CSS variables (.card-1 … .card-4).\n   */\n  colorVariants?: string[];\n}\n\n/** Common props for StickCard */\nexport interface StickCardPropsBase {\n  /**\n   * Custom background color for this card (e.g. '#3d2fa9').\n   * When set, overrides stack context (variant/colorVariants) and uses this color only.\n   */\n  colorOverride?: string | null;\n}\n\n/** Structured card: header (20% top), content (22% at bottom of left column), and main column. */\nexport interface StickCardPropsStructured extends StickCardPropsBase {\n  /** Optional header slot at top of left column (e.g. \"Join us\"). */\n  header: ReactNode;\n  /** Content slot: primary text in left column (e.g. \"Football\"). */\n  content: ReactNode;\n  /** Main slot: trailing column (e.g. image, media). */\n  main: ReactNode;\n}\n\n/** Custom layout: you supply children and structure the card yourself. */\nexport interface StickCardPropsChildren extends StickCardPropsBase {\n  children: ReactNode;\n}\n\n/** Props for a single StickCard: either structured (header, content, main) or custom (children). */\nexport type StickCardProps = StickCardPropsStructured | StickCardPropsChildren;\n\n/** Default values for StickCardStack animation options */\nexport const STICK_CARD_STACK_DEFAULTS = {\n  scrollHeight: 8,\n  cardYOffset: 5,\n  cardScaleStep: 0.075,\n} as const;\n","import { createContext, useEffect, useRef, Children } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { StickCardStackProps } from './types';\nimport { STICK_CARD_STACK_DEFAULTS } from './types';\nimport './StickCardStack.css';\n\n/** Injected by StickCardStack: variant (1–4) and optional per-card color from colorVariants. */\nexport interface StickCardContextValue {\n  variant: number;\n  color: string | null;\n}\nexport const StickCardVariantContext = createContext<StickCardContextValue | null>(null);\n\nconst VARIANT_COUNT = 4;\n\ngsap.registerPlugin(ScrollTrigger);\n\n/**\n * A sticky stack of cards that animate on scroll (GSAP + ScrollTrigger).\n * Use with useScrollTrigger() at app root for smooth scrolling.\n */\nexport function StickCardStack({\n  children,\n  scrollHeight = STICK_CARD_STACK_DEFAULTS.scrollHeight,\n  cardYOffset = STICK_CARD_STACK_DEFAULTS.cardYOffset,\n  cardScaleStep = STICK_CARD_STACK_DEFAULTS.cardScaleStep,\n  className,\n  colorVariants,\n}: StickCardStackProps) {\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const innerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const wrap = wrapRef.current;\n    const inner = innerRef.current;\n    if (!wrap || !inner) return;\n\n    const cards = inner.querySelectorAll<HTMLElement>('.stick-card');\n    const totalCards = cards.length;\n    if (totalCards === 0) return;\n\n    const segmentSize = 1 / totalCards;\n\n    cards.forEach((card, i) => {\n      gsap.set(card, {\n        xPercent: -50,\n        yPercent: -50 + i * cardYOffset,\n        scale: 1 - i * cardScaleStep,\n      });\n    });\n\n    const scrollHeightPx = window.innerHeight * scrollHeight;\n\n    const st = ScrollTrigger.create({\n      trigger: wrap,\n      start: 'top top',\n      end: `+=${scrollHeightPx}px`,\n      onUpdate(self) {\n        const progress = self.progress;\n        const activeIndex = Math.min(\n          Math.floor(progress / segmentSize),\n          totalCards - 1\n        );\n        const segmentProgress =\n          (progress - activeIndex * segmentSize) / segmentSize;\n\n        cards.forEach((card, i) => {\n          if (i < activeIndex) {\n            gsap.set(card, {\n              yPercent: -250,\n              rotationX: 35,\n            });\n          } else if (i === activeIndex) {\n            gsap.set(card, {\n              yPercent: gsap.utils.interpolate(-50, -200, segmentProgress),\n              rotationX: gsap.utils.interpolate(0, 35, segmentProgress),\n              scale: 1,\n            });\n          } else {\n            const behindIndex = i - activeIndex;\n            const currentYOffset = (behindIndex - segmentProgress) * cardYOffset;\n            const currentScale =\n              1 - (behindIndex - segmentProgress) * cardScaleStep;\n            gsap.set(card, {\n              yPercent: -50 + currentYOffset,\n              rotationX: 0,\n              scale: currentScale,\n            });\n          }\n        });\n      },\n    });\n\n    return () => {\n      st.kill();\n    };\n  }, [scrollHeight, cardYOffset, cardScaleStep]);\n\n  const wrapStyle = {\n    height: `calc(100svh * ${scrollHeight})`,\n  };\n\n  return (\n    <div\n      ref={wrapRef}\n      className={className ? `stick-card-stack-wrap ${className}` : 'stick-card-stack-wrap'}\n      style={wrapStyle}\n    >\n      <section className=\"stick-card-stack\">\n        <div ref={innerRef} className=\"stick-card-stack-inner\">\n          {Children.map(children, (child, index) => {\n            const totalCards = Children.count(children);\n            const variant = (index % VARIANT_COUNT) + 1;\n            const color =\n              colorVariants && colorVariants.length > 0\n                ? colorVariants[index % colorVariants.length]\n                : null;\n            return (\n              <StickCardVariantContext.Provider value={{ variant, color }}>\n                <div\n                  className=\"stick-card\"\n                  style={{ zIndex: totalCards - index }}\n                >\n                  {child}\n                </div>\n              </StickCardVariantContext.Provider>\n            );\n          })}\n        </div>\n      </section>\n    </div>\n  );\n}\n","import { useContext, type ReactElement } from 'react';\nimport { StickCardVariantContext } from './StickCardStack';\nimport type { StickCardProps, StickCardPropsChildren, StickCardPropsStructured } from './types';\n\n/**\n * A single card for use inside StickCardStack.\n * Either use structured props (header, content, main) for the default two-column layout,\n * or pass children and structure the card yourself.\n * Variant (1–4) is derived from position in the stack when used inside StickCardStack.\n */\nexport function StickCard(props: StickCardPropsStructured): ReactElement;\nexport function StickCard(props: StickCardPropsChildren): ReactElement;\nexport function StickCard(props: StickCardProps): ReactElement {\n  const { colorOverride: colorProp } = props;\n  const context = useContext(StickCardVariantContext);\n  const variant = context?.variant ?? 1;\n  const color = colorProp ?? context?.color ?? null;\n\n  return (\n    <div\n      className={color ? 'card-demo' : `card-demo card-${variant}`}\n      style={color ? { backgroundColor: color } : undefined}\n    >\n      {'children' in props && props.children != null ? (\n        props.children\n      ) : (\n        <>\n          <div className=\"col col-leading\">\n            <div className=\"col-header\">{'header' in props ? props.header : null}</div>\n            <div className=\"col-content\">{'content' in props ? props.content : null}</div>\n          </div>\n          <div className=\"col col-main\">{'main' in props ? props.main : null}</div>\n        </>\n      )}\n    </div>\n  );\n}\n","import { useEffect } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport Lenis from 'lenis';\n\ngsap.registerPlugin(ScrollTrigger);\n\n/**\n * Sets up Lenis smooth scroll and syncs it with GSAP ScrollTrigger.\n * Call once at app root (e.g. in your root layout or App) when using StickCardStack.\n */\nexport function useScrollTrigger(): void {\n  useEffect(() => {\n    const lenis = new Lenis();\n\n    lenis.on('scroll', ScrollTrigger.update);\n\n    gsap.ticker.add((time) => {\n      lenis.raf(time * 1000);\n    });\n    gsap.ticker.lagSmoothing(0);\n\n    ScrollTrigger.scrollerProxy(document.body, {\n      scrollTop(value) {\n        if (arguments.length && typeof value === 'number') {\n          lenis.scrollTo(value, { immediate: true });\n        }\n        return lenis.scroll;\n      },\n      getBoundingClientRect() {\n        return {\n          top: 0,\n          left: 0,\n          width: window.innerWidth,\n          height: window.innerHeight,\n        };\n      },\n    });\n\n    return () => {\n      gsap.ticker.remove(lenis.raf);\n      lenis.destroy();\n    };\n  }, []);\n}\n"],"names":["STICK_CARD_STACK_DEFAULTS","StickCardVariantContext","createContext","VARIANT_COUNT","gsap","ScrollTrigger","StickCardStack","children","scrollHeight","cardYOffset","cardScaleStep","className","colorVariants","wrapRef","useRef","innerRef","useEffect","wrap","inner","cards","totalCards","segmentSize","card","i","scrollHeightPx","st","self","progress","activeIndex","segmentProgress","behindIndex","currentYOffset","currentScale","wrapStyle","jsx","Children","child","index","variant","color","StickCard","props","colorProp","context","useContext","jsxs","Fragment","useScrollTrigger","lenis","Lenis","time","value"],"mappings":";;;;;AA2DO,MAAMA,IAA4B;AAAA,EACvC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,eAAe;AACjB,GCnDaC,IAA0BC,EAA4C,IAAI,GAEjFC,IAAgB;AAEtBC,EAAK,eAAeC,CAAa;AAM1B,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAAC,IAAeR,EAA0B;AAAA,EACzC,aAAAS,IAAcT,EAA0B;AAAA,EACxC,eAAAU,IAAgBV,EAA0B;AAAA,EAC1C,WAAAW;AAAA,EACA,eAAAC;AACF,GAAwB;AACtB,QAAMC,IAAUC,EAAuB,IAAI,GACrCC,IAAWD,EAAuB,IAAI;AAE5C,EAAAE,EAAU,MAAM;AACd,UAAMC,IAAOJ,EAAQ,SACfK,IAAQH,EAAS;AACvB,QAAI,CAACE,KAAQ,CAACC,EAAO;AAErB,UAAMC,IAAQD,EAAM,iBAA8B,aAAa,GACzDE,IAAaD,EAAM;AACzB,QAAIC,MAAe,EAAG;AAEtB,UAAMC,IAAc,IAAID;AAExB,IAAAD,EAAM,QAAQ,CAACG,GAAMC,MAAM;AACzB,MAAAnB,EAAK,IAAIkB,GAAM;AAAA,QACb,UAAU;AAAA,QACV,UAAU,MAAMC,IAAId;AAAA,QACpB,OAAO,IAAIc,IAAIb;AAAA,MAAA,CAChB;AAAA,IACH,CAAC;AAED,UAAMc,IAAiB,OAAO,cAAchB,GAEtCiB,IAAKpB,EAAc,OAAO;AAAA,MAC9B,SAASY;AAAA,MACT,OAAO;AAAA,MACP,KAAK,KAAKO,CAAc;AAAA,MACxB,SAASE,GAAM;AACb,cAAMC,IAAWD,EAAK,UAChBE,IAAc,KAAK;AAAA,UACvB,KAAK,MAAMD,IAAWN,CAAW;AAAA,UACjCD,IAAa;AAAA,QAAA,GAETS,KACHF,IAAWC,IAAcP,KAAeA;AAE3C,QAAAF,EAAM,QAAQ,CAACG,GAAMC,MAAM;AACzB,cAAIA,IAAIK;AACN,YAAAxB,EAAK,IAAIkB,GAAM;AAAA,cACb,UAAU;AAAA,cACV,WAAW;AAAA,YAAA,CACZ;AAAA,mBACQC,MAAMK;AACf,YAAAxB,EAAK,IAAIkB,GAAM;AAAA,cACb,UAAUlB,EAAK,MAAM,YAAY,KAAK,MAAMyB,CAAe;AAAA,cAC3D,WAAWzB,EAAK,MAAM,YAAY,GAAG,IAAIyB,CAAe;AAAA,cACxD,OAAO;AAAA,YAAA,CACR;AAAA,eACI;AACL,kBAAMC,IAAcP,IAAIK,GAClBG,KAAkBD,IAAcD,KAAmBpB,GACnDuB,IACJ,KAAKF,IAAcD,KAAmBnB;AACxC,YAAAN,EAAK,IAAIkB,GAAM;AAAA,cACb,UAAU,MAAMS;AAAA,cAChB,WAAW;AAAA,cACX,OAAOC;AAAA,YAAA,CACR;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IAAA,CACD;AAED,WAAO,MAAM;AACX,MAAAP,EAAG,KAAA;AAAA,IACL;AAAA,EACF,GAAG,CAACjB,GAAcC,GAAaC,CAAa,CAAC;AAE7C,QAAMuB,IAAY;AAAA,IAChB,QAAQ,iBAAiBzB,CAAY;AAAA,EAAA;AAGvC,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKrB;AAAA,MACL,WAAWF,IAAY,yBAAyBA,CAAS,KAAK;AAAA,MAC9D,OAAOsB;AAAA,MAEP,UAAA,gBAAAC,EAAC,WAAA,EAAQ,WAAU,oBACjB,4BAAC,OAAA,EAAI,KAAKnB,GAAU,WAAU,0BAC3B,UAAAoB,EAAS,IAAI5B,GAAU,CAAC6B,GAAOC,MAAU;AACxC,cAAMjB,IAAae,EAAS,MAAM5B,CAAQ,GACpC+B,IAAWD,IAAQlC,IAAiB,GACpCoC,IACJ3B,KAAiBA,EAAc,SAAS,IACpCA,EAAcyB,IAAQzB,EAAc,MAAM,IAC1C;AACN,eACE,gBAAAsB,EAACjC,EAAwB,UAAxB,EAAiC,OAAO,EAAE,SAAAqC,GAAS,OAAAC,KAClD,UAAA,gBAAAL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,QAAQd,IAAaiB,EAAA;AAAA,YAE7B,UAAAD;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAEJ,CAAC,GACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;ACzHO,SAASI,EAAUC,GAAqC;AAC7D,QAAM,EAAE,eAAeC,EAAA,IAAcD,GAC/BE,IAAUC,EAAW3C,CAAuB,GAC5CqC,IAAUK,GAAS,WAAW,GAC9BJ,IAAQG,KAAaC,GAAS,SAAS;AAE7C,SACE,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWK,IAAQ,cAAc,kBAAkBD,CAAO;AAAA,MAC1D,OAAOC,IAAQ,EAAE,iBAAiBA,MAAU;AAAA,MAE3C,wBAAcE,KAASA,EAAM,YAAY,OACxCA,EAAM,WAEN,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,UAAA,gBAAAX,EAAC,SAAI,WAAU,cAAc,sBAAYO,IAAQA,EAAM,SAAS,KAAA,CAAK;AAAA,UACrE,gBAAAP,EAAC,SAAI,WAAU,eAAe,uBAAaO,IAAQA,EAAM,UAAU,KAAA,CAAK;AAAA,QAAA,GAC1E;AAAA,QACA,gBAAAP,EAAC,SAAI,WAAU,gBAAgB,oBAAUO,IAAQA,EAAM,OAAO,KAAA,CAAK;AAAA,MAAA,EAAA,CACrE;AAAA,IAAA;AAAA,EAAA;AAIR;AC/BArC,EAAK,eAAeC,CAAa;AAM1B,SAAS0C,IAAyB;AACvC,EAAA/B,EAAU,MAAM;AACd,UAAMgC,IAAQ,IAAIC,EAAA;AAElB,WAAAD,EAAM,GAAG,UAAU3C,EAAc,MAAM,GAEvCD,EAAK,OAAO,IAAI,CAAC8C,MAAS;AACxB,MAAAF,EAAM,IAAIE,IAAO,GAAI;AAAA,IACvB,CAAC,GACD9C,EAAK,OAAO,aAAa,CAAC,GAE1BC,EAAc,cAAc,SAAS,MAAM;AAAA,MACzC,UAAU8C,GAAO;AACf,eAAI,UAAU,UAAU,OAAOA,KAAU,YACvCH,EAAM,SAASG,GAAO,EAAE,WAAW,IAAM,GAEpCH,EAAM;AAAA,MACf;AAAA,MACA,wBAAwB;AACtB,eAAO;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,QAAQ,OAAO;AAAA,QAAA;AAAA,MAEnB;AAAA,IAAA,CACD,GAEM,MAAM;AACX,MAAA5C,EAAK,OAAO,OAAO4C,EAAM,GAAG,GAC5BA,EAAM,QAAA;AAAA,IACR;AAAA,EACF,GAAG,CAAA,CAAE;AACP;"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "sticky-card-stack",
+  "version": "0.1.0",
+  "description": "React sticky card stack with GSAP ScrollTrigger and Lenis smooth scroll",
+  "type": "module",
+  "main": "./dist/scs.js",
+  "module": "./dist/scs.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/scs.js"
+    },
+    "./style.css": "./dist/scs.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "prepublishOnly": "npm run build:lib",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "gsap": "^3.14.2",
+    "lenis": "^1.3.17",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "gsap": ">=3.12",
+    "lenis": ">=1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "react",
+    "gsap",
+    "scroll-trigger",
+    "lenis",
+    "sticky",
+    "cards",
+    "scroll-animation"
+  ],
+  "license": "MIT"
+}