sticky-card-stack 0.1.6 → 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,18 +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`
-- `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 } 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,12 +27,12 @@ export interface StickCardStackProps {
      */
     colorVariants?: string[];
 }
-/** Props for StickCard: children only; color comes from StickCardStack context. */
-export interface StickCardProps {
+/** Props for StickyCard: children only; color comes from StickyCardStack context. */
+export interface StickyCardProps {
     children: ReactNode;
 }
-/** 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.js

@@ -3,18 +3,18 @@ import { createContext as L, useRef as x, useEffect as R, Children as T, useCont
 import e from "gsap";
 import { ScrollTrigger as a } from "gsap/ScrollTrigger";
 import U from "lenis";
-const w = {
+const S = {
   scrollHeight: 8,
   cardYOffset: 5,
   cardScaleStep: 0.075
 }, _ = ["#3d2fa9", "#ff7722", "#ff3d33", "#785f47"], X = { variant: 1, color: _[0] }, E = L(X), A = 4;
 e.registerPlugin(a);
-function j({
+function Y({
   children: t,
-  scrollHeight: r = w.scrollHeight,
-  cardYOffset: h = w.cardYOffset,
-  cardScaleStep: m = w.cardScaleStep,
-  className: y,
+  scrollHeight: r = S.scrollHeight,
+  cardYOffset: h = S.cardYOffset,
+  cardScaleStep: m = S.cardScaleStep,
+  className: w,
   colorVariants: d
 }) {
   const k = x(null), P = x(null);
@@ -40,20 +40,20 @@ function j({
           Math.floor(l / i),
           c - 1
         ), g = (l - f * i) / i;
-        s.forEach((C, S) => {
-          if (S < f)
+        s.forEach((C, y) => {
+          if (y < f)
             e.set(C, {
               yPercent: -250,
               rotationX: 35
             });
-          else if (S === f)
+          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 v = S - f, D = (v - g) * h, H = 1 - (v - g) * m;
+            const v = y - f, D = (v - g) * h, H = 1 - (v - g) * m;
             e.set(C, {
               yPercent: -50 + D,
               rotationX: 0,
@@ -74,7 +74,7 @@ function j({
     "div",
     {
       ref: k,
-      className: y ? `scs-wrap ${y}` : "scs-wrap",
+      className: w ? `scs-wrap ${w}` : "scs-wrap",
       style: I,
       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];
@@ -90,12 +90,12 @@ function j({
     }
   );
 }
-function q({ children: t }) {
+function j({ children: t }) {
   const { color: r } = O(E);
   return /* @__PURE__ */ o("div", { style: { backgroundColor: r, width: "100%", minHeight: "100%" }, children: t });
 }
 e.registerPlugin(a);
-function B() {
+function q() {
   R(() => {
     const t = new U();
     return t.on("scroll", a.update), e.ticker.add((r) => {
@@ -118,9 +118,9 @@ function B() {
   }, []);
 }
 export {
-  w as STICK_CARD_STACK_DEFAULTS,
-  q as StickCard,
-  j 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/** Props for StickCard: children only; color comes from StickCardStack context. */\nexport interface StickCardProps {\n  children: ReactNode;\n}\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 per-card color (from colorVariants or defaults). */\nexport interface StickCardContextValue {\n  variant: number;\n  color: string;\n}\n\nconst DEFAULT_CARD_COLORS: readonly string[] = ['#3d2fa9', '#ff7722', '#ff3d33', '#785f47'];\nconst defaultContextValue: StickCardContextValue = { variant: 1, color: DEFAULT_CARD_COLORS[0] };\nexport const StickCardVariantContext = createContext<StickCardContextValue>(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 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                : DEFAULT_CARD_COLORS[(index % VARIANT_COUNT)];\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 } from './types';\n\n/**\n * A single card for use inside StickCardStack.\n * Pass children; background uses context color from the stack.\n */\nexport function StickCard({ children }: StickCardProps): ReactElement {\n  const { color } = useContext(StickCardVariantContext);\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 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","DEFAULT_CARD_COLORS","defaultContextValue","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","useContext","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":";;;;;AAqCO,MAAMA,IAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,eAAe;AACjB,GC5BMC,IAAyC,CAAC,WAAW,WAAW,WAAW,SAAS,GACpFC,IAA8C,EAAE,SAAS,GAAG,OAAOD,EAAoB,CAAC,EAAA,GACjFE,IAA2BC,EAAsCF,CAAmB,GAE3FG,IAAgB;AAEtBC,EAAK,eAAeC,CAAa;AAM1B,SAASC,EAAgB;AAAA,EAC9B,UAAAC;AAAA,EACA,cAAAC,IAAeV,EAA2B;AAAA,EAC1C,aAAAW,IAAcX,EAA2B;AAAA,EACzC,eAAAY,IAAgBZ,EAA2B;AAAA,EAC3C,WAAAa;AAAA,EACA,eAAAC;AACF,GAAyB;AACvB,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,WAAW,GACvDE,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,YAAYA,CAAS,KAAK;AAAA,MACjD,OAAOsB;AAAA,MAEP,UAAA,gBAAAC,EAAC,WAAA,EAAQ,WAAU,aACjB,4BAAC,OAAA,EAAI,KAAKnB,GAAU,WAAU,mBAC3B,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,IAC1Cb,EAAqBsC,IAAQlC,CAAc;AACjD,eACE,gBAAA+B,EAACjC,EAAyB,UAAzB,EAAkC,OAAO,EAAE,SAAAqC,GAAS,OAAAC,KACnD,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;AChIO,SAASI,EAAW,EAAE,UAAAjC,KAA2C;AACtE,QAAM,EAAE,OAAAgC,EAAA,IAAUE,EAAWxC,CAAwB;AACrD,SACE,gBAAAiC,EAAC,OAAA,EAAI,OAAO,EAAE,iBAAiBK,GAAO,OAAO,QAAQ,WAAW,OAAA,GAC7D,UAAAhC,EAAA,CACH;AAEJ;ACVAH,EAAK,eAAeC,CAAa;AAM1B,SAASqC,IAAyB;AACvC,EAAA1B,EAAU,MAAM;AACd,UAAM2B,IAAQ,IAAIC,EAAA;AAElB,WAAAD,EAAM,GAAG,UAAUtC,EAAc,MAAM,GAEvCD,EAAK,OAAO,IAAI,CAACyC,MAAS;AACxB,MAAAF,EAAM,IAAIE,IAAO,GAAI;AAAA,IACvB,CAAC,GACDzC,EAAK,OAAO,aAAa,CAAC,GAE1BC,EAAc,cAAc,SAAS,MAAM;AAAA,MACzC,UAAUyC,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,MAAAvC,EAAK,OAAO,OAAOuC,EAAM,GAAG,GAC5BA,EAAM,QAAA;AAAA,IACR;AAAA,EACF,GAAG,CAAA,CAAE;AACP;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sticky-card-stack",
-  "version": "0.1.6",
+  "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,7 +0,0 @@
-import { ReactElement } from 'react';
-import { StickCardProps } from './types';
-/**
- * A single card for use inside StickCardStack.
- * Pass children; background uses context color from the stack.
- */
-export declare function StickCard({ children }: StickCardProps): ReactElement;

package/dist/lib/StickCardStack.d.ts

@@ -1,12 +0,0 @@
-import { StickCardStackProps } from './types';
-/** Injected by StickCardStack: variant (1–4) and per-card color (from colorVariants or defaults). */
-export interface StickCardContextValue {
-    variant: number;
-    color: string;
-}
-export declare const StickCardVariantContext: import('react').Context<StickCardContextValue>;
-/**
- * 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;