@sonordev/site-kit 5.0.0 → 5.3.0

package/dist/motion/Parallax.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
+/**
+ * Scroll-linked parallax with no animation library.
+ *
+ * The element's progress through the viewport (0 as its top enters at the
+ * bottom, 1 as its bottom leaves at the top) is mapped onto transform and
+ * opacity — compositor-only properties, so a page full of these never
+ * triggers layout or paint. Driven by the shared engine, so thirty of them
+ * cost one requestAnimationFrame.
+ *
+ * Server-rendered exactly as authored: no offset, no hidden state. Under
+ * prefers-reduced-motion nothing registers and the element stays put.
+ *
+ * Replaces the per-site ParallaxImage / ParallaxY components: wrap the
+ * image in an overflow-hidden frame and give <Parallax> a scale so the
+ * travel never shows the frame's edges.
+ */
+export interface ParallaxOptions {
+    /** Vertical travel in px as [at p=0, at p=1]. Default [40, -40]. */
+    y?: [number, number];
+    /** Horizontal travel in px. */
+    x?: [number, number];
+    /** Scale as [from, to]. */
+    scale?: [number, number];
+    /** Opacity as [from, to]. */
+    opacity?: [number, number];
+    /** Rotation in degrees as [from, to]. */
+    rotate?: [number, number];
+    /** Remap progress before it's applied (e.g. an ease-in-out). */
+    ease?: (p: number) => number;
+}
+export declare function useParallax(ref: RefObject<HTMLElement | null>, options?: ParallaxOptions): void;
+export interface ParallaxProps extends ParallaxOptions {
+    children?: ReactNode;
+    /** Element to render. Default "div". */
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+}
+export declare function Parallax({ children, as, className, style, id, ...options }: ParallaxProps): import("react").JSX.Element;
+//# sourceMappingURL=Parallax.d.ts.map

package/dist/motion/Parallax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Parallax.d.ts","sourceRoot":"","sources":["../../src/motion/Parallax.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,eAAe;IAC9B,oEAAoE;IACpE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpB,+BAA+B;IAC/B,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC1B,yCAAyC;IACzC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACzB,gEAAgE;IAChE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC7B;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI,CA+BnG;AAED,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wCAAwC;IACxC,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAU,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,+BASjG"}

package/dist/motion/Reveal.d.ts

@@ -0,0 +1,59 @@
+import { type CSSProperties, type ElementType, type ReactNode } from 'react';
+/**
+ * <Reveal> — scroll-entrance reveal with no animation library.
+ *
+ * The SEO contract, in order of importance:
+ *
+ * 1. The server HTML is fully visible. Nothing is hidden by a stylesheet or
+ *    an inline style at render time, so crawlers, no-JS visitors, and the
+ *    LCP measurement all see the finished page.
+ * 2. Above-the-fold content is never touched. On mount, one
+ *    IntersectionObserver pass asks whether the element is already on
+ *    screen; if it is, this component does nothing at all.
+ * 3. Only below-the-fold content is hidden (offscreen, so nobody sees the
+ *    swap) and revealed with a compositor-only CSS transition on opacity
+ *    and transform as it scrolls in.
+ * 4. A headless renderer that never scrolls gets the content back after
+ *    2.5s (see ./failsafe), so the indexed snapshot is never transparent.
+ * 5. prefers-reduced-motion disables all of it.
+ *
+ * Replaces the per-site Reveal / ScrollReveal / RevealOnScroll components.
+ */
+export type RevealDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+export interface RevealProps {
+    children?: ReactNode;
+    /** Element to render. Default "div". */
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    /** Where the element travels in from. Default "up" (starts lower). */
+    from?: RevealDirection;
+    /** Travel distance in px. Default 24. */
+    distance?: number;
+    /** Seconds before the transition starts. Default 0. */
+    delay?: number;
+    /** Transition length in seconds. Default 0.7. */
+    duration?: number;
+    /**
+     * Reveal the element's direct children one after another instead of the
+     * element itself. `true` = 0.08s apart; a number = that many seconds.
+     */
+    stagger?: boolean | number;
+    /** Play once (default) or re-hide when the element scrolls back out. */
+    once?: boolean;
+    /**
+     * How far up the viewport the element's top must travel before it
+     * reveals, as a fraction of viewport height. 0.15 (default) = reveal when
+     * the top crosses 85% down the screen.
+     */
+    threshold?: number;
+    /** Starting scale, e.g. 0.96. Off by default. */
+    scale?: number;
+    /** Starting opacity. Default 0. */
+    opacity?: number;
+    /** CSS easing. Default an ease-out-quint curve. */
+    easing?: string;
+}
+export declare function Reveal({ children, as, className, style, id, from, distance, delay, duration, stagger, once, threshold, scale, opacity, easing, }: RevealProps): import("react").JSX.Element;
+//# sourceMappingURL=Reveal.d.ts.map

package/dist/motion/Reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.d.ts","sourceRoot":"","sources":["../../src/motion/Reveal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/F;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAEvE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wCAAwC;IACxC,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,sEAAsE;IACtE,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAeD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,EAAU,EACV,SAAS,EACT,KAAK,EACL,EAAE,EACF,IAAW,EACX,QAAa,EACb,KAAS,EACT,QAAc,EACd,OAAe,EACf,IAAW,EACX,SAAgB,EAChB,KAAK,EACL,OAAW,EACX,MAAuB,GACxB,EAAE,WAAW,+BA2Gb"}

package/dist/motion/ScrollScene.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
+import { type SceneInfo, type SceneOptions } from './engine';
+/**
+ * A pinned scene: a tall wrapper with a sticky, viewport-sized stage inside
+ * it. As the visitor scrolls the wrapper's height, the stage stays put and
+ * the scene's progress runs 0 → 1. This is the unit of scroll cinema.
+ *
+ * What it does for you on every frame:
+ *   - writes progress to a CSS custom property on the wrapper (`--sk-p` by
+ *     default), so choreography can be pure CSS: `opacity: var(--sk-p)`,
+ *     `transform: translateX(calc(var(--sk-p) * -40vw))` — no per-frame JS.
+ *   - calls `onProgress(p, info)` for anything that needs code (canvas
+ *     frame-scrub, three.js, DOM measured moves).
+ *
+ * The children are server-rendered. A "use client" component still renders
+ * its children on the server when they arrive as props, so the copy inside
+ * a scene is in the HTML for crawlers and for first paint. What you must
+ * NOT do is load this (or a component containing it) through
+ * `dynamic(..., { ssr: false })` — that de-opts the whole subtree to client
+ * rendering and the copy disappears from the HTML.
+ */
+export interface UseScrollSceneOptions extends SceneOptions {
+    /** CSS custom property to write progress to. Default "--sk-p"; false to skip. */
+    cssVar?: string | false;
+}
+export declare function useScrollScene(ref: RefObject<HTMLElement | null>, onProgress?: (p: number, info: SceneInfo) => void, options?: UseScrollSceneOptions): void;
+export interface ScrollSceneProps extends Omit<UseScrollSceneOptions, 'mode'> {
+    children?: ReactNode;
+    /** Scroll length of the scene — the wrapper's height. Default "300vh". */
+    length?: string;
+    /** Wrapper element. Default "section". */
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    /** Class/style for the sticky stage that holds the children. */
+    stageClassName?: string;
+    stageStyle?: CSSProperties;
+    onProgress?: (p: number, info: SceneInfo) => void;
+}
+export declare function ScrollScene({ children, length, as, className, style, id, stageClassName, stageStyle, onProgress, continuous, reducedP, lerp, cssVar, }: ScrollSceneProps): import("react").JSX.Element;
+//# sourceMappingURL=ScrollScene.d.ts.map

package/dist/motion/ScrollScene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollScene.d.ts","sourceRoot":"","sources":["../../src/motion/ScrollScene.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA;AAE3E;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACxB;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,EACjD,OAAO,GAAE,qBAA0B,GAClC,IAAI,CAkBN;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0CAA0C;IAC1C,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CAClD;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAgB,EAChB,EAAc,EACd,SAAS,EACT,KAAK,EACL,EAAE,EACF,cAAc,EACd,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,MAAM,GACP,EAAE,gBAAgB,+BAqBlB"}

package/dist/motion/engine.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @sonordev/site-kit/motion — the scroll engine.
+ *
+ * One idea, applied everywhere: pin a scene, turn scroll into p in [0,1],
+ * render(p). Every motion primitive in this module (Reveal, Parallax,
+ * ScrollScene, the GSAP and three.js tiers) sits on this loop.
+ *
+ * Rules the engine enforces so every site inherits them:
+ *
+ * - Native scroll only. The wheel is never hijacked and the body is never
+ *   transformed; the liquid feel comes from each scene lerping its rendered
+ *   p toward the real scroll position.
+ * - One shared requestAnimationFrame loop drives every visible scene and
+ *   sleeps when everything has settled. A page with thirty parallax layers
+ *   costs one rAF, not thirty.
+ * - Offscreen scenes (beyond a 35% viewport margin) are not rendered at all.
+ * - prefers-reduced-motion holds each scene at a fixed representative frame
+ *   instead of scrubbing, and the loop stays asleep.
+ * - Nothing here touches the DOM at import time, so it is safe in any module
+ *   graph a server component reaches; scenes register from effects.
+ *
+ * Zero dependencies, ~2KB. Extracted from the upforgelabs.com engine
+ * (components/cinema/engine.ts) — that repo's docs/SCROLL-CINEMA.md is the
+ * full playbook for building scenes on top of it.
+ */
+export type SceneMode = 'pin' | 'view';
+export interface SceneInfo {
+    /** The un-smoothed progress the scene is easing toward. */
+    target: number;
+    /** False on the single frame rendered as the scene leaves the margin. */
+    visible: boolean;
+}
+export type SceneRender = (p: number, info: SceneInfo) => void;
+export interface SceneOptions {
+    /** Keep rendering every frame while visible (shader time, particles). */
+    continuous?: boolean;
+    /** Frame to hold under prefers-reduced-motion. Default 0.55. */
+    reducedP?: number;
+    /**
+     * "pin": progress across a tall sticky wrapper — 0 when its top reaches
+     * the top of the viewport, 1 when its bottom does (default).
+     * "view": progress of a normal block traveling through the viewport —
+     * 0 as its top enters at the bottom, 1 as its bottom leaves at the top.
+     */
+    mode?: SceneMode;
+    /**
+     * Per-frame interpolation toward the real scroll position, in (0, 1].
+     * Lower is more liquid, 1 is locked to the scrollbar. Default 0.16.
+     */
+    lerp?: number;
+}
+/**
+ * Pure progress math, exported so it can be unit-tested and reused by
+ * anything that wants the same mapping without registering a scene.
+ */
+export declare function sceneProgress(mode: SceneMode, top: number, height: number, scrollY: number, viewportHeight: number): number;
+/** True when the visitor asked for reduced motion. Always false on the server. */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Re-measure every scene and redraw. Call after a layout change the engine
+ * cannot see — an accordion opening above a scene, images without
+ * dimensions settling, a font swap outside document.fonts.
+ */
+export declare function refreshScenes(): void;
+/**
+ * Register a scene. Returns an unregister function for effect cleanup.
+ *
+ * `pin` is the element whose position drives progress: the tall wrapper of
+ * a sticky stage in "pin" mode, or the block itself in "view" mode. The
+ * callback runs only while the pin is within 35% of the viewport, plus one
+ * final frame as it leaves.
+ */
+export declare function registerScene(pin: HTMLElement, cb: SceneRender, opts?: SceneOptions): () => void;
+//# sourceMappingURL=engine.d.ts.map

package/dist/motion/engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../src/motion/engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,CAAA;AAEtC,MAAM,WAAW,SAAS;IACxB,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAA;IACd,yEAAyE;IACzE,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;AAE9D,MAAM,WAAW,YAAY;IAC3B,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AA0BD;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,SAAS,EACf,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,GACrB,MAAM,CAKR;AAiGD,kFAAkF;AAClF,wBAAgB,oBAAoB,IAAI,OAAO,CAI9C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,IAAI,CAIpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,GAAE,YAAiB,GACtB,MAAM,IAAI,CA+BZ"}

package/dist/motion/failsafe.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Renderer failsafe for scroll-entrance reveals.
+ *
+ * Headless renderers — Google's Web Rendering Service included — execute
+ * JavaScript but never scroll, so a scroll-triggered reveal would leave
+ * below-the-fold content transparent in the rendered snapshot that gets
+ * indexed. (Measured at ~85 transparent elements on one page before this
+ * guard existed.) If the visitor hasn't scrolled shortly after a reveal
+ * arms, we assume nobody is going to and show the content. Real visitors
+ * scroll well inside the window, so animations are unaffected.
+ *
+ * Single source of truth for every reveal system in the kit. Ported from
+ * upforge.io's lib/reveal-failsafe.
+ */
+/**
+ * Run `fn` after `ms` milliseconds unless the visitor scrolls first.
+ * Returns a cancel function for effect cleanups.
+ */
+export declare function onNoScroll(fn: () => void, ms?: number): () => void;
+//# sourceMappingURL=failsafe.d.ts.map

package/dist/motion/failsafe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"failsafe.d.ts","sourceRoot":"","sources":["../../src/motion/failsafe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAiBH;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,SAAO,GAAG,MAAM,IAAI,CAOhE"}

package/dist/motion/gsap.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @sonordev/site-kit/motion/gsap — the Upforge motion standard, tier 1.
+ *
+ * GSAP for the moments that earn it: sequenced timelines, SplitText,
+ * Flip, MorphSVG. Requires the optional peer `gsap` (all plugins are free
+ * since 3.13):
+ *
+ *     npm i gsap
+ *
+ * A site that never imports this subpath never installs gsap. NOTHING
+ * outside this file may import from 'gsap' — that is what keeps the tier
+ * boundary real (src/motion/motion.test.tsx enforces it).
+ *
+ * Cost and where it goes: gsap core + ScrollTrigger is ~46KB gzipped.
+ * `useGsap` loads it only when its element comes within 200px of the
+ * viewport, so it never sits on the LCP critical path, and it must only be
+ * used BELOW the fold. First-paint content renders static.
+ *
+ * Not included on purpose: ScrollSmoother. It drives scrolling by
+ * transforming the page body, which fights native scroll, costs INP on
+ * mobile, and breaks every scroll-geometry read on the page. The engine's
+ * per-scene lerp gives the liquid feel without hijacking anything.
+ */
+import { type DependencyList, type RefObject } from 'react';
+type GsapModule = typeof import('gsap');
+type ScrollTriggerModule = typeof import('gsap/ScrollTrigger');
+export type Gsap = GsapModule['gsap'];
+export type ScrollTriggerStatic = ScrollTriggerModule['ScrollTrigger'];
+export interface GsapBundle {
+    gsap: Gsap;
+    ScrollTrigger: ScrollTriggerStatic;
+}
+/**
+ * Load gsap + ScrollTrigger once, register the plugin, and share the
+ * promise. Safe to call from anywhere; resolves the same bundle every time.
+ */
+export declare function loadGsap(): Promise<GsapBundle>;
+export interface GsapSetupContext extends GsapBundle {
+    /** The element the hook is attached to — use it as the ScrollTrigger trigger and the selector scope. */
+    el: HTMLElement;
+}
+export interface UseGsapOptions {
+    /** Preload margin: load gsap when the element is this close. Default "200px 0px". */
+    near?: string;
+    /** "skip" (default) does nothing under prefers-reduced-motion; "run" lets setup decide. */
+    reducedMotion?: 'skip' | 'run';
+}
+/**
+ * Run a GSAP setup against an element, lazily and safely:
+ *
+ *   - gsap loads only when the element nears the viewport
+ *   - setup runs inside `gsap.context(el)`, so selectors are scoped and
+ *     everything it creates is reverted on unmount (including ScrollTriggers)
+ *   - the element must be server-rendered and visible; hide things inside
+ *     `setup` with `gsap.set`, never with a stylesheet
+ *
+ * @example
+ *   const ref = useRef<HTMLDivElement>(null)
+ *   useGsap(ref, ({ gsap, el }) => {
+ *     gsap.from(el.querySelectorAll('[data-line]'), {
+ *       yPercent: 100, opacity: 0, stagger: 0.06, duration: 0.8, ease: 'power3.out',
+ *       scrollTrigger: { trigger: el, start: 'top 80%' },
+ *     })
+ *   })
+ */
+export declare function useGsap(ref: RefObject<HTMLElement | null>, setup: (ctx: GsapSetupContext) => void | (() => void), deps?: DependencyList, options?: UseGsapOptions): void;
+export interface ExpandCollapseOptions {
+    duration?: number;
+    ease?: string;
+}
+/**
+ * Animate expand/collapse without mount/unmount. Content stays in the DOM
+ * (so it stays indexable) with overflow hidden; gsap animates height and
+ * opacity, and loads on the first toggle, not at mount.
+ *
+ * @example
+ *   const { contentRef } = useExpandCollapse(isOpen)
+ *   <div ref={contentRef}>{children}</div>
+ */
+export declare function useExpandCollapse(isOpen: boolean, options?: ExpandCollapseOptions): {
+    contentRef: RefObject<HTMLDivElement | null>;
+};
+export {};
+//# sourceMappingURL=gsap.d.ts.map

package/dist/motion/gsap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gsap.d.ts","sourceRoot":"","sources":["../../src/motion/gsap.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG9E,KAAK,UAAU,GAAG,cAAc,MAAM,CAAC,CAAA;AACvC,KAAK,mBAAmB,GAAG,cAAc,oBAAoB,CAAC,CAAA;AAE9D,MAAM,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,CAAC,CAAA;AACrC,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,IAAI,CAAA;IACV,aAAa,EAAE,mBAAmB,CAAA;CACnC;AAID;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAAC,UAAU,CAAC,CAU9C;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,wGAAwG;IACxG,EAAE,EAAE,WAAW,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CAC/B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CACrB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,KAAK,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,EACrD,IAAI,GAAE,cAAmB,EACzB,OAAO,GAAE,cAAmB,GAC3B,IAAI,CAqCN;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,qBAA0B,GAClC;IAAE,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAAE,CAiDlD"}

package/dist/motion/gsap.js

@@ -0,0 +1,103 @@
+'use client';
+'use strict';
+
+var chunkAEW7EFYU_js = require('../chunk-AEW7EFYU.js');
+require('../chunk-SNAQBZPT.js');
+var react = require('react');
+
+var pending = null;
+function loadGsap() {
+  if (!pending) {
+    pending = Promise.all([import('gsap'), import('gsap/ScrollTrigger')]).then(([g, st]) => {
+      const gsap = g.gsap ?? g.default;
+      const ScrollTrigger = st.ScrollTrigger ?? st.default;
+      gsap.registerPlugin(ScrollTrigger);
+      return { gsap, ScrollTrigger };
+    });
+  }
+  return pending;
+}
+function useGsap(ref, setup, deps = [], options = {}) {
+  const setupRef = react.useRef(setup);
+  setupRef.current = setup;
+  const { near = "200px 0px", reducedMotion = "skip" } = options;
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (reducedMotion === "skip" && chunkAEW7EFYU_js.prefersReducedMotion()) return;
+    let cancelled = false;
+    let cleanup;
+    let ctx;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        io.disconnect();
+        loadGsap().then(({ gsap, ScrollTrigger }) => {
+          if (cancelled || !el.isConnected) return;
+          ctx = gsap.context(() => {
+            cleanup = setupRef.current({ gsap, ScrollTrigger, el });
+          }, el);
+        });
+      },
+      { rootMargin: near }
+    );
+    io.observe(el);
+    return () => {
+      cancelled = true;
+      io.disconnect();
+      if (typeof cleanup === "function") cleanup();
+      ctx?.revert();
+    };
+  }, [ref, near, reducedMotion, ...deps]);
+}
+function useExpandCollapse(isOpen, options = {}) {
+  const { duration = 0.3, ease = "power2.inOut" } = options;
+  const contentRef = react.useRef(null);
+  const initialized = react.useRef(false);
+  react.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (!initialized.current) {
+      initialized.current = true;
+      el.style.overflow = "hidden";
+      if (!isOpen) {
+        el.style.height = "0px";
+        el.style.opacity = "0";
+      }
+      return;
+    }
+    let cancelled = false;
+    loadGsap().then(({ gsap }) => {
+      if (cancelled || !el.isConnected) return;
+      if (chunkAEW7EFYU_js.prefersReducedMotion()) {
+        gsap.set(el, { height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 });
+        el.style.overflow = isOpen ? "visible" : "hidden";
+        return;
+      }
+      if (isOpen) {
+        gsap.to(el, {
+          height: "auto",
+          opacity: 1,
+          duration,
+          ease,
+          onComplete() {
+            el.style.overflow = "visible";
+          }
+        });
+      } else {
+        el.style.overflow = "hidden";
+        gsap.to(el, { height: 0, opacity: 0, duration: duration * 0.85, ease });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, duration, ease]);
+  return { contentRef };
+}
+
+exports.loadGsap = loadGsap;
+exports.useExpandCollapse = useExpandCollapse;
+exports.useGsap = useGsap;
+//# sourceMappingURL=gsap.js.map
+//# sourceMappingURL=gsap.js.map

package/dist/motion/gsap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/motion/gsap.ts"],"names":["useRef","useEffect","prefersReducedMotion"],"mappings":"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","file":"gsap.js","sourcesContent":["/**\n * @sonordev/site-kit/motion/gsap — the Upforge motion standard, tier 1.\n *\n * GSAP for the moments that earn it: sequenced timelines, SplitText,\n * Flip, MorphSVG. Requires the optional peer `gsap` (all plugins are free\n * since 3.13):\n *\n *     npm i gsap\n *\n * A site that never imports this subpath never installs gsap. NOTHING\n * outside this file may import from 'gsap' — that is what keeps the tier\n * boundary real (src/motion/motion.test.tsx enforces it).\n *\n * Cost and where it goes: gsap core + ScrollTrigger is ~46KB gzipped.\n * `useGsap` loads it only when its element comes within 200px of the\n * viewport, so it never sits on the LCP critical path, and it must only be\n * used BELOW the fold. First-paint content renders static.\n *\n * Not included on purpose: ScrollSmoother. It drives scrolling by\n * transforming the page body, which fights native scroll, costs INP on\n * mobile, and breaks every scroll-geometry read on the page. The engine's\n * per-scene lerp gives the liquid feel without hijacking anything.\n */\n\n'use client'\n\nimport { useEffect, useRef, type DependencyList, type RefObject } from 'react'\nimport { prefersReducedMotion } from './engine'\n\ntype GsapModule = typeof import('gsap')\ntype ScrollTriggerModule = typeof import('gsap/ScrollTrigger')\n\nexport type Gsap = GsapModule['gsap']\nexport type ScrollTriggerStatic = ScrollTriggerModule['ScrollTrigger']\n\nexport interface GsapBundle {\n  gsap: Gsap\n  ScrollTrigger: ScrollTriggerStatic\n}\n\nlet pending: Promise<GsapBundle> | null = null\n\n/**\n * Load gsap + ScrollTrigger once, register the plugin, and share the\n * promise. Safe to call from anywhere; resolves the same bundle every time.\n */\nexport function loadGsap(): Promise<GsapBundle> {\n  if (!pending) {\n    pending = Promise.all([import('gsap'), import('gsap/ScrollTrigger')]).then(([g, st]) => {\n      const gsap = g.gsap ?? g.default\n      const ScrollTrigger = st.ScrollTrigger ?? st.default\n      gsap.registerPlugin(ScrollTrigger)\n      return { gsap, ScrollTrigger }\n    })\n  }\n  return pending\n}\n\nexport interface GsapSetupContext extends GsapBundle {\n  /** The element the hook is attached to — use it as the ScrollTrigger trigger and the selector scope. */\n  el: HTMLElement\n}\n\nexport interface UseGsapOptions {\n  /** Preload margin: load gsap when the element is this close. Default \"200px 0px\". */\n  near?: string\n  /** \"skip\" (default) does nothing under prefers-reduced-motion; \"run\" lets setup decide. */\n  reducedMotion?: 'skip' | 'run'\n}\n\n/**\n * Run a GSAP setup against an element, lazily and safely:\n *\n *   - gsap loads only when the element nears the viewport\n *   - setup runs inside `gsap.context(el)`, so selectors are scoped and\n *     everything it creates is reverted on unmount (including ScrollTriggers)\n *   - the element must be server-rendered and visible; hide things inside\n *     `setup` with `gsap.set`, never with a stylesheet\n *\n * @example\n *   const ref = useRef<HTMLDivElement>(null)\n *   useGsap(ref, ({ gsap, el }) => {\n *     gsap.from(el.querySelectorAll('[data-line]'), {\n *       yPercent: 100, opacity: 0, stagger: 0.06, duration: 0.8, ease: 'power3.out',\n *       scrollTrigger: { trigger: el, start: 'top 80%' },\n *     })\n *   })\n */\nexport function useGsap(\n  ref: RefObject<HTMLElement | null>,\n  setup: (ctx: GsapSetupContext) => void | (() => void),\n  deps: DependencyList = [],\n  options: UseGsapOptions = {},\n): void {\n  const setupRef = useRef(setup)\n  setupRef.current = setup\n  const { near = '200px 0px', reducedMotion = 'skip' } = options\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    if (reducedMotion === 'skip' && prefersReducedMotion()) return\n\n    let cancelled = false\n    let cleanup: (() => void) | void\n    let ctx: ReturnType<Gsap['context']> | undefined\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return\n        io.disconnect()\n        loadGsap().then(({ gsap, ScrollTrigger }) => {\n          if (cancelled || !el.isConnected) return\n          ctx = gsap.context(() => {\n            cleanup = setupRef.current({ gsap, ScrollTrigger, el })\n          }, el)\n        })\n      },\n      { rootMargin: near },\n    )\n    io.observe(el)\n\n    return () => {\n      cancelled = true\n      io.disconnect()\n      if (typeof cleanup === 'function') cleanup()\n      ctx?.revert()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, near, reducedMotion, ...deps])\n}\n\nexport interface ExpandCollapseOptions {\n  duration?: number\n  ease?: string\n}\n\n/**\n * Animate expand/collapse without mount/unmount. Content stays in the DOM\n * (so it stays indexable) with overflow hidden; gsap animates height and\n * opacity, and loads on the first toggle, not at mount.\n *\n * @example\n *   const { contentRef } = useExpandCollapse(isOpen)\n *   <div ref={contentRef}>{children}</div>\n */\nexport function useExpandCollapse(\n  isOpen: boolean,\n  options: ExpandCollapseOptions = {},\n): { contentRef: RefObject<HTMLDivElement | null> } {\n  const { duration = 0.3, ease = 'power2.inOut' } = options\n  const contentRef = useRef<HTMLDivElement>(null)\n  const initialized = useRef(false)\n\n  useEffect(() => {\n    const el = contentRef.current\n    if (!el) return\n\n    // First render: set the resting state with inline styles, no gsap.\n    if (!initialized.current) {\n      initialized.current = true\n      el.style.overflow = 'hidden'\n      if (!isOpen) {\n        el.style.height = '0px'\n        el.style.opacity = '0'\n      }\n      return\n    }\n\n    let cancelled = false\n    loadGsap().then(({ gsap }) => {\n      if (cancelled || !el.isConnected) return\n      if (prefersReducedMotion()) {\n        gsap.set(el, { height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0 })\n        el.style.overflow = isOpen ? 'visible' : 'hidden'\n        return\n      }\n      if (isOpen) {\n        gsap.to(el, {\n          height: 'auto',\n          opacity: 1,\n          duration,\n          ease,\n          onComplete() {\n            el.style.overflow = 'visible'\n          },\n        })\n      } else {\n        el.style.overflow = 'hidden'\n        gsap.to(el, { height: 0, opacity: 0, duration: duration * 0.85, ease })\n      }\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [isOpen, duration, ease])\n\n  return { contentRef }\n}\n"]}

package/dist/motion/gsap.mjs

@@ -0,0 +1,99 @@
+'use client';
+import { prefersReducedMotion } from '../chunk-MLXUMVBK.mjs';
+import '../chunk-BEXTDHO4.mjs';
+import { useRef, useEffect } from 'react';
+
+var pending = null;
+function loadGsap() {
+  if (!pending) {
+    pending = Promise.all([import('gsap'), import('gsap/ScrollTrigger')]).then(([g, st]) => {
+      const gsap = g.gsap ?? g.default;
+      const ScrollTrigger = st.ScrollTrigger ?? st.default;
+      gsap.registerPlugin(ScrollTrigger);
+      return { gsap, ScrollTrigger };
+    });
+  }
+  return pending;
+}
+function useGsap(ref, setup, deps = [], options = {}) {
+  const setupRef = useRef(setup);
+  setupRef.current = setup;
+  const { near = "200px 0px", reducedMotion = "skip" } = options;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (reducedMotion === "skip" && prefersReducedMotion()) return;
+    let cancelled = false;
+    let cleanup;
+    let ctx;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        io.disconnect();
+        loadGsap().then(({ gsap, ScrollTrigger }) => {
+          if (cancelled || !el.isConnected) return;
+          ctx = gsap.context(() => {
+            cleanup = setupRef.current({ gsap, ScrollTrigger, el });
+          }, el);
+        });
+      },
+      { rootMargin: near }
+    );
+    io.observe(el);
+    return () => {
+      cancelled = true;
+      io.disconnect();
+      if (typeof cleanup === "function") cleanup();
+      ctx?.revert();
+    };
+  }, [ref, near, reducedMotion, ...deps]);
+}
+function useExpandCollapse(isOpen, options = {}) {
+  const { duration = 0.3, ease = "power2.inOut" } = options;
+  const contentRef = useRef(null);
+  const initialized = useRef(false);
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (!initialized.current) {
+      initialized.current = true;
+      el.style.overflow = "hidden";
+      if (!isOpen) {
+        el.style.height = "0px";
+        el.style.opacity = "0";
+      }
+      return;
+    }
+    let cancelled = false;
+    loadGsap().then(({ gsap }) => {
+      if (cancelled || !el.isConnected) return;
+      if (prefersReducedMotion()) {
+        gsap.set(el, { height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 });
+        el.style.overflow = isOpen ? "visible" : "hidden";
+        return;
+      }
+      if (isOpen) {
+        gsap.to(el, {
+          height: "auto",
+          opacity: 1,
+          duration,
+          ease,
+          onComplete() {
+            el.style.overflow = "visible";
+          }
+        });
+      } else {
+        el.style.overflow = "hidden";
+        gsap.to(el, { height: 0, opacity: 0, duration: duration * 0.85, ease });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, duration, ease]);
+  return { contentRef };
+}
+
+export { loadGsap, useExpandCollapse, useGsap };
+//# sourceMappingURL=gsap.mjs.map
+//# sourceMappingURL=gsap.mjs.map

package/dist/motion/gsap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/motion/gsap.ts"],"names":[],"mappings":"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","file":"gsap.mjs","sourcesContent":["/**\n * @sonordev/site-kit/motion/gsap — the Upforge motion standard, tier 1.\n *\n * GSAP for the moments that earn it: sequenced timelines, SplitText,\n * Flip, MorphSVG. Requires the optional peer `gsap` (all plugins are free\n * since 3.13):\n *\n *     npm i gsap\n *\n * A site that never imports this subpath never installs gsap. NOTHING\n * outside this file may import from 'gsap' — that is what keeps the tier\n * boundary real (src/motion/motion.test.tsx enforces it).\n *\n * Cost and where it goes: gsap core + ScrollTrigger is ~46KB gzipped.\n * `useGsap` loads it only when its element comes within 200px of the\n * viewport, so it never sits on the LCP critical path, and it must only be\n * used BELOW the fold. First-paint content renders static.\n *\n * Not included on purpose: ScrollSmoother. It drives scrolling by\n * transforming the page body, which fights native scroll, costs INP on\n * mobile, and breaks every scroll-geometry read on the page. The engine's\n * per-scene lerp gives the liquid feel without hijacking anything.\n */\n\n'use client'\n\nimport { useEffect, useRef, type DependencyList, type RefObject } from 'react'\nimport { prefersReducedMotion } from './engine'\n\ntype GsapModule = typeof import('gsap')\ntype ScrollTriggerModule = typeof import('gsap/ScrollTrigger')\n\nexport type Gsap = GsapModule['gsap']\nexport type ScrollTriggerStatic = ScrollTriggerModule['ScrollTrigger']\n\nexport interface GsapBundle {\n  gsap: Gsap\n  ScrollTrigger: ScrollTriggerStatic\n}\n\nlet pending: Promise<GsapBundle> | null = null\n\n/**\n * Load gsap + ScrollTrigger once, register the plugin, and share the\n * promise. Safe to call from anywhere; resolves the same bundle every time.\n */\nexport function loadGsap(): Promise<GsapBundle> {\n  if (!pending) {\n    pending = Promise.all([import('gsap'), import('gsap/ScrollTrigger')]).then(([g, st]) => {\n      const gsap = g.gsap ?? g.default\n      const ScrollTrigger = st.ScrollTrigger ?? st.default\n      gsap.registerPlugin(ScrollTrigger)\n      return { gsap, ScrollTrigger }\n    })\n  }\n  return pending\n}\n\nexport interface GsapSetupContext extends GsapBundle {\n  /** The element the hook is attached to — use it as the ScrollTrigger trigger and the selector scope. */\n  el: HTMLElement\n}\n\nexport interface UseGsapOptions {\n  /** Preload margin: load gsap when the element is this close. Default \"200px 0px\". */\n  near?: string\n  /** \"skip\" (default) does nothing under prefers-reduced-motion; \"run\" lets setup decide. */\n  reducedMotion?: 'skip' | 'run'\n}\n\n/**\n * Run a GSAP setup against an element, lazily and safely:\n *\n *   - gsap loads only when the element nears the viewport\n *   - setup runs inside `gsap.context(el)`, so selectors are scoped and\n *     everything it creates is reverted on unmount (including ScrollTriggers)\n *   - the element must be server-rendered and visible; hide things inside\n *     `setup` with `gsap.set`, never with a stylesheet\n *\n * @example\n *   const ref = useRef<HTMLDivElement>(null)\n *   useGsap(ref, ({ gsap, el }) => {\n *     gsap.from(el.querySelectorAll('[data-line]'), {\n *       yPercent: 100, opacity: 0, stagger: 0.06, duration: 0.8, ease: 'power3.out',\n *       scrollTrigger: { trigger: el, start: 'top 80%' },\n *     })\n *   })\n */\nexport function useGsap(\n  ref: RefObject<HTMLElement | null>,\n  setup: (ctx: GsapSetupContext) => void | (() => void),\n  deps: DependencyList = [],\n  options: UseGsapOptions = {},\n): void {\n  const setupRef = useRef(setup)\n  setupRef.current = setup\n  const { near = '200px 0px', reducedMotion = 'skip' } = options\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    if (reducedMotion === 'skip' && prefersReducedMotion()) return\n\n    let cancelled = false\n    let cleanup: (() => void) | void\n    let ctx: ReturnType<Gsap['context']> | undefined\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return\n        io.disconnect()\n        loadGsap().then(({ gsap, ScrollTrigger }) => {\n          if (cancelled || !el.isConnected) return\n          ctx = gsap.context(() => {\n            cleanup = setupRef.current({ gsap, ScrollTrigger, el })\n          }, el)\n        })\n      },\n      { rootMargin: near },\n    )\n    io.observe(el)\n\n    return () => {\n      cancelled = true\n      io.disconnect()\n      if (typeof cleanup === 'function') cleanup()\n      ctx?.revert()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, near, reducedMotion, ...deps])\n}\n\nexport interface ExpandCollapseOptions {\n  duration?: number\n  ease?: string\n}\n\n/**\n * Animate expand/collapse without mount/unmount. Content stays in the DOM\n * (so it stays indexable) with overflow hidden; gsap animates height and\n * opacity, and loads on the first toggle, not at mount.\n *\n * @example\n *   const { contentRef } = useExpandCollapse(isOpen)\n *   <div ref={contentRef}>{children}</div>\n */\nexport function useExpandCollapse(\n  isOpen: boolean,\n  options: ExpandCollapseOptions = {},\n): { contentRef: RefObject<HTMLDivElement | null> } {\n  const { duration = 0.3, ease = 'power2.inOut' } = options\n  const contentRef = useRef<HTMLDivElement>(null)\n  const initialized = useRef(false)\n\n  useEffect(() => {\n    const el = contentRef.current\n    if (!el) return\n\n    // First render: set the resting state with inline styles, no gsap.\n    if (!initialized.current) {\n      initialized.current = true\n      el.style.overflow = 'hidden'\n      if (!isOpen) {\n        el.style.height = '0px'\n        el.style.opacity = '0'\n      }\n      return\n    }\n\n    let cancelled = false\n    loadGsap().then(({ gsap }) => {\n      if (cancelled || !el.isConnected) return\n      if (prefersReducedMotion()) {\n        gsap.set(el, { height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0 })\n        el.style.overflow = isOpen ? 'visible' : 'hidden'\n        return\n      }\n      if (isOpen) {\n        gsap.to(el, {\n          height: 'auto',\n          opacity: 1,\n          duration,\n          ease,\n          onComplete() {\n            el.style.overflow = 'visible'\n          },\n        })\n      } else {\n        el.style.overflow = 'hidden'\n        gsap.to(el, { height: 0, opacity: 0, duration: duration * 0.85, ease })\n      }\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [isOpen, duration, ease])\n\n  return { contentRef }\n}\n"]}

package/dist/motion/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @sonordev/site-kit/motion — the Upforge motion standard, tier 0.
+ *
+ * Highly interactive, lean, and designed from day one for SEO/AEO. This
+ * subpath has ZERO dependencies (~2KB) and is what every site gets:
+ *
+ *   <Reveal>        scroll-entrance reveal; server HTML always visible,
+ *                   above-the-fold untouched, headless-renderer failsafe
+ *   <Parallax>      scroll-linked transform/opacity, compositor-only
+ *   <ScrollScene>   a pinned scene: sticky stage, progress 0→1 as a CSS var
+ *   registerScene   the engine itself, for anything custom
+ *
+ * The heavier tiers are separate subpaths so a site that never imports
+ * them never installs or ships them:
+ *
+ *   @sonordev/site-kit/motion/gsap    GSAP timelines, lazy-loaded (peer: gsap)
+ *   @sonordev/site-kit/motion/three   WebGL stages on the engine (peer: three)
+ *
+ * Nothing in this module is mounted by SiteKitLayout. Motion is opt-in per
+ * element, never a wrapper around the page.
+ */
+export { registerScene, refreshScenes, prefersReducedMotion, sceneProgress, } from './engine';
+export type { SceneRender, SceneOptions, SceneInfo, SceneMode } from './engine';
+export { onNoScroll } from './failsafe';
+export { Reveal } from './Reveal';
+export type { RevealProps, RevealDirection } from './Reveal';
+export { Parallax, useParallax } from './Parallax';
+export type { ParallaxProps, ParallaxOptions } from './Parallax';
+export { ScrollScene, useScrollScene } from './ScrollScene';
+export type { ScrollSceneProps, UseScrollSceneOptions } from './ScrollScene';
+//# sourceMappingURL=index.d.ts.map

package/dist/motion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/motion/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EACL,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAClD,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA"}