@lovince/motion 0.0.0-stage → 0.1.0

package/dist/gsap/scroll-reveal.d.ts

@@ -0,0 +1,18 @@
+import { MotionContext } from '../core/context';
+import { Cleanup, DistanceName, EntranceName, MotionTarget } from '../core/types';
+export type ScrollRevealOptions = {
+    readonly context?: MotionContext;
+    readonly effect?: EntranceName;
+    readonly distance?: DistanceName;
+    readonly stagger?: number;
+    /** ScrollTrigger start, e.g. `top 85%`. */
+    readonly start?: string;
+    /** Hide again when scrolled back above, instead of revealing once. */
+    readonly repeat?: boolean;
+};
+/**
+ * Reveals elements in batches as they scroll in, so items entering together
+ * stagger as a group. For a plain one-time reveal with no GSAP at all, use
+ * `revealOnScroll` from the main entry. Under reduced motion nothing is hidden.
+ */
+export declare const createScrollReveal: (targets: MotionTarget, options?: ScrollRevealOptions) => Cleanup;

package/dist/gsap/split-text.d.ts

@@ -0,0 +1,27 @@
+import { Cleanup } from '../core/types';
+export type SplitBy = 'words' | 'chars' | 'lines';
+export type SplitOptions = {
+    readonly by?: SplitBy;
+    /**
+     * Lines only: wrap each line in a clipping box, so a line can slide up from
+     * behind its own edge. `lines` then holds the moving inner spans.
+     */
+    readonly mask?: boolean;
+    /** Lines only: called after the text re-splits for a new width, so animations can rebuild. */
+    readonly onResplit?: (split: SplitText) => void;
+};
+export type SplitText = {
+    readonly words: readonly HTMLElement[];
+    readonly chars: readonly HTMLElement[];
+    /** Line boxes; filled only when the element holds plain text, so no markup is ever restructured. */
+    readonly lines: readonly HTMLElement[];
+    /** Words grouped by rendered line; always available. */
+    readonly lineGroups: readonly (readonly HTMLElement[])[];
+    readonly revert: Cleanup;
+};
+/**
+ * Splits an element's text into spans for animation and puts it back on
+ * `revert`. Inline markup (links, emphasis) is kept. Line splits re-run when
+ * the element's width changes, since wrapping moves words between lines.
+ */
+export declare const splitText: (element: HTMLElement, options?: SplitOptions) => SplitText;

package/dist/gsap/stagger.d.ts

@@ -0,0 +1,15 @@
+import { MotionContext } from '../core/context';
+import { DistanceName, EntranceName, MotionTarget } from '../core/types';
+import { ManagedTimeline } from './timeline';
+export type StaggerOptions = {
+    readonly context?: MotionContext;
+    readonly effect?: EntranceName;
+    readonly distance?: DistanceName;
+    /** Seconds between items; defaults to the context's stagger. */
+    readonly stagger?: number;
+    readonly duration?: number;
+    /** Start when the first item scrolls into view instead of at once. */
+    readonly onScroll?: boolean;
+};
+/** Brings a collection in one after another, in document order. */
+export declare const createStagger: (targets: MotionTarget, options?: StaggerOptions) => ManagedTimeline;

package/dist/gsap/timeline.d.ts

@@ -0,0 +1,23 @@
+import { MotionContext, MotionScope } from '../core/context';
+import { Cleanup, MotionOutcome } from '../core/types';
+export type TimelineBuild = (timeline: gsap.core.Timeline, scope: MotionScope) => void;
+export type TimelineOptions = {
+    readonly context?: MotionContext;
+    readonly vars?: gsap.TimelineVars;
+    /** Drives the timeline from scroll. Dropped under reduced motion, where the timeline shows its end state instead. */
+    readonly scrollTrigger?: ScrollTrigger.Vars | ((scope: MotionScope) => ScrollTrigger.Vars | null);
+};
+export type ManagedTimeline = {
+    /** The live timeline, or null when there is none (reduced motion still builds one, at its end). */
+    readonly timeline: () => gsap.core.Timeline | null;
+    /** `finished` when it completes, `cancelled` when destroyed first. Never rejects. */
+    readonly finished: Promise<MotionOutcome>;
+    readonly destroy: Cleanup;
+};
+/**
+ * A GSAP timeline whose tweens are all reverted on destroy. Under reduced
+ * motion it jumps to its end state: the same final layout, with no movement.
+ * Its progress survives a change of preference, so a finished entrance is
+ * never replayed.
+ */
+export declare const createTimeline: (build: TimelineBuild, options?: TimelineOptions) => ManagedTimeline;

package/dist/gsap.js

@@ -0,0 +1,96 @@
+import { n as e } from "./targets-x7JiHhWI.js";
+import { a as t } from "./dom-CK6FnKcV.js";
+import { t as n } from "./split-text-Cnl9gkUu.js";
+import { a as r, i, n as a, o, r as s, t as c } from "./timeline-Cg3eq5ft.js";
+import { gsap as l } from "gsap";
+//#region src/gsap/horizontal-scroll.ts
+var u = (e) => Math.min(1, Math.max(0, e)), d = (n, r, i = {}) => t(i.context, (t) => {
+	let a = t.select(n)[0], s = a === void 0 ? void 0 : e(r, a)[0];
+	if (a === void 0 || s === void 0 || t.reduced) return;
+	o();
+	let c = l.matchMedia();
+	return c.add(`(min-width: ${i.minWidth ?? "48rem"})`, () => {
+		let e = () => Math.max(0, s.scrollWidth - a.clientWidth), t = l.to(s, {
+			x: () => -e(),
+			ease: "none",
+			scrollTrigger: {
+				trigger: a,
+				pin: !0,
+				start: "top top",
+				end: () => `+=${e()}`,
+				scrub: !0,
+				invalidateOnRefresh: !0
+			}
+		}), n = (n) => {
+			let r = t.scrollTrigger, i = n.target;
+			if (r === void 0 || !(i instanceof Element) || e() === 0) return;
+			let a = u((i.getBoundingClientRect().left - s.getBoundingClientRect().left) / e());
+			window.scrollTo({
+				top: r.start + a * (r.end - r.start),
+				behavior: "auto"
+			});
+		};
+		return s.addEventListener("focusin", n), () => s.removeEventListener("focusin", n);
+	}), () => c.revert();
+}), f = (e, n = {}) => t(n.context, (t) => {
+	let i = t.select(e);
+	if (i.length === 0 || t.reduced) return;
+	o();
+	let a = (n.speed ?? .15) * 50, s = n.axis === "x" ? "xPercent" : "yPercent", c = l.context(() => {
+		for (let e of i) l.fromTo(e, { [s]: a }, {
+			[s]: -a,
+			ease: "none",
+			scrollTrigger: {
+				trigger: e,
+				start: "top bottom",
+				end: "bottom top",
+				scrub: !0
+			}
+		});
+	}, r(t));
+	return () => c.revert();
+}), p = (e, n = {}) => t(n.context, (t) => {
+	let a = t.select(e);
+	if (a.length === 0 || t.reduced) return;
+	let c = n.effect ?? "fade-up", u = s(c, n.distance), d = o(), f = l.context(() => {
+		l.set(a, u), d.batch(a, {
+			start: n.start ?? "top 85%",
+			once: n.repeat !== !0,
+			onEnter: (e) => l.to(e, {
+				...i(c),
+				duration: t.config.duration,
+				ease: t.config.ease,
+				stagger: n.stagger ?? t.config.stagger,
+				overwrite: !0
+			}),
+			...n.repeat === !0 ? { onLeaveBack: (e) => l.set(e, u) } : {}
+		});
+	}, r(t));
+	return () => f.revert();
+}), m = (e, t = {}) => c((n, r) => {
+	let i = r.select(e);
+	i.length !== 0 && a(n, i, t.effect ?? "fade-up", {
+		distance: t.distance,
+		vars: {
+			stagger: t.stagger ?? r.config.stagger,
+			...t.duration === void 0 ? {} : { duration: t.duration }
+		}
+	});
+}, {
+	context: t.context,
+	scrollTrigger: t.onScroll === !0 ? (t) => {
+		let n = t.select(e)[0];
+		return n === void 0 ? null : {
+			trigger: n,
+			start: "top 85%",
+			once: !0
+		};
+	} : void 0
+}), h = 500, g = 33, _ = 0, v = () => ({ start: (e) => {
+	let t = o(), n = (t) => e.raf(t * 1e3), r = e.on("scroll", () => t.update());
+	return l.ticker.add(n), _ += 1, l.ticker.lagSmoothing(0), () => {
+		l.ticker.remove(n), r(), --_, _ === 0 && l.ticker.lagSmoothing(h, g);
+	};
+} });
+//#endregion
+export { a as addEntrance, d as createHorizontalScroll, f as createParallax, p as createScrollReveal, m as createStagger, c as createTimeline, s as entranceFrom, i as entranceTo, v as gsapScrollDriver, o as scrollTrigger, n as splitText };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './core';
+export * from './css';
+export * from './accessibility';
+export { splitText, type SplitBy, type SplitOptions, type SplitText } from './gsap/split-text';

package/dist/index.js

@@ -0,0 +1,75 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./targets-x7JiHhWI.js";
+import { a as s, c, i as l, l as u, n as d, o as f, s as p, t as m } from "./dom-CK6FnKcV.js";
+import { a as h, i as g, n as _, r as v, t as y } from "./split-text-Cnl9gkUu.js";
+import { n as b, r as x, t as S } from "./reveal-By5zvLLc.js";
+import { t as C } from "./focus-management-DTJ2C7Pn.js";
+//#region src/core/types.ts
+var w = [
+	"fade",
+	"fade-up",
+	"fade-down",
+	"slide-left",
+	"slide-right",
+	"scale",
+	"clip"
+], T = [
+	"sm",
+	"md",
+	"lg"
+], E = (e, t) => {
+	let n = h(e, t), r = `translate3d(${n.x}px, ${n.y}px, 0) scale(${n.scale})`;
+	return n.clipPath === null ? [{
+		opacity: n.opacity,
+		transform: r
+	}, {
+		opacity: 1,
+		transform: "none"
+	}] : [{
+		opacity: n.opacity,
+		transform: r,
+		clipPath: n.clipPath
+	}, {
+		opacity: 1,
+		transform: "none",
+		clipPath: v
+	}];
+}, D = (e, t = {}) => {
+	let n = m(), r = !1, i = s(t.context, (i) => {
+		if (n.settled()) return;
+		let a = i.select(e).filter((e) => typeof e.animate == "function");
+		if (i.reduced || a.length === 0) {
+			n.settle("finished");
+			return;
+		}
+		let o = t.duration ?? i.config.duration, s = t.stagger ?? i.config.stagger, c = E(t.effect ?? "fade-up", t.distance ?? "md"), l = a.map((e, n) => e.animate(c, {
+			duration: o * 1e3,
+			delay: ((t.delay ?? 0) + n * s) * 1e3,
+			easing: t.easing ?? d(i.config.ease),
+			fill: "backwards"
+		}));
+		return r = !0, Promise.all(l.map((e) => e.finished)).then(() => n.settle("finished"), () => void 0), () => {
+			r = !1;
+			for (let e of l) e.cancel();
+			queueMicrotask(() => {
+				r || n.settle("cancelled");
+			});
+		};
+	});
+	return {
+		finished: n.promise,
+		cancel: () => {
+			i(), n.settle("cancelled");
+		}
+	};
+}, O = (t) => {
+	let n = a, r = (e) => {
+		n(), n = e ? t() ?? a : a;
+	};
+	r(i() === "no-preference");
+	let o = e((e) => r(e === "no-preference"));
+	return () => {
+		o(), n(), n = a;
+	};
+};
+//#endregion
+export { _ as CLIP_HIDDEN, v as CLIP_SHOWN, T as DISTANCE_NAMES, g as ENTRANCES, w as ENTRANCE_NAMES, S as REVEAL_ATTR, b as STATE_ATTR, r as createDisposer, l as createMotion, d as cssEase, f as defaultMotionConfig, p as distancePx, D as fadeIn, C as focusTarget, i as getMotionPreference, o as isElement, c as motionDistance, a as noop, t as prefersReducedMotion, u as resolveConfig, h as resolveEntrance, n as resolveTargets, x as revealOnScroll, s as runInContext, y as splitText, e as watchMotionPreference, O as whenMotionAllowed };

package/dist/presets/entrance.d.ts

@@ -0,0 +1,20 @@
+import { MotionContext } from '../core/context';
+import { DistanceName, MotionTarget } from '../core/types';
+import { ManagedTimeline } from '../gsap/timeline';
+/** The parts of a hero, each optional. Children of `actions` enter one by one. */
+export type HeroParts = {
+    readonly label?: MotionTarget;
+    readonly heading?: MotionTarget;
+    readonly body?: MotionTarget;
+    readonly actions?: MotionTarget;
+    readonly media?: MotionTarget;
+};
+export type HeroOptions = {
+    readonly context?: MotionContext;
+    readonly distance?: DistanceName;
+};
+/**
+ * The hierarchy a reader takes in: label, heading, supporting text, actions,
+ * then media. Steps overlap so the whole hero reads as one entrance, not five.
+ */
+export declare const heroEntrance: (parts: HeroParts, options?: HeroOptions) => ManagedTimeline;

package/dist/presets/image.d.ts

@@ -0,0 +1,14 @@
+import { MotionContext } from '../core/context';
+import { Cleanup, MotionTarget } from '../core/types';
+export type ImageRevealOptions = {
+    readonly context?: MotionContext;
+    /** How far the image starts zoomed in; it settles to 1 as the frame opens. Keep it subtle. */
+    readonly scale?: number;
+    readonly onScroll?: boolean;
+};
+/**
+ * Opens a frame upward while the image inside settles from a slight zoom.
+ * Only `clip-path` on the frame and `transform` on the image change; the
+ * frame's first `img`, `picture` or `video` is the image, or the frame itself.
+ */
+export declare const revealImage: (targets: MotionTarget, options?: ImageRevealOptions) => Cleanup;

package/dist/presets/index.d.ts

@@ -0,0 +1,5 @@
+export { heroEntrance, type HeroOptions, type HeroParts } from './entrance';
+export { revealImage, type ImageRevealOptions } from './image';
+export { followState, type FollowStateOptions } from './navigation';
+export { createPageTransition, type PageTransition, type PageTransitionOptions, type TransitionBuild } from './page-transition';
+export { revealText, type TextRevealOptions } from './typography';

package/dist/presets/navigation.d.ts

@@ -0,0 +1,17 @@
+import { MotionContext } from '../core/context';
+import { Cleanup, MotionTarget } from '../core/types';
+export type FollowStateOptions = {
+    readonly context?: MotionContext;
+    /** The attribute that holds the real state, e.g. a menu's `data-state` or `aria-expanded`. */
+    readonly attribute?: string;
+    /** Where the element should be in each state. Unlisted states are left alone. */
+    readonly states: Readonly<Record<string, gsap.TweenVars>>;
+    readonly duration?: number;
+};
+/**
+ * Animates an element to match the state its attribute reports, and nothing
+ * else: the component owns the state, this only shows it. So a menu can never
+ * look open while it is closed for assistive technology. Reduced motion
+ * applies each state instantly.
+ */
+export declare const followState: (target: MotionTarget, options: FollowStateOptions) => Cleanup;

package/dist/presets/page-transition.d.ts

@@ -0,0 +1,26 @@
+import { MotionContext } from '../core/context';
+import { MotionOutcome, MotionTarget } from '../core/types';
+export type TransitionBuild = (timeline: gsap.core.Timeline, container: Element) => void;
+export type PageTransitionOptions = {
+    readonly context?: MotionContext;
+    readonly leave?: TransitionBuild;
+    readonly enter?: TransitionBuild;
+    /** Inside the entering container: where focus lands once it is in, e.g. `h1`. */
+    readonly focus?: MotionTarget;
+};
+export type PageTransition = {
+    /** Plays the exit. Resolves when done or interrupted, never hangs: a missing container resolves at once. */
+    readonly leave: (container: MotionTarget) => Promise<MotionOutcome>;
+    readonly enter: (container: MotionTarget) => Promise<MotionOutcome>;
+    /** Stops whatever is playing; its promise resolves `cancelled`. */
+    readonly cancel: () => void;
+    /** Cancels, and releases the context if this transition created it. */
+    readonly destroy: () => void;
+};
+/**
+ * Exit and entrance for route changes. Routers await `leave` before swapping
+ * pages and call `enter` after. Navigation is never held hostage: every call
+ * settles, starting a new one cancels the last, and reduced motion settles at
+ * once. After an entrance, focus moves into the new page.
+ */
+export declare const createPageTransition: (options?: PageTransitionOptions) => PageTransition;

package/dist/presets/typography.d.ts

@@ -0,0 +1,20 @@
+import { MotionContext } from '../core/context';
+import { Cleanup, DistanceName, EntranceName, MotionTarget } from '../core/types';
+import { SplitBy } from '../gsap/split-text';
+export type TextRevealOptions = {
+    readonly context?: MotionContext;
+    readonly by?: SplitBy;
+    /** Ignored for `lines`, which rise from behind their own clipping edge. */
+    readonly effect?: EntranceName;
+    readonly distance?: DistanceName;
+    /** Seconds between pieces; keep it short so the text reads as one entrance. */
+    readonly stagger?: number;
+    /** Start when the text scrolls into view. */
+    readonly onScroll?: boolean;
+};
+/**
+ * Reveals a heading or paragraph word by word, line by line, or letter by
+ * letter. Under reduced motion the text is never split. Line reveals rebuild
+ * when wrapping changes, picking up where they were.
+ */
+export declare const revealText: (target: MotionTarget, options?: TextRevealOptions) => Cleanup;

package/dist/presets.js

@@ -0,0 +1,138 @@
+import { n as e } from "./targets-x7JiHhWI.js";
+import { a as t, i as n, s as r, t as i } from "./dom-CK6FnKcV.js";
+import { n as a, r as o, t as s } from "./split-text-Cnl9gkUu.js";
+import { t as c } from "./focus-management-DTJ2C7Pn.js";
+import { a as l, i as u, n as d, o as f, r as p, t as m } from "./timeline-Cg3eq5ft.js";
+import { duration as h, ease as g } from "@lovince/tokens";
+import { gsap as _ } from "gsap";
+//#region src/presets/entrance.ts
+var v = (t, n = {}) => m((r, i) => {
+	let a = n.distance ?? "md", o = i.select(t.label), s = i.select(t.heading), c = i.select(t.body), l = i.select(t.actions).flatMap((t) => {
+		let n = e(t.children);
+		return n.length > 0 ? n : [t];
+	}), u = i.select(t.media), f = `-=${i.config.duration * .6}`;
+	o.length > 0 && d(r, o, "fade-up", { distance: "sm" }), s.length > 0 && d(r, s, "fade-up", {
+		distance: a,
+		position: o.length > 0 ? f : 0
+	}), c.length > 0 && d(r, c, "fade-up", {
+		distance: "sm",
+		position: f
+	}), l.length > 0 && d(r, l, "fade-up", {
+		distance: "sm",
+		vars: { stagger: i.config.stagger },
+		position: f
+	}), u.length > 0 && d(r, u, "scale", { position: f });
+}, { context: n.context }), y = (e, n = {}) => t(n.context, (t) => {
+	let r = t.select(e);
+	if (r.length === 0 || t.reduced) return;
+	n.onScroll !== !1 && f();
+	let i = _.context(() => {
+		for (let e of r) {
+			let r = e.querySelector("img, picture, video") ?? e, i = _.timeline({
+				defaults: {
+					duration: t.config.duration * 1.4,
+					ease: t.config.ease,
+					lazy: !1
+				},
+				...n.onScroll === !1 ? {} : { scrollTrigger: {
+					trigger: e,
+					start: "top 85%",
+					once: !0
+				} }
+			});
+			i.fromTo(e, { clipPath: a }, { clipPath: o }), r !== e && i.fromTo(r, { scale: n.scale ?? 1.12 }, { scale: 1 }, 0);
+		}
+	}, l(t));
+	return () => i.revert();
+}), b = (e, n) => t(n.context, (t) => {
+	let r = t.select(e)[0];
+	if (r === void 0) return;
+	let i = n.attribute ?? "data-state", a = r.getAttribute("style"), o = (e) => {
+		let a = n.states[r.getAttribute(i) ?? ""];
+		a !== void 0 && (e || t.reduced ? _.set(r, {
+			...a,
+			overwrite: !0
+		}) : _.to(r, {
+			duration: n.duration ?? t.config.duration,
+			ease: t.config.ease,
+			...a,
+			overwrite: !0
+		}));
+	};
+	o(!0);
+	let s = new MutationObserver(() => o(!1));
+	return s.observe(r, {
+		attributes: !0,
+		attributeFilter: [i]
+	}), () => {
+		s.disconnect(), _.killTweensOf(r), _.set(r, { clearProps: "all" }), a === null ? r.removeAttribute("style") : r.setAttribute("style", a);
+	};
+}), x = (e, t) => {
+	e.to(t, {
+		autoAlpha: 0,
+		y: -r("sm"),
+		duration: h.state,
+		ease: g.in.gsap
+	});
+}, S = (e, t) => {
+	d(e, t, "fade-up", { distance: "sm" });
+}, C = (t = {}) => {
+	let r = t.context ?? n(), a = null, o = (t, n, o) => {
+		a?.();
+		let s = i(), c = e(t)[0];
+		if (c === void 0 || r.destroyed()) return s.settle("finished"), s.promise;
+		let l = _.timeline({ defaults: {
+			duration: r.config.duration,
+			ease: r.config.ease,
+			lazy: !1
+		} });
+		n(l, c);
+		let u = !1, d = (e) => {
+			u || (u = !0, a = null, l.kill(), f(), e === "finished" && o?.(c), s.settle(e));
+		}, f = r.add(() => d("cancelled"));
+		return a = () => d("cancelled"), r.reduced() ? (l.progress(1), d("finished")) : l.then(() => d("finished")), s.promise;
+	};
+	return {
+		leave: (e) => o(e, t.leave ?? x),
+		enter: (n) => o(n, t.enter ?? S, (n) => {
+			t.focus !== void 0 && c(e(t.focus, n)[0]);
+		}),
+		cancel: () => a?.(),
+		destroy: () => {
+			a?.(), t.context === void 0 && r.destroy();
+		}
+	};
+}, w = (e, t) => t === "chars" ? e.chars : t === "lines" && e.lines.length > 0 ? e.lines : e.words, T = (e, n = {}) => {
+	let r = 0;
+	return t(n.context, (t) => {
+		let i = t.select(e)[0];
+		if (!(i instanceof HTMLElement) || t.reduced) return;
+		let a = n.by ?? "words", o = n.stagger ?? (a === "chars" ? .02 : a === "lines" ? t.config.stagger : .04), c = null, d = (e) => {
+			c !== null && (r = c.progress()), c?.revert();
+			let s = w(e, a), l = a === "lines" && e.lines.length > 0, d = l ? { yPercent: 100 } : p(n.effect ?? "fade-up", n.distance ?? "sm"), f = l ? { yPercent: 0 } : u(n.effect ?? "fade-up");
+			c = _.fromTo(s, d, {
+				...f,
+				duration: t.config.duration,
+				ease: t.config.ease,
+				stagger: o,
+				lazy: !1,
+				...n.onScroll === !0 ? { scrollTrigger: {
+					trigger: i,
+					start: "top 85%",
+					once: !0
+				} } : {}
+			}), r > 0 && c.progress(r);
+		};
+		n.onScroll === !0 && f();
+		let m = _.context(() => void 0, l(t)), h = s(i, {
+			by: a,
+			mask: a === "lines",
+			onResplit: (e) => m.add(() => d(e))
+		});
+		return m.add(() => d(h)), () => {
+			c !== null && (r = c.progress()), m.revert(), h.revert();
+		};
+	});
+};
+//#endregion
+export { C as createPageTransition, b as followState, v as heroEntrance, y as revealImage, T as revealText };

package/dist/reveal-By5zvLLc.js

@@ -0,0 +1,39 @@
+import { a as e, r as t } from "./dom-CK6FnKcV.js";
+//#region src/css/reveal.ts
+var n = "data-motion-reveal", r = "data-motion-state", i = (e, n) => {
+	let r = t(e);
+	n > 0 ? r?.setProperty("--motion-delay", `${n}s`) : r?.removeProperty("--motion-delay");
+}, a = (t, a = {}) => {
+	let { effect: o = "fade-up", once: s = !0, threshold: c = .15, rootMargin: l = "0px 0px -10% 0px" } = a, u = /* @__PURE__ */ new WeakSet();
+	return e(a.context, (e) => {
+		let d = e.select(t);
+		if (d.length === 0) return;
+		let f = a.stagger ?? e.config.stagger, p = d.filter((e) => !e.hasAttribute(n));
+		for (let e of p) e.setAttribute(n, o);
+		let m = () => {
+			for (let e of d) e.removeAttribute(r), i(e, 0);
+			for (let e of p) e.removeAttribute(n);
+		};
+		if (e.reduced || typeof IntersectionObserver > "u") {
+			for (let e of d) e.setAttribute(r, "visible");
+			return m;
+		}
+		let h = new IntersectionObserver((e) => {
+			if (e.filter((e) => e.isIntersecting).map((e) => e.target).sort((e, t) => d.indexOf(e) - d.indexOf(t)).forEach((e, t) => {
+				i(e, t * f), e.setAttribute(r, "visible"), u.add(e), s && h.unobserve(e);
+			}), !s) for (let t of e) t.isIntersecting || (i(t.target, 0), t.target.setAttribute(r, "hidden"));
+		}, {
+			threshold: c,
+			rootMargin: l
+		});
+		for (let e of d) {
+			let t = s && u.has(e);
+			e.setAttribute(r, t ? "visible" : "hidden"), t || h.observe(e);
+		}
+		return () => {
+			h.disconnect(), m();
+		};
+	});
+};
+//#endregion
+export { r as n, a as r, n as t };

package/dist/scroll/create-smooth-scroll.d.ts

@@ -0,0 +1,37 @@
+import { default as Lenis, LenisOptions } from 'lenis';
+import { Cleanup, MotionTarget } from '../core/types';
+/** Drives Lenis's clock. Without one, Lenis runs its own requestAnimationFrame loop. */
+export type SmoothScrollDriver = {
+    readonly start: (lenis: Lenis) => Cleanup;
+};
+export type SmoothScrollOptions = {
+    /** Passed to Lenis. `autoRaf` is decided here: on without a driver, off with one. */
+    readonly lenis?: Omit<LenisOptions, 'autoRaf'>;
+    /** Share one clock with another engine, e.g. `gsapScrollDriver()` from `@lovince/motion/gsap`. */
+    readonly driver?: SmoothScrollDriver;
+    /** Fall back to native scrolling for users who ask for reduced motion. On by default. */
+    readonly respectReducedMotion?: boolean;
+};
+export type ScrollToOptions = {
+    readonly offset?: number;
+    /** Jump without animating. Always true under reduced motion. */
+    readonly immediate?: boolean;
+};
+export type SmoothScroll = {
+    /** The Lenis instance, or null while scrolling is native. */
+    readonly lenis: () => Lenis | null;
+    readonly scrollTo: (target: number | MotionTarget, options?: ScrollToOptions) => void;
+    /** Pause and resume smooth scrolling, e.g. behind a modal. */
+    readonly stop: () => void;
+    readonly start: () => void;
+    /** Releases this handle; the instance is torn down when its last handle is. */
+    readonly destroy: Cleanup;
+};
+/**
+ * Smooth scrolling as a single, owned service. Calling it again for the same
+ * scroller shares the existing instance (options from the first call win);
+ * each handle must be destroyed, and the last one tears Lenis down. Under
+ * reduced motion there is no Lenis at all and the browser scrolls natively,
+ * switching live if the preference changes.
+ */
+export declare const createSmoothScroll: (options?: SmoothScrollOptions) => SmoothScroll;

package/dist/scroll/gsap-integration.d.ts

@@ -0,0 +1,8 @@
+import { SmoothScrollDriver } from './create-smooth-scroll';
+/**
+ * Runs Lenis on GSAP's ticker, so smooth scrolling and every tween share one
+ * frame loop, and keeps ScrollTrigger in step with Lenis's scroll position.
+ * Lag smoothing is off while driving, or a dropped frame would make scroll
+ * and scroll-linked animation disagree.
+ */
+export declare const gsapScrollDriver: () => SmoothScrollDriver;

package/dist/scroll/index.d.ts

@@ -0,0 +1 @@
+export { createSmoothScroll, type ScrollToOptions, type SmoothScroll, type SmoothScrollDriver, type SmoothScrollOptions, } from './create-smooth-scroll';