sticky-card-stack 0.1.5 → 0.1.7

package/README.md

@@ -8,7 +8,7 @@ React sticky card stack with GSAP ScrollTrigger and Lenis smooth scroll. Build a
 npm install sticky-card-stack
 ```
 
-Peer dependencies (install if you don’t have them):
+Peer dependencies (install if you don't have them):
 
 ```bash
 npm install react react-dom gsap lenis
@@ -18,52 +18,52 @@ npm install react react-dom gsap lenis
 
 1. **Import the library CSS once** (e.g. in your root entry or layout). Without this, cards will not be laid out or styled.
 2. Call **`useScrollTrigger()`** once at your app root (e.g. in your root layout or main component).
-3. Wrap your cards in **`StickCardStack`** and use **`StickCard`** for each card.
+3. Wrap your cards in **`StickyCardStack`** and use **`StickyCard`** for each card.
 
 ```tsx
-import { StickCardStack, StickCard, useScrollTrigger } from 'sticky-card-stack';
+import { StickyCardStack, StickyCard, useScrollTrigger } from 'sticky-card-stack';
 import 'sticky-card-stack/style.css';  // required
 
 function App() {
   useScrollTrigger();
 
   return (
-    <StickCardStack scrollHeight={8}>
-      <StickCard
+    <StickyCardStack scrollHeight={8}>
+      <StickyCard
         header={<h2>Card 1</h2>}
         content={<p>Content</p>}
         main={<img src="..." alt="" />}
       />
-      <StickCard
+      <StickyCard
         header={<h2>Card 2</h2>}
         content={<p>More content</p>}
         main={<img src="..." alt="" />}
       />
-    </StickCardStack>
+    </StickyCardStack>
   );
 }
 ```
 
-All library CSS classes use the **`scs-`** prefix (e.g. `scs-wrap`, `scs-stack`, `scs-card-demo`) so they won’t clash with your own styles. The stack works inside your own layout (e.g. a main column or grid); the CSS is scoped so it won’t be overridden by typical container styles.
+All library CSS classes use the **`scs-`** prefix (e.g. `scs-wrap`, `scs-stack`, `scs-card-demo`) so they won't clash with your own styles. The stack works inside your own layout (e.g. a main column or grid); the CSS is scoped so it won't be overridden by typical container styles.
 
 ## 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.
+Call once at the root of your app. Sets up Lenis smooth scroll and syncs it with GSAP ScrollTrigger. Required for `StickyCardStack` to work correctly.
 
-### `StickCardStack`
+### `StickyCardStack`
 
 | Prop            | Type       | Default | Description |
 |-----------------|------------|---------|-------------|
-| `children`      | `ReactNode`| —       | Card elements (e.g. `StickCard` components). |
+| `children`      | `ReactNode`| —       | Card elements (e.g. `StickyCard` 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`
+### `StickyCard`
 
 Each card can be used in two ways:
 
@@ -77,20 +77,18 @@ Shared prop:
 Example with custom layout:
 
 ```tsx
-<StickCard colorOverride="#1a1a2e">
+<StickyCard colorOverride="#1a1a2e">
   <div className="my-card">…</div>
-</StickCard>
+</StickyCard>
 ```
 
 ## TypeScript
 
 Exported types:
 
-- `StickCardStackProps`
-- `StickCardProps`
-- `StickCardPropsStructured`
-- `StickCardPropsChildren`
-- `STICK_CARD_STACK_DEFAULTS`
+- `StickyCardStackProps`
+- `StickyCardProps`
+- `STICKY_CARD_STACK_DEFAULTS`
 
 
 ## License

package/dist/index.d.ts

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

package/dist/lib/StickyCard.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { StickyCardProps } from './types';
+/**
+ * A single card for use inside StickyCardStack.
+ * Pass children; background uses context color from the stack.
+ */
+export declare function StickyCard({ children }: StickyCardProps): ReactElement;

package/dist/lib/StickyCardStack.d.ts

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

package/dist/lib/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-/** Props for the StickCardStack root component */
-export interface StickCardStackProps {
+/** Props for the StickyCardStack root component */
+export interface StickyCardStackProps {
     /** Card elements; each child is rendered as one stacked card */
     children: ReactNode;
     /**
@@ -27,31 +27,12 @@ export interface StickCardStackProps {
      */
     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 {
+/** Props for StickyCard: children only; color comes from StickyCardStack context. */
+export interface StickyCardProps {
     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: {
+/** Default values for StickyCardStack animation options */
+export declare const STICKY_CARD_STACK_DEFAULTS: {
     readonly scrollHeight: 8;
     readonly cardYOffset: 5;
     readonly cardScaleStep: 0.075;

package/dist/lib/useScrollTrigger.d.ts

@@ -1,5 +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.
+ * Call once at app root (e.g. in your root layout or App) when using StickyCardStack.
  */
 export declare function useScrollTrigger(): void;

package/dist/scs.css

@@ -1 +1 @@
-.scs-wrap{position:relative}.scs-wrap .scs-stack{position:sticky;top:0;height:100svh;width:100%;background-color:#e3e3db}.scs-wrap .scs-stack .scs-stack-inner{position:absolute;inset:0;perspective:850px}.scs-wrap .scs-stack .scs-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){.scs-wrap .scs-stack .scs-card{width:calc(100% - 4rem);height:75%}}.scs-wrap .scs-card-demo{display:flex;width:100%;height:100%;color:#fff;gap:1rem}.scs-wrap .scs-card-demo .scs-col{flex:1;height:100%}.scs-wrap .scs-card-demo .scs-col.scs-col-leading{display:flex;flex-direction:column;height:100%;padding:.5rem}.scs-wrap .scs-card-demo .scs-col-header{flex:0 0 20%;min-height:0}.scs-wrap .scs-card-demo .scs-col-content{margin-top:auto;flex:0 0 auto;max-height:22%;min-height:0}.scs-wrap .scs-card-demo .scs-col.scs-col-main{border-radius:.75rem;overflow:hidden}.scs-wrap .scs-card-demo.scs-card-1{background-color:#3d2fa9;z-index:5}.scs-wrap .scs-card-demo.scs-card-2{background-color:#f72;z-index:4}.scs-wrap .scs-card-demo.scs-card-3{background-color:#ff3d33;z-index:3}.scs-wrap .scs-card-demo.scs-card-4{background-color:#785f47;z-index:2}@media(max-width:1024px){.scs-wrap .scs-card-demo{flex-direction:column}.scs-wrap .scs-card-demo .scs-col{width:100%}}
+.scs-wrap{position:relative}.scs-wrap .scs-stack{position:sticky;top:0;height:100svh;width:100%}.scs-wrap .scs-stack .scs-stack-inner{position:absolute;inset:0;perspective:850px}.scs-wrap .scs-stack .scs-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){.scs-wrap .scs-stack .scs-card{width:calc(100% - 4rem);height:75%}}

package/dist/scs.js

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

package/dist/scs.js.map

@@ -1 +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>('.scs-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 ? `scs-wrap ${className}` : 'scs-wrap'}\n      style={wrapStyle}\n    >\n      <section className=\"scs-stack\">\n        <div ref={innerRef} className=\"scs-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=\"scs-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';\nimport './StickCard.css';\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 ? 'scs-card-demo' : `scs-card-demo scs-card-${variant}`}\n      style={color ? { backgroundColor: color } : undefined}\n    >\n      {'children' in props && props.children != null ? (\n        props.children\n      ) : (\n        <>\n          <div className=\"scs-col scs-col-leading\">\n            <div className=\"scs-col-header\">{'header' in props ? props.header : null}</div>\n            <div className=\"scs-col-content\">{'content' in props ? props.content : null}</div>\n          </div>\n          <div className=\"scs-col scs-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":"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"}
+{"version":3,"file":"scs.js","sources":["../src/lib/types.ts","../src/lib/StickyCardStack.tsx","../src/lib/StickyCard.tsx","../src/lib/useScrollTrigger.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Props for the StickyCardStack root component */\nexport interface StickyCardStackProps {\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/** Props for StickyCard: children only; color comes from StickyCardStack context. */\nexport interface StickyCardProps {\n  children: ReactNode;\n}\n\n/** Default values for StickyCardStack animation options */\nexport const STICKY_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 { StickyCardStackProps } from './types';\nimport { STICKY_CARD_STACK_DEFAULTS } from './types';\nimport './StickyCardStack.css';\n\n/** Injected by StickyCardStack: variant (1–4) and per-card color (from colorVariants or defaults). */\nexport interface StickyCardContextValue {\n  variant: number;\n  color: string;\n}\n\nconst DEFAULT_CARD_COLORS: readonly string[] = ['#3d2fa9', '#ff7722', '#ff3d33', '#785f47'];\nconst defaultContextValue: StickyCardContextValue = { variant: 1, color: DEFAULT_CARD_COLORS[0] };\nexport const StickyCardVariantContext = createContext<StickyCardContextValue>(defaultContextValue);\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 StickyCardStack({\n  children,\n  scrollHeight = STICKY_CARD_STACK_DEFAULTS.scrollHeight,\n  cardYOffset = STICKY_CARD_STACK_DEFAULTS.cardYOffset,\n  cardScaleStep = STICKY_CARD_STACK_DEFAULTS.cardScaleStep,\n  className,\n  colorVariants,\n}: StickyCardStackProps) {\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>('.scs-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 ? `scs-wrap ${className}` : 'scs-wrap'}\n      style={wrapStyle}\n    >\n      <section className=\"scs-stack\">\n        <div ref={innerRef} className=\"scs-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                : DEFAULT_CARD_COLORS[(index % VARIANT_COUNT)];\n            return (\n              <StickyCardVariantContext.Provider value={{ variant, color }}>\n                <div\n                  className=\"scs-card\"\n                  style={{ zIndex: totalCards - index }}\n                >\n                  {child}\n                </div>\n              </StickyCardVariantContext.Provider>\n            );\n          })}\n        </div>\n      </section>\n    </div>\n  );\n}\n","import { useContext, type ReactElement } from 'react';\nimport { StickyCardVariantContext } from './StickyCardStack';\nimport type { StickyCardProps } from './types';\n\n/**\n * A single card for use inside StickyCardStack.\n * Pass children; background uses context color from the stack.\n */\nexport function StickyCard({ children }: StickyCardProps): ReactElement {\n  const { color } = useContext(StickyCardVariantContext);\n  return (\n    <div style={{ backgroundColor: color, width: '100%', minHeight: '100%' }}>\n      {children}\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 StickyCardStack.\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":["STICKY_CARD_STACK_DEFAULTS","DEFAULT_CARD_COLORS","defaultContextValue","StickyCardVariantContext","createContext","VARIANT_COUNT","gsap","ScrollTrigger","StickyCardStack","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","StickyCard","useContext","useScrollTrigger","lenis","Lenis","time","value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sticky-card-stack",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "React sticky card stack with GSAP ScrollTrigger and Lenis smooth scroll",
   "type": "module",
   "main": "./dist/scs.js",

package/dist/lib/StickCard.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;