@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Samples/CellAnimation/Breakpoints/CellAnimationBreakpoints.const.js

@@ -0,0 +1,99 @@
+import { MathUtils } from "@thewaver/ss-utils";
+//#region src/Samples/CellAnimation/Breakpoints/CellAnimationBreakpoints.const.ts
+var CellAnimationBreakpoints;
+(function(_CellAnimationBreakpoints) {
+	_CellAnimationBreakpoints.DIRECTIONS = ["asc", "desc"];
+	_CellAnimationBreakpoints.EASINGS = [
+		"linear",
+		"ease",
+		"ease-in",
+		"ease-out",
+		"ease-in-out"
+	];
+	const DEFAULT_SMOOTHNESS = .25;
+	const DEFAULT_EASING = "linear";
+	const EASING_CONTROLS = {
+		"ease": [
+			.25,
+			.1,
+			.25,
+			1
+		],
+		"ease-in": [
+			.42,
+			0,
+			1,
+			1
+		],
+		"ease-out": [
+			0,
+			0,
+			.58,
+			1
+		],
+		"ease-in-out": [
+			.42,
+			0,
+			.58,
+			1
+		]
+	};
+	const NEWTON_ITERATIONS = 8;
+	const BISECTION_ITERATIONS = 16;
+	const SOLVE_EPSILON = 1e-6;
+	const computeAxis = (first, second) => {
+		const c = 3 * first;
+		const b = 3 * (second - first) - c;
+		return {
+			a: 1 - c - b,
+			b,
+			c
+		};
+	};
+	const computeCurve = ({ a, b, c }, t) => ((a * t + b) * t + c) * t;
+	const computeSlope = ({ a, b, c }, t) => (3 * a * t + 2 * b) * t + c;
+	const computeEasedRatio = (easing, ratio) => {
+		if (easing === DEFAULT_EASING) return ratio;
+		const [x1, y1, x2, y2] = EASING_CONTROLS[easing];
+		const x = computeAxis(x1, x2);
+		const y = computeAxis(y1, y2);
+		let t = ratio;
+		for (let step = 0; step < NEWTON_ITERATIONS; step++) {
+			const error = computeCurve(x, t) - ratio;
+			if (Math.abs(error) < SOLVE_EPSILON) return computeCurve(y, t);
+			const slope = computeSlope(x, t);
+			if (Math.abs(slope) < SOLVE_EPSILON) break;
+			t -= error / slope;
+		}
+		let low = 0;
+		let high = 1;
+		t = ratio;
+		for (let step = 0; step < BISECTION_ITERATIONS; step++) {
+			const error = computeCurve(x, t) - ratio;
+			if (Math.abs(error) < SOLVE_EPSILON) break;
+			if (error > 0) high = t;
+			else low = t;
+			t = (low + high) / 2;
+		}
+		return computeCurve(y, t);
+	};
+	_CellAnimationBreakpoints.computeBreakpoints = (weight, opts) => {
+		const directed = opts?.dir === "desc" ? weight : 1 - weight;
+		const progress = MathUtils.clamp01(directed);
+		const half = MathUtils.clamp01(opts?.smoothness ?? DEFAULT_SMOOTHNESS) * .5;
+		const start = progress * (1 - 2 * half);
+		return [
+			start,
+			start + half,
+			start + 2 * half
+		];
+	};
+	_CellAnimationBreakpoints.computeLocalTimeline = ([start, , end], timeline, easing = DEFAULT_EASING) => {
+		if (end <= start) return timeline >= end ? 1 : 0;
+		return computeEasedRatio(easing, MathUtils.clamp01(MathUtils.normalize(timeline, start, end)));
+	};
+})(CellAnimationBreakpoints || (CellAnimationBreakpoints = {}));
+//#endregion
+export { CellAnimationBreakpoints };
+
+//# sourceMappingURL=CellAnimationBreakpoints.const.js.map

package/dist/Samples/CellAnimation/Breakpoints/CellAnimationBreakpoints.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellAnimationBreakpoints.const.js","names":[],"sources":["../../../../src/Samples/CellAnimation/Breakpoints/CellAnimationBreakpoints.const.ts"],"sourcesContent":["import { MathUtils } from \"@thewaver/ss-utils\";\n\nexport namespace CellAnimationBreakpoints {\n    export const DIRECTIONS = [\"asc\", \"desc\"] as const;\n    export type Direction = (typeof DIRECTIONS)[number];\n\n    export const EASINGS = [\"linear\", \"ease\", \"ease-in\", \"ease-out\", \"ease-in-out\"] as const;\n    export type Easing = (typeof EASINGS)[number];\n\n    export type BreakpointOpts = {\n        dir?: Direction;\n        smoothness?: number;\n        easing?: Easing;\n    };\n\n    export type BreakpointTupleTriple = [start: number, middle: number, end: number];\n\n    const DEFAULT_SMOOTHNESS = 0.25;\n    const DEFAULT_EASING: Easing = \"linear\";\n\n    const EASING_CONTROLS: Record<Exclude<Easing, \"linear\">, [number, number, number, number]> = {\n        \"ease\": [0.25, 0.1, 0.25, 1],\n        \"ease-in\": [0.42, 0, 1, 1],\n        \"ease-out\": [0, 0, 0.58, 1],\n        \"ease-in-out\": [0.42, 0, 0.58, 1],\n    };\n\n    const NEWTON_ITERATIONS = 8;\n    const BISECTION_ITERATIONS = 16;\n    const SOLVE_EPSILON = 1e-6;\n\n    const computeAxis = (first: number, second: number) => {\n        const c = 3 * first;\n        const b = 3 * (second - first) - c;\n\n        return { a: 1 - c - b, b, c };\n    };\n\n    const computeCurve = ({ a, b, c }: { a: number; b: number; c: number }, t: number) => ((a * t + b) * t + c) * t;\n\n    const computeSlope = ({ a, b, c }: { a: number; b: number; c: number }, t: number) => (3 * a * t + 2 * b) * t + c;\n\n    const computeEasedRatio = (easing: Easing, ratio: number) => {\n        if (easing === DEFAULT_EASING) return ratio;\n\n        const [x1, y1, x2, y2] = EASING_CONTROLS[easing];\n        const x = computeAxis(x1, x2);\n        const y = computeAxis(y1, y2);\n\n        let t = ratio;\n\n        for (let step = 0; step < NEWTON_ITERATIONS; step++) {\n            const error = computeCurve(x, t) - ratio;\n\n            if (Math.abs(error) < SOLVE_EPSILON) return computeCurve(y, t);\n\n            const slope = computeSlope(x, t);\n\n            if (Math.abs(slope) < SOLVE_EPSILON) break;\n\n            t -= error / slope;\n        }\n\n        let low = 0;\n        let high = 1;\n\n        t = ratio;\n\n        for (let step = 0; step < BISECTION_ITERATIONS; step++) {\n            const error = computeCurve(x, t) - ratio;\n\n            if (Math.abs(error) < SOLVE_EPSILON) break;\n\n            if (error > 0) high = t;\n            else low = t;\n\n            t = (low + high) / 2;\n        }\n\n        return computeCurve(y, t);\n    };\n\n    export const computeBreakpoints = (weight: number, opts?: BreakpointOpts): BreakpointTupleTriple => {\n        const directed = opts?.dir === \"desc\" ? weight : 1 - weight;\n        const progress = MathUtils.clamp01(directed);\n        const half = MathUtils.clamp01(opts?.smoothness ?? DEFAULT_SMOOTHNESS) * 0.5;\n        const start = progress * (1 - 2 * half);\n\n        return [start, start + half, start + 2 * half];\n    };\n\n    export const computeLocalTimeline = (\n        [start, , end]: BreakpointTupleTriple,\n        timeline: number,\n        easing: Easing = DEFAULT_EASING,\n    ) => {\n        if (end <= start) return timeline >= end ? 1 : 0;\n\n        return computeEasedRatio(easing, MathUtils.clamp01(MathUtils.normalize(timeline, start, end)));\n    };\n}\n"],"mappings":";;AAEO,IAAU;CAAV,SAAA,2BAAA;CACU,0BAAA,aAAa,CAAC,OAAO,MAAM;CAG3B,0BAAA,UAAU;EAAC;EAAU;EAAQ;EAAW;EAAY;CAAa;CAW9E,MAAM,qBAAqB;CAC3B,MAAM,iBAAyB;CAE/B,MAAM,kBAAuF;EACzF,QAAQ;GAAC;GAAM;GAAK;GAAM;EAAC;EAC3B,WAAW;GAAC;GAAM;GAAG;GAAG;EAAC;EACzB,YAAY;GAAC;GAAG;GAAG;GAAM;EAAC;EAC1B,eAAe;GAAC;GAAM;GAAG;GAAM;EAAC;CACpC;CAEA,MAAM,oBAAoB;CAC1B,MAAM,uBAAuB;CAC7B,MAAM,gBAAgB;CAEtB,MAAM,eAAe,OAAe,WAAmB;EACnD,MAAM,IAAI,IAAI;EACd,MAAM,IAAI,KAAK,SAAS,SAAS;EAEjC,OAAO;GAAE,GAAG,IAAI,IAAI;GAAG;GAAG;EAAE;CAChC;CAEA,MAAM,gBAAgB,EAAE,GAAG,GAAG,KAA0C,QAAgB,IAAI,IAAI,KAAK,IAAI,KAAK;CAE9G,MAAM,gBAAgB,EAAE,GAAG,GAAG,KAA0C,OAAe,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI;CAEhH,MAAM,qBAAqB,QAAgB,UAAkB;EACzD,IAAI,WAAW,gBAAgB,OAAO;EAEtC,MAAM,CAAC,IAAI,IAAI,IAAI,MAAM,gBAAgB;EACzC,MAAM,IAAI,YAAY,IAAI,EAAE;EAC5B,MAAM,IAAI,YAAY,IAAI,EAAE;EAE5B,IAAI,IAAI;EAER,KAAK,IAAI,OAAO,GAAG,OAAO,mBAAmB,QAAQ;GACjD,MAAM,QAAQ,aAAa,GAAG,CAAC,IAAI;GAEnC,IAAI,KAAK,IAAI,KAAK,IAAI,eAAe,OAAO,aAAa,GAAG,CAAC;GAE7D,MAAM,QAAQ,aAAa,GAAG,CAAC;GAE/B,IAAI,KAAK,IAAI,KAAK,IAAI,eAAe;GAErC,KAAK,QAAQ;EACjB;EAEA,IAAI,MAAM;EACV,IAAI,OAAO;EAEX,IAAI;EAEJ,KAAK,IAAI,OAAO,GAAG,OAAO,sBAAsB,QAAQ;GACpD,MAAM,QAAQ,aAAa,GAAG,CAAC,IAAI;GAEnC,IAAI,KAAK,IAAI,KAAK,IAAI,eAAe;GAErC,IAAI,QAAQ,GAAG,OAAO;QACjB,MAAM;GAEX,KAAK,MAAM,QAAQ;EACvB;EAEA,OAAO,aAAa,GAAG,CAAC;CAC5B;CAEa,0BAAA,sBAAsB,QAAgB,SAAiD;EAChG,MAAM,WAAW,MAAM,QAAQ,SAAS,SAAS,IAAI;EACrD,MAAM,WAAW,UAAU,QAAQ,QAAQ;EAC3C,MAAM,OAAO,UAAU,QAAQ,MAAM,cAAc,kBAAkB,IAAI;EACzE,MAAM,QAAQ,YAAY,IAAI,IAAI;EAElC,OAAO;GAAC;GAAO,QAAQ;GAAM,QAAQ,IAAI;EAAI;CACjD;CAEa,0BAAA,wBACT,CAAC,SAAS,MACV,UACA,SAAiB,mBAChB;EACD,IAAI,OAAO,OAAO,OAAO,YAAY,MAAM,IAAI;EAE/C,OAAO,kBAAkB,QAAQ,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO,GAAG,CAAC,CAAC;CACjG;AACH,EAAA,CAAA,6BAAA,2BAAA,CAAA,EAAD"}

package/dist/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.const.js

@@ -0,0 +1,362 @@
+import { CellAnimationKeyframeUtils } from "./CellAnimationKeyframes.utils.js";
+import { blurDefault } from "./Samples/blurDefault.js";
+import { bounceDefault } from "./Samples/bounceDefault.js";
+import { carouselBottom } from "./Samples/carouselBottom.js";
+import { carouselLeft } from "./Samples/carouselLeft.js";
+import { carouselRight } from "./Samples/carouselRight.js";
+import { carouselTop } from "./Samples/carouselTop.js";
+import { zoomIn } from "./Samples/zoomIn.js";
+import { carouselQuadrant } from "./Samples/carouselQuadrant.js";
+import { carouselQuadrantInverted } from "./Samples/carouselQuadrantInverted.js";
+import { cubeBottom } from "./Samples/cubeBottom.js";
+import { cubeLeft } from "./Samples/cubeLeft.js";
+import { cubeRight } from "./Samples/cubeRight.js";
+import { cubeTop } from "./Samples/cubeTop.js";
+import { cubeQuadrant } from "./Samples/cubeQuadrant.js";
+import { cubeQuadrantInverted } from "./Samples/cubeQuadrantInverted.js";
+import { dripDown } from "./Samples/dripDown.js";
+import { dripLeft } from "./Samples/dripLeft.js";
+import { dripRight } from "./Samples/dripRight.js";
+import { dripUp } from "./Samples/dripUp.js";
+import { dripQuadrant } from "./Samples/dripQuadrant.js";
+import { dripQuadrantInverted } from "./Samples/dripQuadrantInverted.js";
+import { elasticDown } from "./Samples/elasticDown.js";
+import { elasticLeft } from "./Samples/elasticLeft.js";
+import { elasticRight } from "./Samples/elasticRight.js";
+import { elasticUp } from "./Samples/elasticUp.js";
+import { elasticQuadrant } from "./Samples/elasticQuadrant.js";
+import { elasticQuadrantInverted } from "./Samples/elasticQuadrantInverted.js";
+import { encircleCcw } from "./Samples/encircleCcw.js";
+import { encircleCw } from "./Samples/encircleCw.js";
+import { encircleCheckered } from "./Samples/encircleCheckered.js";
+import { encircleRings } from "./Samples/encircleRings.js";
+import { fadeInFlash } from "./Samples/fadeInFlash.js";
+import { fadeInFlicker } from "./Samples/fadeInFlicker.js";
+import { fadeInLinear } from "./Samples/fadeInLinear.js";
+import { flipHorizontal } from "./Samples/flipHorizontal.js";
+import { flipVertical } from "./Samples/flipVertical.js";
+import { flipCheckered } from "./Samples/flipCheckered.js";
+import { flipRings } from "./Samples/flipRings.js";
+import { hingeBottom } from "./Samples/hingeBottom.js";
+import { hingeLeft } from "./Samples/hingeLeft.js";
+import { hingeRight } from "./Samples/hingeRight.js";
+import { hingeTop } from "./Samples/hingeTop.js";
+import { hingeQuadrant } from "./Samples/hingeQuadrant.js";
+import { hingeQuadrantInverted } from "./Samples/hingeQuadrantInverted.js";
+import { hopDown } from "./Samples/hopDown.js";
+import { hopLeft } from "./Samples/hopLeft.js";
+import { hopRight } from "./Samples/hopRight.js";
+import { hopUp } from "./Samples/hopUp.js";
+import { hopQuadrant } from "./Samples/hopQuadrant.js";
+import { hopQuadrantInverted } from "./Samples/hopQuadrantInverted.js";
+import { invertFlash } from "./Samples/invertFlash.js";
+import { popBottomLeft } from "./Samples/popBottomLeft.js";
+import { popBottomRight } from "./Samples/popBottomRight.js";
+import { popCenter } from "./Samples/popCenter.js";
+import { popTopLeft } from "./Samples/popTopLeft.js";
+import { popTopRight } from "./Samples/popTopRight.js";
+import { popQuadrant } from "./Samples/popQuadrant.js";
+import { popQuadrantInverted } from "./Samples/popQuadrantInverted.js";
+import { pullHorizontal } from "./Samples/pullHorizontal.js";
+import { pullVertical } from "./Samples/pullVertical.js";
+import { pullCheckered } from "./Samples/pullCheckered.js";
+import { pullDown } from "./Samples/pullDown.js";
+import { pullLeft } from "./Samples/pullLeft.js";
+import { pullRight } from "./Samples/pullRight.js";
+import { pullUp } from "./Samples/pullUp.js";
+import { pullQuadrant } from "./Samples/pullQuadrant.js";
+import { pullQuadrantInverted } from "./Samples/pullQuadrantInverted.js";
+import { pullRings } from "./Samples/pullRings.js";
+import { quadrantScatter } from "./Samples/quadrantScatter.js";
+import { rollDownLeft } from "./Samples/rollDownLeft.js";
+import { rollDownRight } from "./Samples/rollDownRight.js";
+import { rollUpLeft } from "./Samples/rollUpLeft.js";
+import { rollUpRight } from "./Samples/rollUpRight.js";
+import { rollQuadrant } from "./Samples/rollQuadrant.js";
+import { rollQuadrantInverted } from "./Samples/rollQuadrantInverted.js";
+import { shakeDown } from "./Samples/shakeDown.js";
+import { shakeLeft } from "./Samples/shakeLeft.js";
+import { shakeRight } from "./Samples/shakeRight.js";
+import { shakeUp } from "./Samples/shakeUp.js";
+import { shakeQuadrant } from "./Samples/shakeQuadrant.js";
+import { shakeQuadrantInverted } from "./Samples/shakeQuadrantInverted.js";
+import { shootDown } from "./Samples/shootDown.js";
+import { shootLeft } from "./Samples/shootLeft.js";
+import { shootRight } from "./Samples/shootRight.js";
+import { shootUp } from "./Samples/shootUp.js";
+import { shootQuadrant } from "./Samples/shootQuadrant.js";
+import { shootQuadrantInverted } from "./Samples/shootQuadrantInverted.js";
+import { skewCcw } from "./Samples/skewCcw.js";
+import { skewCw } from "./Samples/skewCw.js";
+import { skewCheckered } from "./Samples/skewCheckered.js";
+import { skewRings } from "./Samples/skewRings.js";
+import { spinDownCcw } from "./Samples/spinDownCcw.js";
+import { spinDownCw } from "./Samples/spinDownCw.js";
+import { spinDownCheckered } from "./Samples/spinDownCheckered.js";
+import { spinDownRings } from "./Samples/spinDownRings.js";
+import { spinUpCcw } from "./Samples/spinUpCcw.js";
+import { spinUpCw } from "./Samples/spinUpCw.js";
+import { spinUpCheckered } from "./Samples/spinUpCheckered.js";
+import { spinUpRings } from "./Samples/spinUpRings.js";
+import { swarmCcw } from "./Samples/swarmCcw.js";
+import { swarmCw } from "./Samples/swarmCw.js";
+import { swarmCheckered } from "./Samples/swarmCheckered.js";
+import { swarmRings } from "./Samples/swarmRings.js";
+import { swingBottom } from "./Samples/swingBottom.js";
+import { swingLeft } from "./Samples/swingLeft.js";
+import { swingRight } from "./Samples/swingRight.js";
+import { swingTop } from "./Samples/swingTop.js";
+import { swingQuadrant } from "./Samples/swingQuadrant.js";
+import { swingQuadrantInverted } from "./Samples/swingQuadrantInverted.js";
+import { tumbleDown } from "./Samples/tumbleDown.js";
+import { tumbleLeft } from "./Samples/tumbleLeft.js";
+import { tumbleRight } from "./Samples/tumbleRight.js";
+import { tumbleUp } from "./Samples/tumbleUp.js";
+import { tumbleQuadrant } from "./Samples/tumbleQuadrant.js";
+import { tumbleQuadrantInverted } from "./Samples/tumbleQuadrantInverted.js";
+import { zoomOut } from "./Samples/zoomOut.js";
+//#region src/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.const.ts
+var CellAnimationKeyframes;
+(function(_CellAnimationKeyframes) {
+	_CellAnimationKeyframes.ANIMATION_TYPES = [
+		"blurDefault",
+		"bounceDefault",
+		"carouselBottom",
+		"carouselLeft",
+		"carouselQuadrant",
+		"carouselQuadrantInverted",
+		"carouselRight",
+		"carouselTop",
+		"cubeBottom",
+		"cubeLeft",
+		"cubeQuadrant",
+		"cubeQuadrantInverted",
+		"cubeRight",
+		"cubeTop",
+		"dripDown",
+		"dripLeft",
+		"dripQuadrant",
+		"dripQuadrantInverted",
+		"dripRight",
+		"dripUp",
+		"elasticDown",
+		"elasticLeft",
+		"elasticQuadrant",
+		"elasticQuadrantInverted",
+		"elasticRight",
+		"elasticUp",
+		"encircleCcw",
+		"encircleCheckered",
+		"encircleCw",
+		"encircleRings",
+		"fadeInFlash",
+		"fadeInFlicker",
+		"fadeInLinear",
+		"flipCheckered",
+		"flipHorizontal",
+		"flipRings",
+		"flipVertical",
+		"hingeBottom",
+		"hingeLeft",
+		"hingeQuadrant",
+		"hingeQuadrantInverted",
+		"hingeRight",
+		"hingeTop",
+		"hopDown",
+		"hopLeft",
+		"hopQuadrant",
+		"hopQuadrantInverted",
+		"hopRight",
+		"hopUp",
+		"invertFlash",
+		"popBottomLeft",
+		"popBottomRight",
+		"popCenter",
+		"popQuadrant",
+		"popQuadrantInverted",
+		"popTopLeft",
+		"popTopRight",
+		"pullCheckered",
+		"pullDown",
+		"pullHorizontal",
+		"pullLeft",
+		"pullQuadrant",
+		"pullQuadrantInverted",
+		"pullRight",
+		"pullRings",
+		"pullUp",
+		"pullVertical",
+		"quadrantScatter",
+		"rollDownLeft",
+		"rollDownRight",
+		"rollQuadrant",
+		"rollQuadrantInverted",
+		"rollUpLeft",
+		"rollUpRight",
+		"shakeDown",
+		"shakeLeft",
+		"shakeQuadrant",
+		"shakeQuadrantInverted",
+		"shakeRight",
+		"shakeUp",
+		"shootDown",
+		"shootLeft",
+		"shootQuadrant",
+		"shootQuadrantInverted",
+		"shootRight",
+		"shootUp",
+		"skewCcw",
+		"skewCheckered",
+		"skewCw",
+		"skewRings",
+		"spinDownCcw",
+		"spinDownCheckered",
+		"spinDownCw",
+		"spinDownRings",
+		"spinUpCcw",
+		"spinUpCheckered",
+		"spinUpCw",
+		"spinUpRings",
+		"swarmCcw",
+		"swarmCheckered",
+		"swarmCw",
+		"swarmRings",
+		"swingBottom",
+		"swingLeft",
+		"swingQuadrant",
+		"swingQuadrantInverted",
+		"swingRight",
+		"swingTop",
+		"tumbleDown",
+		"tumbleLeft",
+		"tumbleQuadrant",
+		"tumbleQuadrantInverted",
+		"tumbleRight",
+		"tumbleUp",
+		"zoomIn",
+		"zoomOut"
+	];
+	const SAMPLE_ANIMATIONS = _CellAnimationKeyframes.SAMPLE_ANIMATIONS = {
+		blurDefault,
+		bounceDefault,
+		carouselBottom,
+		carouselLeft,
+		carouselQuadrant,
+		carouselQuadrantInverted,
+		carouselRight,
+		carouselTop,
+		cubeBottom,
+		cubeLeft,
+		cubeQuadrant,
+		cubeQuadrantInverted,
+		cubeRight,
+		cubeTop,
+		dripDown,
+		dripLeft,
+		dripQuadrant,
+		dripQuadrantInverted,
+		dripRight,
+		dripUp,
+		elasticDown,
+		elasticLeft,
+		elasticQuadrant,
+		elasticQuadrantInverted,
+		elasticRight,
+		elasticUp,
+		encircleCcw,
+		encircleCheckered,
+		encircleCw,
+		encircleRings,
+		fadeInFlash,
+		fadeInFlicker,
+		fadeInLinear,
+		flipCheckered,
+		flipHorizontal,
+		flipRings,
+		flipVertical,
+		hingeBottom,
+		hingeLeft,
+		hingeQuadrant,
+		hingeQuadrantInverted,
+		hingeRight,
+		hingeTop,
+		hopDown,
+		hopLeft,
+		hopQuadrant,
+		hopQuadrantInverted,
+		hopRight,
+		hopUp,
+		invertFlash,
+		popBottomLeft,
+		popBottomRight,
+		popCenter,
+		popQuadrant,
+		popQuadrantInverted,
+		popTopLeft,
+		popTopRight,
+		pullCheckered,
+		pullDown,
+		pullHorizontal,
+		pullLeft,
+		pullQuadrant,
+		pullQuadrantInverted,
+		pullRight,
+		pullRings,
+		pullUp,
+		pullVertical,
+		quadrantScatter,
+		rollDownLeft,
+		rollDownRight,
+		rollQuadrant,
+		rollQuadrantInverted,
+		rollUpLeft,
+		rollUpRight,
+		shakeDown,
+		shakeLeft,
+		shakeQuadrant,
+		shakeQuadrantInverted,
+		shakeRight,
+		shakeUp,
+		shootDown,
+		shootLeft,
+		shootQuadrant,
+		shootQuadrantInverted,
+		shootRight,
+		shootUp,
+		skewCcw,
+		skewCheckered,
+		skewCw,
+		skewRings,
+		spinDownCcw,
+		spinDownCheckered,
+		spinDownCw,
+		spinDownRings,
+		spinUpCcw,
+		spinUpCheckered,
+		spinUpCw,
+		spinUpRings,
+		swarmCcw,
+		swarmCheckered,
+		swarmCw,
+		swarmRings,
+		swingBottom,
+		swingLeft,
+		swingQuadrant,
+		swingQuadrantInverted,
+		swingRight,
+		swingTop,
+		tumbleDown,
+		tumbleLeft,
+		tumbleQuadrant,
+		tumbleQuadrantInverted,
+		tumbleRight,
+		tumbleUp,
+		zoomIn,
+		zoomOut
+	};
+	_CellAnimationKeyframes.computeAnimation = (type, breakpoints, defs, timeline, easing) => CellAnimationKeyframeUtils.computeAnimation(SAMPLE_ANIMATIONS[type], breakpoints, defs, timeline, easing);
+})(CellAnimationKeyframes || (CellAnimationKeyframes = {}));
+//#endregion
+export { CellAnimationKeyframes };
+
+//# sourceMappingURL=CellAnimationKeyframes.const.js.map

package/dist/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellAnimationKeyframes.const.js","names":[],"sources":["../../../../src/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.const.ts"],"sourcesContent":["import type { Point2d } from \"@thewaver/ss-utils\";\n\nimport type {\n    CellAnimationEvaluationDefs,\n    CellAnimationEvaluationResult,\n} from \"../../../Exotics/CellAnimation/CellAnimation.types\";\nimport { CellAnimationBreakpoints } from \"../Breakpoints/CellAnimationBreakpoints.const\";\nimport type { CellAnimationFn } from \"./CellAnimationKeyframes.types\";\nimport { CellAnimationKeyframeUtils } from \"./CellAnimationKeyframes.utils\";\nimport { blurDefault } from \"./Samples/blurDefault\";\nimport { bounceDefault } from \"./Samples/bounceDefault\";\nimport { carouselBottom } from \"./Samples/carouselBottom\";\nimport { carouselLeft } from \"./Samples/carouselLeft\";\nimport { carouselQuadrant } from \"./Samples/carouselQuadrant\";\nimport { carouselQuadrantInverted } from \"./Samples/carouselQuadrantInverted\";\nimport { carouselRight } from \"./Samples/carouselRight\";\nimport { carouselTop } from \"./Samples/carouselTop\";\nimport { cubeBottom } from \"./Samples/cubeBottom\";\nimport { cubeLeft } from \"./Samples/cubeLeft\";\nimport { cubeQuadrant } from \"./Samples/cubeQuadrant\";\nimport { cubeQuadrantInverted } from \"./Samples/cubeQuadrantInverted\";\nimport { cubeRight } from \"./Samples/cubeRight\";\nimport { cubeTop } from \"./Samples/cubeTop\";\nimport { dripDown } from \"./Samples/dripDown\";\nimport { dripLeft } from \"./Samples/dripLeft\";\nimport { dripQuadrant } from \"./Samples/dripQuadrant\";\nimport { dripQuadrantInverted } from \"./Samples/dripQuadrantInverted\";\nimport { dripRight } from \"./Samples/dripRight\";\nimport { dripUp } from \"./Samples/dripUp\";\nimport { elasticDown } from \"./Samples/elasticDown\";\nimport { elasticLeft } from \"./Samples/elasticLeft\";\nimport { elasticQuadrant } from \"./Samples/elasticQuadrant\";\nimport { elasticQuadrantInverted } from \"./Samples/elasticQuadrantInverted\";\nimport { elasticRight } from \"./Samples/elasticRight\";\nimport { elasticUp } from \"./Samples/elasticUp\";\nimport { encircleCcw } from \"./Samples/encircleCcw\";\nimport { encircleCheckered } from \"./Samples/encircleCheckered\";\nimport { encircleCw } from \"./Samples/encircleCw\";\nimport { encircleRings } from \"./Samples/encircleRings\";\nimport { fadeInFlash } from \"./Samples/fadeInFlash\";\nimport { fadeInFlicker } from \"./Samples/fadeInFlicker\";\nimport { fadeInLinear } from \"./Samples/fadeInLinear\";\nimport { flipCheckered } from \"./Samples/flipCheckered\";\nimport { flipHorizontal } from \"./Samples/flipHorizontal\";\nimport { flipRings } from \"./Samples/flipRings\";\nimport { flipVertical } from \"./Samples/flipVertical\";\nimport { hingeBottom } from \"./Samples/hingeBottom\";\nimport { hingeLeft } from \"./Samples/hingeLeft\";\nimport { hingeQuadrant } from \"./Samples/hingeQuadrant\";\nimport { hingeQuadrantInverted } from \"./Samples/hingeQuadrantInverted\";\nimport { hingeRight } from \"./Samples/hingeRight\";\nimport { hingeTop } from \"./Samples/hingeTop\";\nimport { hopDown } from \"./Samples/hopDown\";\nimport { hopLeft } from \"./Samples/hopLeft\";\nimport { hopQuadrant } from \"./Samples/hopQuadrant\";\nimport { hopQuadrantInverted } from \"./Samples/hopQuadrantInverted\";\nimport { hopRight } from \"./Samples/hopRight\";\nimport { hopUp } from \"./Samples/hopUp\";\nimport { invertFlash } from \"./Samples/invertFlash\";\nimport { popBottomLeft } from \"./Samples/popBottomLeft\";\nimport { popBottomRight } from \"./Samples/popBottomRight\";\nimport { popCenter } from \"./Samples/popCenter\";\nimport { popQuadrant } from \"./Samples/popQuadrant\";\nimport { popQuadrantInverted } from \"./Samples/popQuadrantInverted\";\nimport { popTopLeft } from \"./Samples/popTopLeft\";\nimport { popTopRight } from \"./Samples/popTopRight\";\nimport { pullCheckered } from \"./Samples/pullCheckered\";\nimport { pullDown } from \"./Samples/pullDown\";\nimport { pullHorizontal } from \"./Samples/pullHorizontal\";\nimport { pullLeft } from \"./Samples/pullLeft\";\nimport { pullQuadrant } from \"./Samples/pullQuadrant\";\nimport { pullQuadrantInverted } from \"./Samples/pullQuadrantInverted\";\nimport { pullRight } from \"./Samples/pullRight\";\nimport { pullRings } from \"./Samples/pullRings\";\nimport { pullUp } from \"./Samples/pullUp\";\nimport { pullVertical } from \"./Samples/pullVertical\";\nimport { quadrantScatter } from \"./Samples/quadrantScatter\";\nimport { rollDownLeft } from \"./Samples/rollDownLeft\";\nimport { rollDownRight } from \"./Samples/rollDownRight\";\nimport { rollQuadrant } from \"./Samples/rollQuadrant\";\nimport { rollQuadrantInverted } from \"./Samples/rollQuadrantInverted\";\nimport { rollUpLeft } from \"./Samples/rollUpLeft\";\nimport { rollUpRight } from \"./Samples/rollUpRight\";\nimport { shakeDown } from \"./Samples/shakeDown\";\nimport { shakeLeft } from \"./Samples/shakeLeft\";\nimport { shakeQuadrant } from \"./Samples/shakeQuadrant\";\nimport { shakeQuadrantInverted } from \"./Samples/shakeQuadrantInverted\";\nimport { shakeRight } from \"./Samples/shakeRight\";\nimport { shakeUp } from \"./Samples/shakeUp\";\nimport { shootDown } from \"./Samples/shootDown\";\nimport { shootLeft } from \"./Samples/shootLeft\";\nimport { shootQuadrant } from \"./Samples/shootQuadrant\";\nimport { shootQuadrantInverted } from \"./Samples/shootQuadrantInverted\";\nimport { shootRight } from \"./Samples/shootRight\";\nimport { shootUp } from \"./Samples/shootUp\";\nimport { skewCcw } from \"./Samples/skewCcw\";\nimport { skewCheckered } from \"./Samples/skewCheckered\";\nimport { skewCw } from \"./Samples/skewCw\";\nimport { skewRings } from \"./Samples/skewRings\";\nimport { spinDownCcw } from \"./Samples/spinDownCcw\";\nimport { spinDownCheckered } from \"./Samples/spinDownCheckered\";\nimport { spinDownCw } from \"./Samples/spinDownCw\";\nimport { spinDownRings } from \"./Samples/spinDownRings\";\nimport { spinUpCcw } from \"./Samples/spinUpCcw\";\nimport { spinUpCheckered } from \"./Samples/spinUpCheckered\";\nimport { spinUpCw } from \"./Samples/spinUpCw\";\nimport { spinUpRings } from \"./Samples/spinUpRings\";\nimport { swarmCcw } from \"./Samples/swarmCcw\";\nimport { swarmCheckered } from \"./Samples/swarmCheckered\";\nimport { swarmCw } from \"./Samples/swarmCw\";\nimport { swarmRings } from \"./Samples/swarmRings\";\nimport { swingBottom } from \"./Samples/swingBottom\";\nimport { swingLeft } from \"./Samples/swingLeft\";\nimport { swingQuadrant } from \"./Samples/swingQuadrant\";\nimport { swingQuadrantInverted } from \"./Samples/swingQuadrantInverted\";\nimport { swingRight } from \"./Samples/swingRight\";\nimport { swingTop } from \"./Samples/swingTop\";\nimport { tumbleDown } from \"./Samples/tumbleDown\";\nimport { tumbleLeft } from \"./Samples/tumbleLeft\";\nimport { tumbleQuadrant } from \"./Samples/tumbleQuadrant\";\nimport { tumbleQuadrantInverted } from \"./Samples/tumbleQuadrantInverted\";\nimport { tumbleRight } from \"./Samples/tumbleRight\";\nimport { tumbleUp } from \"./Samples/tumbleUp\";\nimport { zoomIn } from \"./Samples/zoomIn\";\nimport { zoomOut } from \"./Samples/zoomOut\";\n\nexport namespace CellAnimationKeyframes {\n    export const ANIMATION_TYPES = [\n        \"blurDefault\",\n        \"bounceDefault\",\n        \"carouselBottom\",\n        \"carouselLeft\",\n        \"carouselQuadrant\",\n        \"carouselQuadrantInverted\",\n        \"carouselRight\",\n        \"carouselTop\",\n        \"cubeBottom\",\n        \"cubeLeft\",\n        \"cubeQuadrant\",\n        \"cubeQuadrantInverted\",\n        \"cubeRight\",\n        \"cubeTop\",\n        \"dripDown\",\n        \"dripLeft\",\n        \"dripQuadrant\",\n        \"dripQuadrantInverted\",\n        \"dripRight\",\n        \"dripUp\",\n        \"elasticDown\",\n        \"elasticLeft\",\n        \"elasticQuadrant\",\n        \"elasticQuadrantInverted\",\n        \"elasticRight\",\n        \"elasticUp\",\n        \"encircleCcw\",\n        \"encircleCheckered\",\n        \"encircleCw\",\n        \"encircleRings\",\n        \"fadeInFlash\",\n        \"fadeInFlicker\",\n        \"fadeInLinear\",\n        \"flipCheckered\",\n        \"flipHorizontal\",\n        \"flipRings\",\n        \"flipVertical\",\n        \"hingeBottom\",\n        \"hingeLeft\",\n        \"hingeQuadrant\",\n        \"hingeQuadrantInverted\",\n        \"hingeRight\",\n        \"hingeTop\",\n        \"hopDown\",\n        \"hopLeft\",\n        \"hopQuadrant\",\n        \"hopQuadrantInverted\",\n        \"hopRight\",\n        \"hopUp\",\n        \"invertFlash\",\n        \"popBottomLeft\",\n        \"popBottomRight\",\n        \"popCenter\",\n        \"popQuadrant\",\n        \"popQuadrantInverted\",\n        \"popTopLeft\",\n        \"popTopRight\",\n        \"pullCheckered\",\n        \"pullDown\",\n        \"pullHorizontal\",\n        \"pullLeft\",\n        \"pullQuadrant\",\n        \"pullQuadrantInverted\",\n        \"pullRight\",\n        \"pullRings\",\n        \"pullUp\",\n        \"pullVertical\",\n        \"quadrantScatter\",\n        \"rollDownLeft\",\n        \"rollDownRight\",\n        \"rollQuadrant\",\n        \"rollQuadrantInverted\",\n        \"rollUpLeft\",\n        \"rollUpRight\",\n        \"shakeDown\",\n        \"shakeLeft\",\n        \"shakeQuadrant\",\n        \"shakeQuadrantInverted\",\n        \"shakeRight\",\n        \"shakeUp\",\n        \"shootDown\",\n        \"shootLeft\",\n        \"shootQuadrant\",\n        \"shootQuadrantInverted\",\n        \"shootRight\",\n        \"shootUp\",\n        \"skewCcw\",\n        \"skewCheckered\",\n        \"skewCw\",\n        \"skewRings\",\n        \"spinDownCcw\",\n        \"spinDownCheckered\",\n        \"spinDownCw\",\n        \"spinDownRings\",\n        \"spinUpCcw\",\n        \"spinUpCheckered\",\n        \"spinUpCw\",\n        \"spinUpRings\",\n        \"swarmCcw\",\n        \"swarmCheckered\",\n        \"swarmCw\",\n        \"swarmRings\",\n        \"swingBottom\",\n        \"swingLeft\",\n        \"swingQuadrant\",\n        \"swingQuadrantInverted\",\n        \"swingRight\",\n        \"swingTop\",\n        \"tumbleDown\",\n        \"tumbleLeft\",\n        \"tumbleQuadrant\",\n        \"tumbleQuadrantInverted\",\n        \"tumbleRight\",\n        \"tumbleUp\",\n        \"zoomIn\",\n        \"zoomOut\",\n    ] as const;\n    export type AnimationType = (typeof ANIMATION_TYPES)[number];\n\n    export const SAMPLE_ANIMATIONS: Record<AnimationType, CellAnimationFn> = {\n        blurDefault,\n        bounceDefault,\n        carouselBottom,\n        carouselLeft,\n        carouselQuadrant,\n        carouselQuadrantInverted,\n        carouselRight,\n        carouselTop,\n        cubeBottom,\n        cubeLeft,\n        cubeQuadrant,\n        cubeQuadrantInverted,\n        cubeRight,\n        cubeTop,\n        dripDown,\n        dripLeft,\n        dripQuadrant,\n        dripQuadrantInverted,\n        dripRight,\n        dripUp,\n        elasticDown,\n        elasticLeft,\n        elasticQuadrant,\n        elasticQuadrantInverted,\n        elasticRight,\n        elasticUp,\n        encircleCcw,\n        encircleCheckered,\n        encircleCw,\n        encircleRings,\n        fadeInFlash,\n        fadeInFlicker,\n        fadeInLinear,\n        flipCheckered,\n        flipHorizontal,\n        flipRings,\n        flipVertical,\n        hingeBottom,\n        hingeLeft,\n        hingeQuadrant,\n        hingeQuadrantInverted,\n        hingeRight,\n        hingeTop,\n        hopDown,\n        hopLeft,\n        hopQuadrant,\n        hopQuadrantInverted,\n        hopRight,\n        hopUp,\n        invertFlash,\n        popBottomLeft,\n        popBottomRight,\n        popCenter,\n        popQuadrant,\n        popQuadrantInverted,\n        popTopLeft,\n        popTopRight,\n        pullCheckered,\n        pullDown,\n        pullHorizontal,\n        pullLeft,\n        pullQuadrant,\n        pullQuadrantInverted,\n        pullRight,\n        pullRings,\n        pullUp,\n        pullVertical,\n        quadrantScatter,\n        rollDownLeft,\n        rollDownRight,\n        rollQuadrant,\n        rollQuadrantInverted,\n        rollUpLeft,\n        rollUpRight,\n        shakeDown,\n        shakeLeft,\n        shakeQuadrant,\n        shakeQuadrantInverted,\n        shakeRight,\n        shakeUp,\n        shootDown,\n        shootLeft,\n        shootQuadrant,\n        shootQuadrantInverted,\n        shootRight,\n        shootUp,\n        skewCcw,\n        skewCheckered,\n        skewCw,\n        skewRings,\n        spinDownCcw,\n        spinDownCheckered,\n        spinDownCw,\n        spinDownRings,\n        spinUpCcw,\n        spinUpCheckered,\n        spinUpCw,\n        spinUpRings,\n        swarmCcw,\n        swarmCheckered,\n        swarmCw,\n        swarmRings,\n        swingBottom,\n        swingLeft,\n        swingQuadrant,\n        swingQuadrantInverted,\n        swingRight,\n        swingTop,\n        tumbleDown,\n        tumbleLeft,\n        tumbleQuadrant,\n        tumbleQuadrantInverted,\n        tumbleRight,\n        tumbleUp,\n        zoomIn,\n        zoomOut,\n    };\n\n    export const computeAnimation = (\n        type: AnimationType,\n        breakpoints: CellAnimationBreakpoints.BreakpointTupleTriple,\n        defs: CellAnimationEvaluationDefs & { origin: Point2d },\n        timeline: number,\n        easing?: CellAnimationBreakpoints.Easing,\n    ): CellAnimationEvaluationResult =>\n        CellAnimationKeyframeUtils.computeAnimation(SAMPLE_ANIMATIONS[type], breakpoints, defs, timeline, easing);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8HO,IAAU;CAAV,SAAA,yBAAA;CACU,wBAAA,kBAAkB;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ;CAGO,MAAM,oBAAA,wBAAA,oBAA4D;EACrE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ;CAEa,wBAAA,oBACT,MACA,aACA,MACA,UACA,WAEA,2BAA2B,iBAAiB,kBAAkB,OAAO,aAAa,MAAM,UAAU,MAAM;AAC/G,EAAA,CAAA,2BAAA,yBAAA,CAAA,EAAD"}

package/dist/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.utils.js

@@ -0,0 +1,78 @@
+import { CellAnimationBreakpoints } from "../Breakpoints/CellAnimationBreakpoints.const.js";
+import { CellAnimationZones } from "../Zones/CellAnimationZones.const.js";
+import { MathUtils, Matrix3dUtils } from "@thewaver/ss-utils";
+//#region src/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.utils.ts
+var CellAnimationKeyframeUtils;
+(function(_CellAnimationKeyframeUtils) {
+	const RESULT_DECIMAL_PLACES = 3;
+	const compileStops = _CellAnimationKeyframeUtils.compileStops = (stops) => {
+		const compiled = {};
+		for (const stop of stops) for (const [key, value] of Object.entries(stop)) {
+			if (key === "at" || value === void 0) continue;
+			compiled[key] ??= [];
+			compiled[key].push({
+				at: stop.at,
+				value
+			});
+		}
+		return compiled;
+	};
+	const sampleTrack = _CellAnimationKeyframeUtils.sampleTrack = (track, timeline) => {
+		if (timeline <= track[0].at) return track[0].value;
+		for (let i = 1; i < track.length; i++) if (timeline <= track[i].at) {
+			const span = track[i].at - track[i - 1].at;
+			const ratio = span <= 0 ? 1 : (timeline - track[i - 1].at) / span;
+			return track[i - 1].value + (track[i].value - track[i - 1].value) * ratio;
+		}
+		return track[track.length - 1].value;
+	};
+	_CellAnimationKeyframeUtils.fromStops = (stops) => {
+		const compiled = compileStops(stops);
+		return (timeline, defs) => {
+			const result = {};
+			let originX;
+			let originY;
+			let depth;
+			for (const [key, track] of Object.entries(compiled)) {
+				const value = sampleTrack(track, timeline);
+				if (key === "originX") originX = value;
+				else if (key === "originY") originY = value;
+				else if (key === "depth") depth = value;
+				else result[key] = MathUtils.roundToDecimalPlaces(value, RESULT_DECIMAL_PLACES);
+			}
+			if (originX === void 0 && originY === void 0 && depth === void 0) return result;
+			const { width, height } = defs.size;
+			const anchor = {
+				x: ((originX ?? .5) - .5) * width,
+				y: ((originY ?? .5) - .5) * height,
+				z: 0
+			};
+			const offset = {
+				x: 0,
+				y: 0,
+				z: (depth ?? 0) * Math.max(width, height) / 100
+			};
+			const matrix = Matrix3dUtils.multiply(Matrix3dUtils.multiply(Matrix3dUtils.multiply(Matrix3dUtils.rotationZ(result.rotate ?? 0), Matrix3dUtils.rotationX(result.rotateX ?? 0)), Matrix3dUtils.rotationY(result.rotateY ?? 0)), Matrix3dUtils.scaling((result.scaleX ?? 100) / 100, (result.scaleY ?? 100) / 100));
+			const rotatedAnchor = Matrix3dUtils.apply(matrix, anchor);
+			const rotatedOffset = Matrix3dUtils.apply(matrix, offset);
+			const translation = {
+				x: anchor.x - rotatedAnchor.x + rotatedOffset.x,
+				y: anchor.y - rotatedAnchor.y + rotatedOffset.y,
+				z: anchor.z - rotatedAnchor.z + rotatedOffset.z
+			};
+			result.translateX = MathUtils.roundToDecimalPlaces((result.translateX ?? 0) + (width > 0 ? translation.x / width * 100 : 0), RESULT_DECIMAL_PLACES);
+			result.translateY = MathUtils.roundToDecimalPlaces((result.translateY ?? 0) + (height > 0 ? translation.y / height * 100 : 0), RESULT_DECIMAL_PLACES);
+			if (translation.z !== 0 || result.translateZ !== void 0) result.translateZ = MathUtils.roundToDecimalPlaces((result.translateZ ?? 0) + translation.z, RESULT_DECIMAL_PLACES);
+			return result;
+		};
+	};
+	_CellAnimationKeyframeUtils.fromZones = (zones, fallback) => (timeline, defs) => {
+		for (const { zone, animation } of zones) if (CellAnimationZones.isInZone(zone, defs)) return animation(timeline, defs);
+		return fallback(timeline, defs);
+	};
+	_CellAnimationKeyframeUtils.computeAnimation = (animation, breakpoints, defs, timeline, easing) => animation(CellAnimationBreakpoints.computeLocalTimeline(breakpoints, timeline, easing), defs);
+})(CellAnimationKeyframeUtils || (CellAnimationKeyframeUtils = {}));
+//#endregion
+export { CellAnimationKeyframeUtils };
+
+//# sourceMappingURL=CellAnimationKeyframes.utils.js.map

package/dist/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellAnimationKeyframes.utils.js","names":[],"sources":["../../../../src/Samples/CellAnimation/Keyframes/CellAnimationKeyframes.utils.ts"],"sourcesContent":["import { type CSSAnimationKey, MathUtils, Matrix3dUtils, type Point2d, type Point3d } from \"@thewaver/ss-utils\";\n\nimport type {\n    CellAnimationEvaluationDefs,\n    CellAnimationEvaluationResult,\n} from \"../../../Exotics/CellAnimation/CellAnimation.types\";\nimport { CellAnimationBreakpoints } from \"../Breakpoints/CellAnimationBreakpoints.const\";\nimport { CellAnimationZones } from \"../Zones/CellAnimationZones.const\";\nimport type {\n    CellAnimationFn,\n    CellStop,\n    CellStopTrack,\n    CellZone,\n    CompiledCellStops,\n} from \"./CellAnimationKeyframes.types\";\n\nexport namespace CellAnimationKeyframeUtils {\n    const RESULT_DECIMAL_PLACES = 3;\n\n    export const compileStops = (stops: CellStop[]): CompiledCellStops => {\n        const compiled: CompiledCellStops = {};\n\n        for (const stop of stops) {\n            for (const [key, value] of Object.entries(stop)) {\n                if (key === \"at\" || value === undefined) continue;\n\n                compiled[key] ??= [];\n                compiled[key].push({ at: stop.at, value });\n            }\n        }\n\n        return compiled;\n    };\n\n    export const sampleTrack = (track: CellStopTrack, timeline: number) => {\n        if (timeline <= track[0].at) return track[0].value;\n\n        for (let i = 1; i < track.length; i++) {\n            if (timeline <= track[i].at) {\n                const span = track[i].at - track[i - 1].at;\n                const ratio = span <= 0 ? 1 : (timeline - track[i - 1].at) / span;\n\n                return track[i - 1].value + (track[i].value - track[i - 1].value) * ratio;\n            }\n        }\n\n        return track[track.length - 1].value;\n    };\n\n    export const fromStops = (stops: CellStop[]): CellAnimationFn => {\n        const compiled = compileStops(stops);\n\n        return (timeline, defs) => {\n            const result: Partial<Record<CSSAnimationKey, number>> = {};\n\n            let originX: number | undefined;\n            let originY: number | undefined;\n            let depth: number | undefined;\n\n            for (const [key, track] of Object.entries(compiled)) {\n                const value = sampleTrack(track, timeline);\n\n                if (key === \"originX\") {\n                    originX = value;\n                } else if (key === \"originY\") {\n                    originY = value;\n                } else if (key === \"depth\") {\n                    depth = value;\n                } else {\n                    result[key as CSSAnimationKey] = MathUtils.roundToDecimalPlaces(value, RESULT_DECIMAL_PLACES);\n                }\n            }\n\n            if (originX === undefined && originY === undefined && depth === undefined) return result;\n\n            const { width, height } = defs.size;\n            const anchor: Point3d = {\n                x: ((originX ?? 0.5) - 0.5) * width,\n                y: ((originY ?? 0.5) - 0.5) * height,\n                z: 0,\n            };\n            const offset: Point3d = { x: 0, y: 0, z: ((depth ?? 0) * Math.max(width, height)) / 100 };\n            const matrix = Matrix3dUtils.multiply(\n                Matrix3dUtils.multiply(\n                    Matrix3dUtils.multiply(\n                        Matrix3dUtils.rotationZ(result.rotate ?? 0),\n                        Matrix3dUtils.rotationX(result.rotateX ?? 0),\n                    ),\n                    Matrix3dUtils.rotationY(result.rotateY ?? 0),\n                ),\n                Matrix3dUtils.scaling((result.scaleX ?? 100) / 100, (result.scaleY ?? 100) / 100),\n            );\n            const rotatedAnchor = Matrix3dUtils.apply(matrix, anchor);\n            const rotatedOffset = Matrix3dUtils.apply(matrix, offset);\n            const translation: Point3d = {\n                x: anchor.x - rotatedAnchor.x + rotatedOffset.x,\n                y: anchor.y - rotatedAnchor.y + rotatedOffset.y,\n                z: anchor.z - rotatedAnchor.z + rotatedOffset.z,\n            };\n\n            result.translateX = MathUtils.roundToDecimalPlaces(\n                (result.translateX ?? 0) + (width > 0 ? (translation.x / width) * 100 : 0),\n                RESULT_DECIMAL_PLACES,\n            );\n            result.translateY = MathUtils.roundToDecimalPlaces(\n                (result.translateY ?? 0) + (height > 0 ? (translation.y / height) * 100 : 0),\n                RESULT_DECIMAL_PLACES,\n            );\n\n            if (translation.z !== 0 || result.translateZ !== undefined) {\n                result.translateZ = MathUtils.roundToDecimalPlaces(\n                    (result.translateZ ?? 0) + translation.z,\n                    RESULT_DECIMAL_PLACES,\n                );\n            }\n\n            return result;\n        };\n    };\n\n    export const fromZones =\n        (zones: CellZone[], fallback: CellAnimationFn): CellAnimationFn =>\n        (timeline, defs) => {\n            for (const { zone, animation } of zones) {\n                if (CellAnimationZones.isInZone(zone, defs)) return animation(timeline, defs);\n            }\n\n            return fallback(timeline, defs);\n        };\n\n    export const computeAnimation = (\n        animation: CellAnimationFn,\n        breakpoints: CellAnimationBreakpoints.BreakpointTupleTriple,\n        defs: CellAnimationEvaluationDefs & { origin: Point2d },\n        timeline: number,\n        easing?: CellAnimationBreakpoints.Easing,\n    ): CellAnimationEvaluationResult =>\n        animation(CellAnimationBreakpoints.computeLocalTimeline(breakpoints, timeline, easing), defs);\n}\n"],"mappings":"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"}

package/dist/Samples/CellAnimation/Keyframes/Samples/blurDefault.js

@@ -0,0 +1,21 @@
+import { CellAnimationKeyframeUtils } from "../CellAnimationKeyframes.utils.js";
+//#region src/Samples/CellAnimation/Keyframes/Samples/blurDefault.ts
+var blurDefault = CellAnimationKeyframeUtils.fromStops([
+	{
+		at: 0,
+		opacity: 0,
+		blur: 20
+	},
+	{
+		at: .5,
+		opacity: 100
+	},
+	{
+		at: 1,
+		blur: 0
+	}
+]);
+//#endregion
+export { blurDefault };
+
+//# sourceMappingURL=blurDefault.js.map

package/dist/Samples/CellAnimation/Keyframes/Samples/blurDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blurDefault.js","names":[],"sources":["../../../../../src/Samples/CellAnimation/Keyframes/Samples/blurDefault.ts"],"sourcesContent":["import type { CellAnimationFn } from \"../CellAnimationKeyframes.types\";\nimport { CellAnimationKeyframeUtils } from \"../CellAnimationKeyframes.utils\";\n\nexport const blurDefault: CellAnimationFn = CellAnimationKeyframeUtils.fromStops([\n    { at: 0, opacity: 0, blur: 20 },\n    { at: 0.5, opacity: 100 },\n    { at: 1, blur: 0 },\n]);\n"],"mappings":";;AAGA,IAAa,cAA+B,2BAA2B,UAAU;CAC7E;EAAE,IAAI;EAAG,SAAS;EAAG,MAAM;CAAG;CAC9B;EAAE,IAAI;EAAK,SAAS;CAAI;CACxB;EAAE,IAAI;EAAG,MAAM;CAAE;AACrB,CAAC"}