@lovince/motion 0.0.0-stage → 0.1.0

package/dist/scroll.js

@@ -0,0 +1,89 @@
+import { a as e, n as t, r as n, s as r } from "./targets-x7JiHhWI.js";
+import i from "lenis";
+//#region src/scroll/create-smooth-scroll.ts
+var a = /* @__PURE__ */ new Map(), o = (e) => {
+	if (typeof window > "u") return null;
+	let t = e.lenis?.wrapper;
+	return t === void 0 || t === window ? window : t instanceof Element ? t : window;
+}, s = (e, n, r) => {
+	let i = r.immediate === !0 ? "auto" : "smooth", a = r.offset ?? 0;
+	if (typeof n == "number") {
+		e.scrollTo({
+			top: n + a,
+			behavior: i
+		});
+		return;
+	}
+	let o = t(n)[0];
+	if (o === void 0) return;
+	let s = e instanceof Element ? e.getBoundingClientRect().top - e.scrollTop : -window.scrollY;
+	e.scrollTo({
+		top: o.getBoundingClientRect().top - s + a,
+		behavior: i
+	});
+}, c = (c = {}) => {
+	let l = o(c);
+	if (l === null) return {
+		lenis: () => null,
+		scrollTo: r,
+		stop: r,
+		start: r,
+		destroy: r
+	};
+	let u = a.get(l);
+	if (u === void 0) {
+		let t = c.respectReducedMotion !== !1, o = {
+			lenis: null,
+			stopDriver: r,
+			handles: 0,
+			release: r
+		}, s = () => {
+			if (o.lenis !== null) return;
+			let e = new i({
+				...c.lenis,
+				autoRaf: c.driver === void 0
+			});
+			o.lenis = e, o.stopDriver = c.driver?.start(e) ?? r;
+		}, d = () => {
+			o.stopDriver(), o.stopDriver = r, o.lenis?.destroy(), o.lenis = null;
+		};
+		(!t || n() === "no-preference") && s();
+		let f = t ? e((e) => e === "reduce" ? d() : s()) : r;
+		o.release = () => {
+			f(), d();
+		}, a.set(l, o), u = o;
+	}
+	let d = u;
+	d.handles += 1;
+	let f = !1;
+	return {
+		lenis: () => d.lenis,
+		scrollTo: (e, r = {}) => {
+			let i = d.lenis;
+			if (i === null) {
+				s(l, e, {
+					...r,
+					immediate: r.immediate === !0 || n() === "reduce"
+				});
+				return;
+			}
+			let a = {
+				offset: r.offset ?? 0,
+				immediate: r.immediate === !0
+			};
+			if (typeof e == "number") {
+				i.scrollTo(e, a);
+				return;
+			}
+			let o = t(e)[0];
+			o instanceof HTMLElement && i.scrollTo(o, a);
+		},
+		stop: () => d.lenis?.stop(),
+		start: () => d.lenis?.start(),
+		destroy: () => {
+			f || (f = !0, --d.handles, !(d.handles > 0) && (d.release(), a.delete(l)));
+		}
+	};
+};
+//#endregion
+export { c as createSmoothScroll };

package/dist/split-text-Cnl9gkUu.js

@@ -0,0 +1,141 @@
+import { s as e } from "./dom-CK6FnKcV.js";
+//#region src/core/entrance.ts
+var t = (e) => ({
+	opacity: 0,
+	x: 0,
+	y: 0,
+	scale: 1,
+	clip: !1,
+	...e
+}), n = {
+	fade: t({}),
+	"fade-up": t({ y: 1 }),
+	"fade-down": t({ y: -1 }),
+	"slide-left": t({ x: 1 }),
+	"slide-right": t({ x: -1 }),
+	scale: t({ scale: .94 }),
+	clip: t({
+		opacity: 1,
+		clip: !0
+	})
+}, r = "inset(0% 0% 100% 0%)", i = "inset(0% 0% 0% 0%)", a = (t, i = "md") => {
+	let a = n[t], o = e(i);
+	return {
+		opacity: a.opacity,
+		x: a.x * o,
+		y: a.y * o,
+		scale: a.scale,
+		clipPath: a.clip ? r : null
+	};
+}, o = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0", s = (e) => /^\s+$/u.test(e), c = (e) => typeof Intl < "u" && "Segmenter" in Intl ? Array.from(new Intl.Segmenter(void 0, { granularity: "word" }).segment(e), (e) => ({
+	text: e.segment,
+	wordLike: e.isWordLike === !0
+})) : e.split(/(\s+)/u).filter((e) => e !== "").map((e) => ({
+	text: e,
+	wordLike: !s(e)
+})), l = (e) => {
+	let t = [], n = "", r = !1, i = () => {
+		n !== "" && t.push(n), n = "", r = !1;
+	};
+	for (let a of c(e)) {
+		if (s(a.text)) {
+			i(), t.push(a.text);
+			continue;
+		}
+		a.wordLike && r && i(), n += a.text, r ||= a.wordLike;
+	}
+	return i(), t;
+}, u = (e) => typeof Intl < "u" && "Segmenter" in Intl ? Array.from(new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(e), (e) => e.segment) : Array.from(e), d = (e, t, n) => {
+	let r = e.createElement("span");
+	return r.setAttribute("data-motion-split", t), r.style.display = t === "line" || t === "line-inner" ? "block" : "inline-block", n !== void 0 && (r.textContent = n), r;
+}, f = (e) => Array.from(e.childNodes).flatMap((e) => e instanceof Text ? e.data === "" ? [] : [e] : f(e)), p = (e) => {
+	let t = [], n = null;
+	for (let r of e) {
+		let e = r.offsetTop;
+		(n === null || Math.abs(e - n) > 1) && (t.push([]), n = e), t[t.length - 1]?.push(r);
+	}
+	return t;
+}, m = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), g = (e, t) => {
+	let n = e.ownerDocument, r = t.by ?? "words", i = Array.from(e.childNodes).every((e) => e instanceof Text) ? e.textContent ?? "" : null, a = [], c = [], g = [];
+	for (let t of f(e)) {
+		let e = l(t.data).map((e) => {
+			if (s(e)) return n.createTextNode(e);
+			if (r !== "chars") {
+				let t = d(n, "word", e);
+				return c.push(t), t;
+			}
+			let t = d(n, "word"), i = n.createElement("span");
+			i.setAttribute("style", o), i.textContent = e, t.append(i);
+			for (let r of u(e)) {
+				let e = d(n, "char", r);
+				e.setAttribute("aria-hidden", "true"), g.push(e), t.append(e);
+			}
+			return c.push(t), t;
+		});
+		t.replaceWith(...e), a.push({
+			node: t,
+			parts: e
+		});
+	}
+	let _ = r === "lines" ? p(c) : [], v = [];
+	if (r === "lines" && i !== null) {
+		let r = _.map((e) => {
+			let r = d(n, "line"), i = t.mask === !0 ? d(n, "line-inner") : r;
+			return t.mask === !0 && (r.style.overflow = "clip", r.append(i)), e.forEach((e, t) => {
+				t > 0 && i.append(n.createTextNode(" ")), i.append(e);
+			}), v.push(i), r;
+		});
+		e.replaceChildren(...r);
+	}
+	let y = {
+		words: c,
+		chars: g,
+		lines: v,
+		lineGroups: _,
+		revert: () => {
+			if (m.get(e) === y) {
+				if (m.delete(e), h.get(e) === y && h.delete(e), i !== null) {
+					e.textContent = i;
+					return;
+				}
+				for (let { node: e, parts: t } of a) {
+					let n = t[0];
+					if (n !== void 0 && n.parentNode !== null) {
+						n.parentNode.replaceChild(e, n);
+						for (let e of t.slice(1)) e.parentNode?.removeChild(e);
+					}
+				}
+			}
+		}
+	};
+	return m.set(e, y), y;
+}, _ = (e, t = {}) => {
+	h.get(e)?.revert();
+	let n = g(e, t);
+	if (t.by !== "lines" || typeof ResizeObserver > "u") return h.set(e, n), n;
+	let r = e.getBoundingClientRect().width, i = new ResizeObserver(() => {
+		let i = e.getBoundingClientRect().width;
+		Math.abs(i - r) < 1 || (r = i, n.revert(), n = g(e, t), t.onResplit?.(a));
+	});
+	i.observe(e);
+	let a = {
+		get words() {
+			return n.words;
+		},
+		get chars() {
+			return n.chars;
+		},
+		get lines() {
+			return n.lines;
+		},
+		get lineGroups() {
+			return n.lineGroups;
+		},
+		revert: () => {
+			i.disconnect(), n.revert(), h.get(e) === a && h.delete(e);
+		}
+	};
+	return h.set(e, a), a;
+};
+//#endregion
+export { a, n as i, r as n, i as r, _ as t };

package/dist/targets-x7JiHhWI.js

@@ -0,0 +1,49 @@
+//#region src/core/cleanup.ts
+var e = () => void 0, t = (e) => {
+	typeof globalThis.reportError == "function" ? globalThis.reportError(e) : queueMicrotask(() => {
+		throw e;
+	});
+}, n = (e) => {
+	try {
+		e();
+	} catch (e) {
+		t(e);
+	}
+}, r = () => {
+	let t = [], r = !1;
+	return {
+		add: (i) => {
+			if (r) return n(i), e;
+			let a = !1, o = () => {
+				if (a) return;
+				a = !0;
+				let e = t.indexOf(o);
+				e !== -1 && t.splice(e, 1), n(i);
+			};
+			return t.push(o), o;
+		},
+		dispose: () => {
+			if (!r) for (r = !0; t.length > 0;) t.pop()?.();
+		},
+		disposed: () => r
+	};
+}, i = "(prefers-reduced-motion: reduce)", a = () => typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia(i) : null, o = () => a()?.matches === !0 ? "reduce" : "no-preference", s = () => o() === "reduce", c = (t) => {
+	let n = a();
+	if (n === null) return e;
+	let r = () => t(n.matches ? "reduce" : "no-preference");
+	return n.addEventListener("change", r), () => n.removeEventListener("change", r);
+}, l = (e) => typeof Element < "u" && e instanceof Element, u = (e, t) => {
+	if (e == null) return [];
+	if (typeof e == "string") {
+		let n = t ?? (typeof document > "u" ? null : document);
+		if (n === null) return [];
+		try {
+			return Array.from(n.querySelectorAll(e));
+		} catch {
+			return [];
+		}
+	}
+	return l(e) ? [e] : [...new Set(Array.from(e).filter(l))];
+};
+//#endregion
+export { c as a, s as i, u as n, r as o, o as r, e as s, l as t };

package/dist/timeline-Cg3eq5ft.js

@@ -0,0 +1,60 @@
+import { a as e, t } from "./dom-CK6FnKcV.js";
+import { a as n, r } from "./split-text-Cnl9gkUu.js";
+import { gsap as i } from "gsap";
+import { ScrollTrigger as a } from "gsap/ScrollTrigger";
+//#region src/gsap/engine.ts
+var o = !1, s = () => (o ||= (i.registerPlugin(a), !0), a), c = (e) => e.root instanceof Element ? e.root : void 0, l = (e, t = "md") => {
+	let r = n(e, t), i = {
+		autoAlpha: r.opacity,
+		x: r.x,
+		y: r.y,
+		scale: r.scale
+	};
+	return r.clipPath !== null && (i.clipPath = r.clipPath), i;
+}, u = (e) => n(e).clipPath === null ? {
+	autoAlpha: 1,
+	x: 0,
+	y: 0,
+	scale: 1
+} : {
+	autoAlpha: 1,
+	x: 0,
+	y: 0,
+	scale: 1,
+	clipPath: r
+}, d = (e, t, n, r = {}) => e.fromTo(t, l(n, r.distance), {
+	...u(n),
+	...r.vars
+}, r.position), f = (n, r = {}) => {
+	let a = t(), o = null, l = 0, u = !1, d = e(r.context, (e) => {
+		let t = typeof r.scrollTrigger == "function" ? r.scrollTrigger(e) : r.scrollTrigger;
+		t != null && !e.reduced && s();
+		let d = i.context(() => {
+			let s = i.timeline({
+				...r.vars,
+				defaults: {
+					duration: e.config.duration,
+					ease: e.config.ease,
+					lazy: !1,
+					...r.vars?.defaults
+				},
+				...t == null || e.reduced ? {} : { scrollTrigger: t }
+			});
+			n(s, e), e.reduced ? s.progress(1).pause() : l > 0 && s.progress(l), s.then(() => a.settle("finished")), (e.reduced || s.progress() === 1) && a.settle("finished"), o = s;
+		}, c(e));
+		return u = !0, () => {
+			u = !1, l = o?.progress() ?? l, o = null, d.revert(), queueMicrotask(() => {
+				u || a.settle("cancelled");
+			});
+		};
+	});
+	return {
+		timeline: () => o,
+		finished: a.promise,
+		destroy: () => {
+			d(), a.settle("cancelled");
+		}
+	};
+};
+//#endregion
+export { c as a, u as i, d as n, s as o, l as r, f as t };

package/dist/vue/index.d.ts

@@ -0,0 +1,27 @@
+import { ComputedRef, Directive, Ref, ShallowRef } from 'vue';
+import { MotionContext } from '../core/context';
+import { Cleanup, EntranceName, MotionConfig } from '../core/types';
+import { RevealOptions } from '../css/reveal';
+/** Anything with a teardown: a cleanup function or an object with `destroy`. */
+export type Releasable = Cleanup | {
+    readonly destroy: Cleanup;
+};
+export type UseMotionOptions = {
+    /** A template ref for the component's root; selectors are scoped to it. */
+    readonly root?: Readonly<Ref<Element | null | undefined>>;
+    readonly config?: Partial<MotionConfig>;
+};
+/**
+ * A motion context owned by the component: created once mounted, so its
+ * elements exist, and destroyed on unmount, reverting everything set up in it.
+ * Nothing runs during server rendering.
+ */
+export declare const useMotion: (setup?: (context: MotionContext) => void, options?: UseMotionOptions) => ShallowRef<MotionContext | null>;
+/**
+ * Runs any motion setup for the component's lifetime — a smooth-scroll
+ * service, a page transition, a parallax — and releases it on unmount.
+ * Engine-agnostic, so this adapter never imports GSAP or Lenis itself.
+ */
+export declare const useMotionEffect: <T extends Releasable>(factory: () => T) => ComputedRef<T | null>;
+/** `v-reveal`, `v-reveal="'slide-left'"` or `v-reveal="{ effect: 'scale', once: false }"`. Needs the motion stylesheet. */
+export declare const vReveal: Directive<Element, EntranceName | Omit<RevealOptions, 'context'> | undefined>;

package/dist/vue.js

@@ -0,0 +1,33 @@
+import { i as e } from "./dom-CK6FnKcV.js";
+import { r as t } from "./reveal-By5zvLLc.js";
+import { computed as n, onBeforeUnmount as r, onMounted as i, shallowRef as a } from "vue";
+//#region src/vue/index.ts
+var o = (e) => typeof e == "function" ? e : e.destroy, s = (t, n = {}) => {
+	let o = a(null);
+	return i(() => {
+		let r = n.root?.value;
+		(n.root === void 0 || r != null) && (o.value = e({
+			root: r,
+			config: n.config
+		}), t?.(o.value));
+	}), r(() => {
+		o.value?.destroy(), o.value = null;
+	}), o;
+}, c = (e) => {
+	let t = a(0), s = null;
+	return i(() => {
+		s = e(), t.value += 1;
+	}), r(() => {
+		s !== null && o(s)(), s = null, t.value += 1;
+	}), n(() => t.value >= 0 ? s : null);
+}, l = /* @__PURE__ */ new WeakMap(), u = {
+	mounted: (e, n) => {
+		let r = n.value;
+		l.set(e, t(e, typeof r == "string" ? { effect: r } : r ?? {}));
+	},
+	beforeUnmount: (e) => {
+		l.get(e)?.(), l.delete(e);
+	}
+};
+//#endregion
+export { s as useMotion, c as useMotionEffect, u as vReveal };

package/package.json

@@ -1,6 +1,99 @@
 {
   "name": "@lovince/motion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A framework-agnostic motion system: native CSS reveals, managed GSAP timelines and scroll scenes, and Lenis smooth scrolling — with mandatory cleanup and reduced-motion handling.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Lovince Tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mac254/Lovince_product_journey.git",
+    "directory": "packages/motion"
+  },
+  "homepage": "https://github.com/Mac254/Lovince_product_journey#readme",
+  "bugs": {
+    "url": "https://github.com/Mac254/Lovince_product_journey/issues"
+  },
+  "keywords": [
+    "animation",
+    "motion",
+    "gsap",
+    "scrolltrigger",
+    "lenis",
+    "smooth-scroll",
+    "reduced-motion",
+    "accessibility"
+  ],
+  "files": [
+    "dist",
+    "styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./gsap": {
+      "types": "./dist/gsap/index.d.ts",
+      "import": "./dist/gsap.js"
+    },
+    "./scroll": {
+      "types": "./dist/scroll/index.d.ts",
+      "import": "./dist/scroll.js"
+    },
+    "./presets": {
+      "types": "./dist/presets/index.d.ts",
+      "import": "./dist/presets.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue.js"
+    },
+    "./styles.css": "./styles/motion.css",
+    "./tokens.css": "./styles/tokens.css",
+    "./utilities.css": "./styles/utilities.css",
+    "./presets.css": "./styles/presets.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@lovince/tokens": "^0.1.0"
+  },
+  "peerDependencies": {
+    "gsap": "",
+    "lenis": "",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "gsap": {
+      "optional": true
+    },
+    "lenis": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "gsap": "^3.15.0",
+    "lenis": "^1.3.27"
+  }
+}

package/styles/motion.css

@@ -0,0 +1,4 @@
+/* Everything: tokens, utilities and scroll-reveal presets. Import the parts on their own to take less. */
+@import './tokens.css';
+@import './utilities.css';
+@import './presets.css';

package/styles/presets.css

@@ -0,0 +1,58 @@
+/*
+ * Scroll reveals for `revealOnScroll` / `v-reveal`. An element is hidden only
+ * while `data-motion-state="hidden"` is set, which only the script does, so
+ * without JavaScript, or after cleanup, content is simply visible.
+ */
+
+[data-motion-reveal] {
+  transition-property: opacity, transform, clip-path;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-ease-emphasized);
+  transition-delay: var(--motion-delay, 0s);
+}
+
+[data-motion-reveal][data-motion-state='hidden'] {
+  opacity: 0;
+  transition-delay: 0s;
+}
+
+[data-motion-reveal='fade-up'][data-motion-state='hidden'] {
+  transform: translate3d(0, var(--motion-distance-md), 0);
+}
+
+[data-motion-reveal='fade-down'][data-motion-state='hidden'] {
+  transform: translate3d(0, calc(var(--motion-distance-md) * -1), 0);
+}
+
+[data-motion-reveal='slide-left'][data-motion-state='hidden'] {
+  transform: translate3d(var(--motion-distance-md), 0, 0);
+}
+
+[data-motion-reveal='slide-right'][data-motion-state='hidden'] {
+  transform: translate3d(calc(var(--motion-distance-md) * -1), 0, 0);
+}
+
+[data-motion-reveal='scale'][data-motion-state='hidden'] {
+  transform: scale(0.94);
+}
+
+[data-motion-reveal='clip'][data-motion-state='hidden'] {
+  opacity: 1;
+  clip-path: inset(0% 0% 100% 0%);
+}
+
+[data-motion-reveal='clip'][data-motion-state='visible'] {
+  clip-path: inset(0% 0% 0% 0%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-motion-reveal] {
+    transition: none;
+  }
+
+  [data-motion-reveal][data-motion-state='hidden'] {
+    opacity: 1;
+    transform: none;
+    clip-path: none;
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,23 @@
+/*
+ * Motion tokens: the spec's vocabulary, mapped onto the Lovince scales so CSS
+ * and JS motion share one source. JS reads the same values from
+ * @lovince/tokens (`defaultMotionConfig`, `motionDistance`).
+ */
+@import '@lovince/tokens/tokens.css';
+
+:root {
+  --motion-duration-instant: var(--lovince-duration-press);
+  --motion-duration-fast: var(--lovince-duration-fast);
+  --motion-duration-normal: var(--lovince-duration-state);
+  --motion-duration-slow: var(--lovince-duration-overlay);
+  --motion-duration-scene: var(--lovince-duration-travel);
+
+  --motion-ease-standard: var(--lovince-ease-standard);
+  --motion-ease-emphasized: var(--lovince-ease-emphasized);
+  --motion-ease-exit: var(--lovince-ease-in);
+  --motion-ease-reversible: var(--lovince-ease-in-out);
+
+  --motion-distance-sm: var(--lovince-space-3);
+  --motion-distance-md: var(--lovince-space-6);
+  --motion-distance-lg: var(--lovince-space-12);
+}