@vysmo/easings 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +368 -0
- package/dist/builders/anticipate.d.ts +20 -0
- package/dist/builders/anticipate.d.ts.map +1 -0
- package/dist/builders/anticipate.js +52 -0
- package/dist/builders/anticipate.js.map +1 -0
- package/dist/builders/bezier.d.ts +7 -0
- package/dist/builders/bezier.d.ts.map +1 -0
- package/dist/builders/bezier.js +69 -0
- package/dist/builders/bezier.js.map +1 -0
- package/dist/builders/breathe.d.ts +11 -0
- package/dist/builders/breathe.d.ts.map +1 -0
- package/dist/builders/breathe.js +14 -0
- package/dist/builders/breathe.js.map +1 -0
- package/dist/builders/custom.d.ts +13 -0
- package/dist/builders/custom.d.ts.map +1 -0
- package/dist/builders/custom.js +40 -0
- package/dist/builders/custom.js.map +1 -0
- package/dist/builders/expoScale.d.ts +13 -0
- package/dist/builders/expoScale.d.ts.map +1 -0
- package/dist/builders/expoScale.js +27 -0
- package/dist/builders/expoScale.js.map +1 -0
- package/dist/builders/gravity.d.ts +12 -0
- package/dist/builders/gravity.d.ts.map +1 -0
- package/dist/builders/gravity.js +11 -0
- package/dist/builders/gravity.js.map +1 -0
- package/dist/builders/index.d.ts +12 -0
- package/dist/builders/index.d.ts.map +1 -0
- package/dist/builders/index.js +12 -0
- package/dist/builders/index.js.map +1 -0
- package/dist/builders/rough.d.ts +17 -0
- package/dist/builders/rough.d.ts.map +1 -0
- package/dist/builders/rough.js +62 -0
- package/dist/builders/rough.js.map +1 -0
- package/dist/builders/slow.d.ts +16 -0
- package/dist/builders/slow.d.ts.map +1 -0
- package/dist/builders/slow.js +59 -0
- package/dist/builders/slow.js.map +1 -0
- package/dist/builders/spring-presets.d.ts +48 -0
- package/dist/builders/spring-presets.d.ts.map +1 -0
- package/dist/builders/spring-presets.js +19 -0
- package/dist/builders/spring-presets.js.map +1 -0
- package/dist/builders/spring.d.ts +12 -0
- package/dist/builders/spring.d.ts.map +1 -0
- package/dist/builders/spring.js +46 -0
- package/dist/builders/spring.js.map +1 -0
- package/dist/builders/wiggle.d.ts +9 -0
- package/dist/builders/wiggle.d.ts.map +1 -0
- package/dist/builders/wiggle.js +23 -0
- package/dist/builders/wiggle.js.map +1 -0
- package/dist/css.d.ts +40 -0
- package/dist/css.d.ts.map +1 -0
- package/dist/css.js +71 -0
- package/dist/css.js.map +1 -0
- package/dist/define.d.ts +12 -0
- package/dist/define.d.ts.map +1 -0
- package/dist/define.js +31 -0
- package/dist/define.js.map +1 -0
- package/dist/easings/back.d.ts +8 -0
- package/dist/easings/back.d.ts.map +1 -0
- package/dist/easings/back.js +20 -0
- package/dist/easings/back.js.map +1 -0
- package/dist/easings/bounce.d.ts +4 -0
- package/dist/easings/bounce.d.ts.map +1 -0
- package/dist/easings/bounce.js +21 -0
- package/dist/easings/bounce.js.map +1 -0
- package/dist/easings/circ.d.ts +4 -0
- package/dist/easings/circ.d.ts.map +1 -0
- package/dist/easings/circ.js +7 -0
- package/dist/easings/circ.js.map +1 -0
- package/dist/easings/elastic.d.ts +9 -0
- package/dist/easings/elastic.d.ts.map +1 -0
- package/dist/easings/elastic.js +33 -0
- package/dist/easings/elastic.js.map +1 -0
- package/dist/easings/expo.d.ts +4 -0
- package/dist/easings/expo.d.ts.map +1 -0
- package/dist/easings/expo.js +11 -0
- package/dist/easings/expo.js.map +1 -0
- package/dist/easings/index.d.ts +11 -0
- package/dist/easings/index.d.ts.map +1 -0
- package/dist/easings/index.js +11 -0
- package/dist/easings/index.js.map +1 -0
- package/dist/easings/linear.d.ts +3 -0
- package/dist/easings/linear.d.ts.map +1 -0
- package/dist/easings/linear.js +4 -0
- package/dist/easings/linear.js.map +1 -0
- package/dist/easings/power.d.ts +25 -0
- package/dist/easings/power.d.ts.map +1 -0
- package/dist/easings/power.js +29 -0
- package/dist/easings/power.js.map +1 -0
- package/dist/easings/sine.d.ts +4 -0
- package/dist/easings/sine.d.ts.map +1 -0
- package/dist/easings/sine.js +6 -0
- package/dist/easings/sine.js.map +1 -0
- package/dist/easings/smooth.d.ts +4 -0
- package/dist/easings/smooth.d.ts.map +1 -0
- package/dist/easings/smooth.js +21 -0
- package/dist/easings/smooth.js.map +1 -0
- package/dist/easings/steps.d.ts +8 -0
- package/dist/easings/steps.d.ts.map +1 -0
- package/dist/easings/steps.js +16 -0
- package/dist/easings/steps.js.map +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/modifiers/blend.d.ts +13 -0
- package/dist/modifiers/blend.d.ts.map +1 -0
- package/dist/modifiers/blend.js +21 -0
- package/dist/modifiers/blend.js.map +1 -0
- package/dist/modifiers/chain.d.ts +18 -0
- package/dist/modifiers/chain.d.ts.map +1 -0
- package/dist/modifiers/chain.js +40 -0
- package/dist/modifiers/chain.js.map +1 -0
- package/dist/modifiers/index.d.ts +7 -0
- package/dist/modifiers/index.d.ts.map +1 -0
- package/dist/modifiers/index.js +7 -0
- package/dist/modifiers/index.js.map +1 -0
- package/dist/modifiers/mirror.d.ts +8 -0
- package/dist/modifiers/mirror.d.ts.map +1 -0
- package/dist/modifiers/mirror.js +14 -0
- package/dist/modifiers/mirror.js.map +1 -0
- package/dist/modifiers/reverse.d.ts +4 -0
- package/dist/modifiers/reverse.d.ts.map +1 -0
- package/dist/modifiers/reverse.js +6 -0
- package/dist/modifiers/reverse.js.map +1 -0
- package/dist/modifiers/slice.d.ts +11 -0
- package/dist/modifiers/slice.d.ts.map +1 -0
- package/dist/modifiers/slice.js +28 -0
- package/dist/modifiers/slice.js.map +1 -0
- package/dist/modifiers/yoyo.d.ts +8 -0
- package/dist/modifiers/yoyo.d.ts.map +1 -0
- package/dist/modifiers/yoyo.js +10 -0
- package/dist/modifiers/yoyo.js.map +1 -0
- package/dist/parse.d.ts +14 -0
- package/dist/parse.d.ts.map +1 -0
- package/dist/parse.js +108 -0
- package/dist/parse.js.map +1 -0
- package/dist/reduced-motion.d.ts +17 -0
- package/dist/reduced-motion.d.ts.map +1 -0
- package/dist/reduced-motion.js +24 -0
- package/dist/reduced-motion.js.map +1 -0
- package/dist/types.d.ts +8 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +63 -0
- package/src/__tests__/anticipate-variants.test.ts +58 -0
- package/src/__tests__/builders.test.ts +349 -0
- package/src/__tests__/contract.test.ts +47 -0
- package/src/__tests__/css.test.ts +93 -0
- package/src/__tests__/easings.bench.ts +66 -0
- package/src/__tests__/endpoint-correctness.test.ts +170 -0
- package/src/__tests__/modifiers.test.ts +134 -0
- package/src/__tests__/parametric.test.ts +148 -0
- package/src/__tests__/parse.test.ts +71 -0
- package/src/__tests__/property.test.ts +110 -0
- package/src/__tests__/reduced-motion.test.ts +66 -0
- package/src/__tests__/slice.test.ts +38 -0
- package/src/__tests__/spring-presets.test.ts +48 -0
- package/src/__tests__/ssr.test.ts +62 -0
- package/src/__tests__/types-check.ts +104 -0
- package/src/builders/anticipate.ts +66 -0
- package/src/builders/bezier.ts +71 -0
- package/src/builders/breathe.ts +31 -0
- package/src/builders/custom.ts +43 -0
- package/src/builders/expoScale.ts +30 -0
- package/src/builders/gravity.ts +27 -0
- package/src/builders/index.ts +24 -0
- package/src/builders/rough.ts +83 -0
- package/src/builders/slow.ts +72 -0
- package/src/builders/spring-presets.ts +20 -0
- package/src/builders/spring.ts +61 -0
- package/src/builders/wiggle.ts +40 -0
- package/src/css.ts +79 -0
- package/src/define.ts +49 -0
- package/src/easings/back.ts +24 -0
- package/src/easings/bounce.ts +23 -0
- package/src/easings/circ.ts +9 -0
- package/src/easings/elastic.ts +52 -0
- package/src/easings/expo.ts +9 -0
- package/src/easings/index.ts +35 -0
- package/src/easings/linear.ts +4 -0
- package/src/easings/power.ts +38 -0
- package/src/easings/sine.ts +7 -0
- package/src/easings/smooth.ts +25 -0
- package/src/easings/steps.ts +25 -0
- package/src/index.ts +9 -0
- package/src/modifiers/blend.ts +24 -0
- package/src/modifiers/chain.ts +63 -0
- package/src/modifiers/index.ts +6 -0
- package/src/modifiers/mirror.ts +14 -0
- package/src/modifiers/reverse.ts +7 -0
- package/src/modifiers/slice.ts +29 -0
- package/src/modifiers/yoyo.ts +15 -0
- package/src/parse.ts +167 -0
- package/src/reduced-motion.ts +26 -0
- package/src/types.ts +8 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { EasingFn } from "../types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Ease tuned for scale animations spanning large ratios (e.g. 0.01 → 100).
|
|
4
|
+
* Linear interpolation across such ranges feels jerky because perception
|
|
5
|
+
* is logarithmic. `expoScale` maps t so that when used as
|
|
6
|
+
* `scale = startScale + (endScale - startScale) * expoScale(t)`, the
|
|
7
|
+
* visual motion is uniform across orders of magnitude.
|
|
8
|
+
*
|
|
9
|
+
* Optionally combine with another ease: the result of `ease(t)` is what
|
|
10
|
+
* gets log-mapped.
|
|
11
|
+
*/
|
|
12
|
+
export declare function expoScale(startScale: number, endScale: number, ease?: EasingFn): EasingFn;
|
|
13
|
+
//# sourceMappingURL=expoScale.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expoScale.d.ts","sourceRoot":"","sources":["../../src/builders/expoScale.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,GAAE,QAAiB,GAAG,QAAQ,CAejG"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { defineEasing } from "../define.js";
|
|
2
|
+
import { linear } from "../easings/linear.js";
|
|
3
|
+
/**
|
|
4
|
+
* Ease tuned for scale animations spanning large ratios (e.g. 0.01 → 100).
|
|
5
|
+
* Linear interpolation across such ranges feels jerky because perception
|
|
6
|
+
* is logarithmic. `expoScale` maps t so that when used as
|
|
7
|
+
* `scale = startScale + (endScale - startScale) * expoScale(t)`, the
|
|
8
|
+
* visual motion is uniform across orders of magnitude.
|
|
9
|
+
*
|
|
10
|
+
* Optionally combine with another ease: the result of `ease(t)` is what
|
|
11
|
+
* gets log-mapped.
|
|
12
|
+
*/
|
|
13
|
+
export function expoScale(startScale, endScale, ease = linear) {
|
|
14
|
+
if (startScale <= 0 || endScale <= 0) {
|
|
15
|
+
throw new RangeError(`expoScale: startScale and endScale must be positive; got ${startScale}, ${endScale}`);
|
|
16
|
+
}
|
|
17
|
+
if (startScale === endScale) {
|
|
18
|
+
return defineEasing(`expoScale(${startScale}, ${endScale})`, () => 0);
|
|
19
|
+
}
|
|
20
|
+
const ratio = endScale / startScale;
|
|
21
|
+
const span = endScale - startScale;
|
|
22
|
+
return defineEasing(`expoScale(${startScale}, ${endScale})`, (t) => {
|
|
23
|
+
const eased = ease(t);
|
|
24
|
+
return (startScale * ratio ** eased - startScale) / span;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=expoScale.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expoScale.js","sourceRoot":"","sources":["../../src/builders/expoScale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CAAC,UAAkB,EAAE,QAAgB,EAAE,OAAiB,MAAM;IACrF,IAAI,UAAU,IAAI,CAAC,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;QACrC,MAAM,IAAI,UAAU,CAClB,4DAA4D,UAAU,KAAK,QAAQ,EAAE,CACtF,CAAC;IACJ,CAAC;IACD,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,YAAY,CAAC,aAAa,UAAU,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;IACxE,CAAC;IACD,MAAM,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IACpC,MAAM,IAAI,GAAG,QAAQ,GAAG,UAAU,CAAC;IACnC,OAAO,YAAY,CAAC,aAAa,UAAU,KAAK,QAAQ,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE;QACjE,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACtB,OAAO,CAAC,UAAU,GAAG,KAAK,IAAI,KAAK,GAAG,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type GravityParams = {
|
|
2
|
+
/**
|
|
3
|
+
* How heavy the falling object feels. 0 = floats (linear), 1 ≈ Earth
|
|
4
|
+
* gravity (quadratic fall, equivalent to power1.in), 2 = cubic fall
|
|
5
|
+
* (power2.in), higher = molasses. Continuous, so designers get a
|
|
6
|
+
* single "weight" knob instead of choosing between named power
|
|
7
|
+
* curves.
|
|
8
|
+
*/
|
|
9
|
+
weight: number;
|
|
10
|
+
};
|
|
11
|
+
export declare const gravity: import("../types.js").ParametricEasing<GravityParams>;
|
|
12
|
+
//# sourceMappingURL=gravity.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gravity.d.ts","sourceRoot":"","sources":["../../src/builders/gravity.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAQF,eAAO,MAAM,OAAO,uDAOnB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { defineParametricEasing } from "../define.js";
|
|
2
|
+
const DEFAULTS = { weight: 1 };
|
|
3
|
+
// Math: f(t) = t^(1 + weight). Keeps endpoints exact, monotonic for
|
|
4
|
+
// weight ≥ 0, and continuously interpolates the catalog's power-in
|
|
5
|
+
// family so a designer can dial "heavier" without picking a number
|
|
6
|
+
// from a discrete set.
|
|
7
|
+
export const gravity = defineParametricEasing("gravity", DEFAULTS, ({ weight }) => {
|
|
8
|
+
const exp = 1 + Math.max(0, weight);
|
|
9
|
+
return (t) => Math.pow(t, exp);
|
|
10
|
+
});
|
|
11
|
+
//# sourceMappingURL=gravity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gravity.js","sourceRoot":"","sources":["../../src/builders/gravity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAatD,MAAM,QAAQ,GAAkB,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAE9C,oEAAoE;AACpE,mEAAmE;AACnE,mEAAmE;AACnE,uBAAuB;AACvB,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAC3C,SAAS,EACT,QAAQ,EACR,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACb,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACjC,CAAC,CACF,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { bezier, bezierEase, bezierEaseIn, bezierEaseOut, bezierEaseInOut } from "./bezier.js";
|
|
2
|
+
export { spring, type SpringParams } from "./spring.js";
|
|
3
|
+
export { custom, type CustomPoint } from "./custom.js";
|
|
4
|
+
export { rough, type RoughParams } from "./rough.js";
|
|
5
|
+
export { wiggle, type WiggleParams, type WiggleType } from "./wiggle.js";
|
|
6
|
+
export { slow, type SlowParams } from "./slow.js";
|
|
7
|
+
export { expoScale } from "./expoScale.js";
|
|
8
|
+
export { gravity, type GravityParams } from "./gravity.js";
|
|
9
|
+
export { breathe, type BreatheParams } from "./breathe.js";
|
|
10
|
+
export { anticipate, anticipateIn, anticipateOut, anticipateInOut, type AnticipateParams, } from "./anticipate.js";
|
|
11
|
+
export { SPRING_PRESETS, gentleSpring, wobblySpring, stiffSpring, slowSpring, molassesSpring, } from "./spring-presets.js";
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/builders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EACL,UAAU,EACV,YAAY,EACZ,aAAa,EACb,eAAe,EACf,KAAK,gBAAgB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,GACf,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { bezier, bezierEase, bezierEaseIn, bezierEaseOut, bezierEaseInOut } from "./bezier.js";
|
|
2
|
+
export { spring } from "./spring.js";
|
|
3
|
+
export { custom } from "./custom.js";
|
|
4
|
+
export { rough } from "./rough.js";
|
|
5
|
+
export { wiggle } from "./wiggle.js";
|
|
6
|
+
export { slow } from "./slow.js";
|
|
7
|
+
export { expoScale } from "./expoScale.js";
|
|
8
|
+
export { gravity } from "./gravity.js";
|
|
9
|
+
export { breathe } from "./breathe.js";
|
|
10
|
+
export { anticipate, anticipateIn, anticipateOut, anticipateInOut, } from "./anticipate.js";
|
|
11
|
+
export { SPRING_PRESETS, gentleSpring, wobblySpring, stiffSpring, slowSpring, molassesSpring, } from "./spring-presets.js";
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/builders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,KAAK,EAAoB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAsC,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAmB,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAsB,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAsB,MAAM,cAAc,CAAC;AAC3D,OAAO,EACL,UAAU,EACV,YAAY,EACZ,aAAa,EACb,eAAe,GAEhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,GACf,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { EasingFn } from "../types.js";
|
|
2
|
+
export type RoughParams = {
|
|
3
|
+
/** Base ease to perturb. Default linear. */
|
|
4
|
+
template: EasingFn;
|
|
5
|
+
/** Magnitude of jitter. Typical 0.05–0.3. Default 0.15. */
|
|
6
|
+
strength: number;
|
|
7
|
+
/** Number of jitter points along the curve. More = finer noise. Default 20. */
|
|
8
|
+
points: number;
|
|
9
|
+
/** Taper the jitter so it dies toward endpoints. */
|
|
10
|
+
taper: "none" | "in" | "out" | "both";
|
|
11
|
+
/** Randomize x-spacing of jitter points. Default true. */
|
|
12
|
+
randomize: boolean;
|
|
13
|
+
/** Seed for deterministic output. Pass to get the same rough curve every call. */
|
|
14
|
+
seed: number;
|
|
15
|
+
};
|
|
16
|
+
export declare const rough: import("../types.js").ParametricEasing<RoughParams>;
|
|
17
|
+
//# sourceMappingURL=rough.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rough.d.ts","sourceRoot":"","sources":["../../src/builders/rough.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,4CAA4C;IAC5C,QAAQ,EAAE,QAAQ,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAmCF,eAAO,MAAM,KAAK,qDA8BjB,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { defineParametricEasing } from "../define.js";
|
|
2
|
+
import { linear } from "../easings/linear.js";
|
|
3
|
+
const DEFAULTS = {
|
|
4
|
+
template: linear,
|
|
5
|
+
strength: 0.15,
|
|
6
|
+
points: 20,
|
|
7
|
+
taper: "both",
|
|
8
|
+
randomize: true,
|
|
9
|
+
seed: 0,
|
|
10
|
+
};
|
|
11
|
+
function mulberry32(seed) {
|
|
12
|
+
let s = seed >>> 0;
|
|
13
|
+
return () => {
|
|
14
|
+
s = (s + 0x6d2b79f5) >>> 0;
|
|
15
|
+
let t = s;
|
|
16
|
+
t = Math.imul(t ^ (t >>> 15), t | 1);
|
|
17
|
+
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
|
|
18
|
+
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
function taperAmount(taper, x) {
|
|
22
|
+
switch (taper) {
|
|
23
|
+
case "in":
|
|
24
|
+
return x;
|
|
25
|
+
case "out":
|
|
26
|
+
return 1 - x;
|
|
27
|
+
case "both":
|
|
28
|
+
return 2 * (0.5 - Math.abs(x - 0.5));
|
|
29
|
+
case "none":
|
|
30
|
+
return 1;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
export const rough = defineParametricEasing("rough", DEFAULTS, ({ template, strength, points, taper, randomize, seed }) => {
|
|
34
|
+
const seedValue = seed === 0 ? Math.floor(Math.random() * 2 ** 31) : seed;
|
|
35
|
+
const rng = mulberry32(seedValue);
|
|
36
|
+
const n = Math.max(3, Math.floor(points));
|
|
37
|
+
const xs = [0];
|
|
38
|
+
for (let i = 1; i < n - 1; i++)
|
|
39
|
+
xs.push(randomize ? rng() : i / (n - 1));
|
|
40
|
+
xs.push(1);
|
|
41
|
+
xs.sort((a, b) => a - b);
|
|
42
|
+
const ys = xs.map((x) => {
|
|
43
|
+
const base = template(x);
|
|
44
|
+
const jitter = (rng() - 0.5) * 2 * strength * taperAmount(taper, x);
|
|
45
|
+
return base + jitter;
|
|
46
|
+
});
|
|
47
|
+
return (t) => {
|
|
48
|
+
for (let i = 1; i < xs.length; i++) {
|
|
49
|
+
const x1 = xs[i];
|
|
50
|
+
if (t <= x1) {
|
|
51
|
+
const x0 = xs[i - 1];
|
|
52
|
+
const span = x1 - x0;
|
|
53
|
+
if (span === 0)
|
|
54
|
+
return ys[i];
|
|
55
|
+
const u = (t - x0) / span;
|
|
56
|
+
return ys[i - 1] + (ys[i] - ys[i - 1]) * u;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return ys[ys.length - 1];
|
|
60
|
+
};
|
|
61
|
+
});
|
|
62
|
+
//# sourceMappingURL=rough.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rough.js","sourceRoot":"","sources":["../../src/builders/rough.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type SlowParams = {
|
|
2
|
+
/** Fraction of duration spent in the slow linear middle. 0–1. Default 0.7. */
|
|
3
|
+
linearRatio: number;
|
|
4
|
+
/** Strength of the fast edges. Higher = more dramatic edges + slower middle. Default 0.7. */
|
|
5
|
+
power: number;
|
|
6
|
+
/** If true, reverse the second half so the curve returns to start. */
|
|
7
|
+
yoyoMode: boolean;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* "Slow motion" ease: fast at the start and end, slow (nearly constant)
|
|
11
|
+
* through the middle. Opposite of an inOut shape — the linear middle
|
|
12
|
+
* section lives off the diagonal, so the midpoint value changes slowly
|
|
13
|
+
* with time.
|
|
14
|
+
*/
|
|
15
|
+
export declare const slow: import("../types.js").ParametricEasing<SlowParams>;
|
|
16
|
+
//# sourceMappingURL=slow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slow.d.ts","sourceRoot":"","sources":["../../src/builders/slow.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAQF;;;;;GAKG;AACH,eAAO,MAAM,IAAI,oDAgDhB,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { defineParametricEasing } from "../define.js";
|
|
2
|
+
const DEFAULTS = {
|
|
3
|
+
linearRatio: 0.7,
|
|
4
|
+
power: 0.7,
|
|
5
|
+
yoyoMode: false,
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* "Slow motion" ease: fast at the start and end, slow (nearly constant)
|
|
9
|
+
* through the middle. Opposite of an inOut shape — the linear middle
|
|
10
|
+
* section lives off the diagonal, so the midpoint value changes slowly
|
|
11
|
+
* with time.
|
|
12
|
+
*/
|
|
13
|
+
export const slow = defineParametricEasing("slow", DEFAULTS, ({ linearRatio, power, yoyoMode }) => {
|
|
14
|
+
const lr = Math.max(0, Math.min(1, linearRatio));
|
|
15
|
+
const p = Math.max(0, power);
|
|
16
|
+
const edge = (1 - lr) / 2;
|
|
17
|
+
// Off-diagonal offset of the linear section. At power=0 the linear
|
|
18
|
+
// section sits ON the diagonal (slow degenerates to linear); at higher
|
|
19
|
+
// powers it collapses toward y=0.5, making the middle genuinely slow.
|
|
20
|
+
const edgeY = (0.5 - edge) / (1 + p * 2);
|
|
21
|
+
const mid1 = 0.5 - edgeY;
|
|
22
|
+
const mid2 = 0.5 + edgeY;
|
|
23
|
+
const middleSpan = mid2 - mid1;
|
|
24
|
+
const middleSlope = lr === 0 ? 0 : middleSpan / lr;
|
|
25
|
+
// Edges blend a power-n ease-out with a linear segment whose slope
|
|
26
|
+
// matches the middle. That way the corner is a smooth curve, not a
|
|
27
|
+
// visible kink. Higher `power` sharpens the edge initial rise.
|
|
28
|
+
const edgeN = 2 + p * 6;
|
|
29
|
+
// Fraction contributed by the linear component of the blend, chosen so
|
|
30
|
+
// that the edge's end-slope equals the middle slope exactly → C¹
|
|
31
|
+
// continuity at the join. (Derived: y'(u=1) in edge = mid1 * (1-a) / edge.)
|
|
32
|
+
const linearShare = edge === 0 || mid1 === 0 ? 0 : Math.min(1, (middleSlope * edge) / mid1);
|
|
33
|
+
const powerShare = 1 - linearShare;
|
|
34
|
+
return (t) => {
|
|
35
|
+
let result;
|
|
36
|
+
if (edge === 0) {
|
|
37
|
+
result = t;
|
|
38
|
+
}
|
|
39
|
+
else if (t < edge) {
|
|
40
|
+
const u = t / edge;
|
|
41
|
+
const v = powerShare * (1 - (1 - u) ** edgeN) + linearShare * u;
|
|
42
|
+
result = mid1 * v;
|
|
43
|
+
}
|
|
44
|
+
else if (t > 1 - edge) {
|
|
45
|
+
const u = (t - (1 - edge)) / edge;
|
|
46
|
+
const v = powerShare * (u ** edgeN) + linearShare * u;
|
|
47
|
+
result = mid2 + (1 - mid2) * v;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
const u = (t - edge) / lr;
|
|
51
|
+
result = mid1 + middleSpan * u;
|
|
52
|
+
}
|
|
53
|
+
if (yoyoMode) {
|
|
54
|
+
return result < 0.5 ? result * 2 : (1 - result) * 2;
|
|
55
|
+
}
|
|
56
|
+
return result;
|
|
57
|
+
};
|
|
58
|
+
}, { exactEndpoints: false });
|
|
59
|
+
//# sourceMappingURL=slow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slow.js","sourceRoot":"","sources":["../../src/builders/slow.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pre-configured spring feels matching React Spring's well-known configs.
|
|
3
|
+
* Import directly when you want a named spring rather than tuning by hand.
|
|
4
|
+
*/
|
|
5
|
+
export declare const SPRING_PRESETS: {
|
|
6
|
+
readonly gentle: {
|
|
7
|
+
readonly stiffness: 100;
|
|
8
|
+
readonly damping: 15;
|
|
9
|
+
readonly mass: 1;
|
|
10
|
+
readonly velocity: 0;
|
|
11
|
+
};
|
|
12
|
+
readonly default: {
|
|
13
|
+
readonly stiffness: 170;
|
|
14
|
+
readonly damping: 26;
|
|
15
|
+
readonly mass: 1;
|
|
16
|
+
readonly velocity: 0;
|
|
17
|
+
};
|
|
18
|
+
readonly wobbly: {
|
|
19
|
+
readonly stiffness: 180;
|
|
20
|
+
readonly damping: 12;
|
|
21
|
+
readonly mass: 1;
|
|
22
|
+
readonly velocity: 0;
|
|
23
|
+
};
|
|
24
|
+
readonly stiff: {
|
|
25
|
+
readonly stiffness: 210;
|
|
26
|
+
readonly damping: 20;
|
|
27
|
+
readonly mass: 1;
|
|
28
|
+
readonly velocity: 0;
|
|
29
|
+
};
|
|
30
|
+
readonly slow: {
|
|
31
|
+
readonly stiffness: 80;
|
|
32
|
+
readonly damping: 20;
|
|
33
|
+
readonly mass: 1;
|
|
34
|
+
readonly velocity: 0;
|
|
35
|
+
};
|
|
36
|
+
readonly molasses: {
|
|
37
|
+
readonly stiffness: 280;
|
|
38
|
+
readonly damping: 120;
|
|
39
|
+
readonly mass: 1;
|
|
40
|
+
readonly velocity: 0;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
export declare const gentleSpring: import("../types.js").EasingFn;
|
|
44
|
+
export declare const wobblySpring: import("../types.js").EasingFn;
|
|
45
|
+
export declare const stiffSpring: import("../types.js").EasingFn;
|
|
46
|
+
export declare const slowSpring: import("../types.js").EasingFn;
|
|
47
|
+
export declare const molassesSpring: import("../types.js").EasingFn;
|
|
48
|
+
//# sourceMappingURL=spring-presets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spring-presets.d.ts","sourceRoot":"","sources":["../../src/builders/spring-presets.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOsB,CAAC;AAElD,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAC/D,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAC/D,eAAO,MAAM,WAAW,gCAAoC,CAAC;AAC7D,eAAO,MAAM,UAAU,gCAAmC,CAAC;AAC3D,eAAO,MAAM,cAAc,gCAAuC,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { spring } from "./spring.js";
|
|
2
|
+
/**
|
|
3
|
+
* Pre-configured spring feels matching React Spring's well-known configs.
|
|
4
|
+
* Import directly when you want a named spring rather than tuning by hand.
|
|
5
|
+
*/
|
|
6
|
+
export const SPRING_PRESETS = {
|
|
7
|
+
gentle: { stiffness: 100, damping: 15, mass: 1, velocity: 0 },
|
|
8
|
+
default: { stiffness: 170, damping: 26, mass: 1, velocity: 0 },
|
|
9
|
+
wobbly: { stiffness: 180, damping: 12, mass: 1, velocity: 0 },
|
|
10
|
+
stiff: { stiffness: 210, damping: 20, mass: 1, velocity: 0 },
|
|
11
|
+
slow: { stiffness: 80, damping: 20, mass: 1, velocity: 0 },
|
|
12
|
+
molasses: { stiffness: 280, damping: 120, mass: 1, velocity: 0 },
|
|
13
|
+
};
|
|
14
|
+
export const gentleSpring = spring.with(SPRING_PRESETS.gentle);
|
|
15
|
+
export const wobblySpring = spring.with(SPRING_PRESETS.wobbly);
|
|
16
|
+
export const stiffSpring = spring.with(SPRING_PRESETS.stiff);
|
|
17
|
+
export const slowSpring = spring.with(SPRING_PRESETS.slow);
|
|
18
|
+
export const molassesSpring = spring.with(SPRING_PRESETS.molasses);
|
|
19
|
+
//# sourceMappingURL=spring-presets.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spring-presets.js","sourceRoot":"","sources":["../../src/builders/spring-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC7D,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC9D,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC7D,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC5D,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC1D,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE;CACjB,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC/D,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC7D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type SpringParams = {
|
|
2
|
+
/** Spring stiffness (higher = faster, more aggressive). Default 170 matches Framer Motion. */
|
|
3
|
+
stiffness: number;
|
|
4
|
+
/** Damping coefficient (higher = less oscillation). Default 26 is underdamped but close to critical. */
|
|
5
|
+
damping: number;
|
|
6
|
+
/** Object mass (higher = slower, more inertia). Default 1. */
|
|
7
|
+
mass: number;
|
|
8
|
+
/** Initial velocity at t=0. Default 0. */
|
|
9
|
+
velocity: number;
|
|
10
|
+
};
|
|
11
|
+
export declare const spring: import("../types.js").ParametricEasing<SpringParams>;
|
|
12
|
+
//# sourceMappingURL=spring.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../../src/builders/spring.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,8FAA8F;IAC9F,SAAS,EAAE,MAAM,CAAC;IAClB,wGAAwG;IACxG,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AA6CF,eAAO,MAAM,MAAM,sDAIjB,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { defineParametricEasing } from "../define.js";
|
|
2
|
+
const DEFAULTS = {
|
|
3
|
+
stiffness: 170,
|
|
4
|
+
damping: 26,
|
|
5
|
+
mass: 1,
|
|
6
|
+
velocity: 0,
|
|
7
|
+
};
|
|
8
|
+
const SETTLE_EPSILON = 1e-4;
|
|
9
|
+
const MAX_SETTLE_TIME = 10;
|
|
10
|
+
const SETTLE_SAMPLES = 1000;
|
|
11
|
+
function makeSpringFunction({ stiffness, damping, mass, velocity }) {
|
|
12
|
+
const w0 = Math.sqrt(stiffness / mass);
|
|
13
|
+
const zeta = damping / (2 * Math.sqrt(stiffness * mass));
|
|
14
|
+
if (zeta < 1) {
|
|
15
|
+
const wd = w0 * Math.sqrt(1 - zeta * zeta);
|
|
16
|
+
const B = (velocity - zeta * w0 * -1) / wd;
|
|
17
|
+
return (t) => 1 + Math.exp(-zeta * w0 * t) * (-Math.cos(wd * t) + B * Math.sin(wd * t));
|
|
18
|
+
}
|
|
19
|
+
if (zeta === 1) {
|
|
20
|
+
const B = velocity - w0;
|
|
21
|
+
return (t) => 1 + (-1 + B * t) * Math.exp(-w0 * t);
|
|
22
|
+
}
|
|
23
|
+
const r = w0 * Math.sqrt(zeta * zeta - 1);
|
|
24
|
+
const lPlus = -zeta * w0 + r;
|
|
25
|
+
const lMinus = -zeta * w0 - r;
|
|
26
|
+
const det = lMinus - lPlus;
|
|
27
|
+
const A = (-lMinus - velocity) / det;
|
|
28
|
+
const B = (lPlus + velocity) / det;
|
|
29
|
+
return (t) => 1 + A * Math.exp(lPlus * t) + B * Math.exp(lMinus * t);
|
|
30
|
+
}
|
|
31
|
+
function findSettleTime(fn) {
|
|
32
|
+
let lastUnsettled = 0;
|
|
33
|
+
const step = MAX_SETTLE_TIME / SETTLE_SAMPLES;
|
|
34
|
+
for (let i = 1; i <= SETTLE_SAMPLES; i++) {
|
|
35
|
+
const t = i * step;
|
|
36
|
+
if (Math.abs(fn(t) - 1) > SETTLE_EPSILON)
|
|
37
|
+
lastUnsettled = t;
|
|
38
|
+
}
|
|
39
|
+
return Math.max(lastUnsettled + step * 2, step * 10);
|
|
40
|
+
}
|
|
41
|
+
export const spring = defineParametricEasing("spring", DEFAULTS, (params) => {
|
|
42
|
+
const raw = makeSpringFunction(params);
|
|
43
|
+
const settle = findSettleTime(raw);
|
|
44
|
+
return (t) => raw(t * settle);
|
|
45
|
+
});
|
|
46
|
+
//# sourceMappingURL=spring.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spring.js","sourceRoot":"","sources":["../../src/builders/spring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAatD,MAAM,QAAQ,GAAiB;IAC7B,SAAS,EAAE,GAAG;IACd,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,cAAc,GAAG,IAAI,CAAC;AAC5B,MAAM,eAAe,GAAG,EAAE,CAAC;AAC3B,MAAM,cAAc,GAAG,IAAI,CAAC;AAE5B,SAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAgB;IAC9E,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC;IAEzD,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;QACb,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QAC3C,OAAO,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAClG,CAAC;IACD,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,MAAM,CAAC,GAAG,QAAQ,GAAG,EAAE,CAAC;QACxB,OAAO,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7D,CAAC;IACD,MAAM,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9B,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IACrC,MAAM,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IACnC,OAAO,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC/E,CAAC;AAED,SAAS,cAAc,CAAC,EAAyB;IAC/C,IAAI,aAAa,GAAG,CAAC,CAAC;IACtB,MAAM,IAAI,GAAG,eAAe,GAAG,cAAc,CAAC;IAC9C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,cAAc,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,cAAc;YAAE,aAAa,GAAG,CAAC,CAAC;IAC9D,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;AACvD,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;IAC1E,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IACnC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;AAChC,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type WiggleType = "easeOut" | "easeInOut" | "anticipate" | "uniform";
|
|
2
|
+
export type WiggleParams = {
|
|
3
|
+
/** Number of back-and-forth oscillations across [0, 1]. Default 10. */
|
|
4
|
+
wiggles: number;
|
|
5
|
+
/** Envelope shape. */
|
|
6
|
+
type: WiggleType;
|
|
7
|
+
};
|
|
8
|
+
export declare const wiggle: import("../types.js").ParametricEasing<WiggleParams>;
|
|
9
|
+
//# sourceMappingURL=wiggle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wiggle.d.ts","sourceRoot":"","sources":["../../src/builders/wiggle.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;AAE5E,MAAM,MAAM,YAAY,GAAG;IACzB,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAsBF,eAAO,MAAM,MAAM,sDAQlB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { defineParametricEasing } from "../define.js";
|
|
2
|
+
const DEFAULTS = {
|
|
3
|
+
wiggles: 10,
|
|
4
|
+
type: "easeOut",
|
|
5
|
+
};
|
|
6
|
+
const TAU = Math.PI * 2;
|
|
7
|
+
function envelope(type, t) {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case "easeOut":
|
|
10
|
+
return 1 - t;
|
|
11
|
+
case "easeInOut":
|
|
12
|
+
return 4 * t * (1 - t);
|
|
13
|
+
case "anticipate":
|
|
14
|
+
return t < 0.5 ? 2 * t : 2 - 2 * t;
|
|
15
|
+
case "uniform":
|
|
16
|
+
return 1;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
export const wiggle = defineParametricEasing("wiggle", DEFAULTS, ({ wiggles, type }) => {
|
|
20
|
+
const n = Math.max(1, wiggles);
|
|
21
|
+
return (t) => envelope(type, t) * Math.sin(t * TAU * n);
|
|
22
|
+
}, { exactEndpoints: false });
|
|
23
|
+
//# sourceMappingURL=wiggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wiggle.js","sourceRoot":"","sources":["../../src/builders/wiggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAWtD,MAAM,QAAQ,GAAiB;IAC7B,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AAExB,SAAS,QAAQ,CAAC,IAAgB,EAAE,CAAS;IAC3C,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,CAAC,GAAG,CAAC,CAAC;QACf,KAAK,WAAW;YACd,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACzB,KAAK,YAAY;YACf,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrC,KAAK,SAAS;YACZ,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,sBAAsB,CAC1C,QAAQ,EACR,QAAQ,EACR,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACpB,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC/B,OAAO,CAAC,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;AAClE,CAAC,EACD,EAAE,cAAc,EAAE,KAAK,EAAE,CAC1B,CAAC"}
|
package/dist/css.d.ts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { EasingFn } from "./types.js";
|
|
2
|
+
/**
|
|
3
|
+
* Convert any easing to a CSS `linear()` timing-function value by sampling
|
|
4
|
+
* the curve at evenly-spaced points.
|
|
5
|
+
*
|
|
6
|
+
* ```css
|
|
7
|
+
* animation-timing-function: linear(0, 0.3, 0.7, 1);
|
|
8
|
+
* ```
|
|
9
|
+
*
|
|
10
|
+
* CSS interpolates linearly between the sampled points, so higher sample
|
|
11
|
+
* counts produce smoother-looking motion. 40 samples is a good default
|
|
12
|
+
* balance between fidelity and string length. Requires browsers that
|
|
13
|
+
* support CSS Easing Functions Level 2 (~all majors since 2024).
|
|
14
|
+
*
|
|
15
|
+
* @param ease An EasingFn or plain (t: number) => number
|
|
16
|
+
* @param samples Number of samples + 1 across [0, 1]. Default 40.
|
|
17
|
+
*/
|
|
18
|
+
export declare function toCSSLinear(ease: EasingFn | ((t: number) => number), samples?: number): string;
|
|
19
|
+
/**
|
|
20
|
+
* Emit a CSS cubic-bezier() timing function. Exact representation; no
|
|
21
|
+
* sampling. Use this when you'd otherwise build an easing via `bezier()`
|
|
22
|
+
* from this package.
|
|
23
|
+
*
|
|
24
|
+
* ```css
|
|
25
|
+
* animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare function toCSSBezier(p1x: number, p1y: number, p2x: number, p2y: number): string;
|
|
29
|
+
/**
|
|
30
|
+
* Emit a `@keyframes` block driving a numeric CSS property (e.g. translate,
|
|
31
|
+
* opacity) through an ease. The animation should be declared with
|
|
32
|
+
* `animation-timing-function: linear` because the easing is pre-baked into
|
|
33
|
+
* the keyframes.
|
|
34
|
+
*
|
|
35
|
+
* ```css
|
|
36
|
+
* ${toCSSKeyframes("slideIn", "transform", (v) => `translateX(${v * 100}%)`, ease)}
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export declare function toCSSKeyframes(name: string, property: string, valueForProgress: (easedValue: number) => string, ease: EasingFn | ((t: number) => number), samples?: number): string;
|
|
40
|
+
//# sourceMappingURL=css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,EAAE,OAAO,SAAK,GAAG,MAAM,CAU1F;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAEtF;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,EAChD,IAAI,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,EACxC,OAAO,SAAK,GACX,MAAM,CAaR"}
|
package/dist/css.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert any easing to a CSS `linear()` timing-function value by sampling
|
|
3
|
+
* the curve at evenly-spaced points.
|
|
4
|
+
*
|
|
5
|
+
* ```css
|
|
6
|
+
* animation-timing-function: linear(0, 0.3, 0.7, 1);
|
|
7
|
+
* ```
|
|
8
|
+
*
|
|
9
|
+
* CSS interpolates linearly between the sampled points, so higher sample
|
|
10
|
+
* counts produce smoother-looking motion. 40 samples is a good default
|
|
11
|
+
* balance between fidelity and string length. Requires browsers that
|
|
12
|
+
* support CSS Easing Functions Level 2 (~all majors since 2024).
|
|
13
|
+
*
|
|
14
|
+
* @param ease An EasingFn or plain (t: number) => number
|
|
15
|
+
* @param samples Number of samples + 1 across [0, 1]. Default 40.
|
|
16
|
+
*/
|
|
17
|
+
export function toCSSLinear(ease, samples = 40) {
|
|
18
|
+
if (samples < 1 || !Number.isInteger(samples)) {
|
|
19
|
+
throw new RangeError(`toCSSLinear: samples must be a positive integer; got ${samples}`);
|
|
20
|
+
}
|
|
21
|
+
const values = [];
|
|
22
|
+
for (let i = 0; i <= samples; i++) {
|
|
23
|
+
const t = i / samples;
|
|
24
|
+
values.push(formatNumber(ease(t)));
|
|
25
|
+
}
|
|
26
|
+
return `linear(${values.join(", ")})`;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Emit a CSS cubic-bezier() timing function. Exact representation; no
|
|
30
|
+
* sampling. Use this when you'd otherwise build an easing via `bezier()`
|
|
31
|
+
* from this package.
|
|
32
|
+
*
|
|
33
|
+
* ```css
|
|
34
|
+
* animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export function toCSSBezier(p1x, p1y, p2x, p2y) {
|
|
38
|
+
return `cubic-bezier(${formatNumber(p1x)}, ${formatNumber(p1y)}, ${formatNumber(p2x)}, ${formatNumber(p2y)})`;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Emit a `@keyframes` block driving a numeric CSS property (e.g. translate,
|
|
42
|
+
* opacity) through an ease. The animation should be declared with
|
|
43
|
+
* `animation-timing-function: linear` because the easing is pre-baked into
|
|
44
|
+
* the keyframes.
|
|
45
|
+
*
|
|
46
|
+
* ```css
|
|
47
|
+
* ${toCSSKeyframes("slideIn", "transform", (v) => `translateX(${v * 100}%)`, ease)}
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
50
|
+
export function toCSSKeyframes(name, property, valueForProgress, ease, samples = 20) {
|
|
51
|
+
if (samples < 2) {
|
|
52
|
+
throw new RangeError(`toCSSKeyframes: samples must be >= 2; got ${samples}`);
|
|
53
|
+
}
|
|
54
|
+
const lines = [`@keyframes ${name} {`];
|
|
55
|
+
for (let i = 0; i <= samples; i++) {
|
|
56
|
+
const t = i / samples;
|
|
57
|
+
const pct = (t * 100).toFixed(2).replace(/\.?0+$/, "");
|
|
58
|
+
const value = valueForProgress(ease(t));
|
|
59
|
+
lines.push(` ${pct}% { ${property}: ${value}; }`);
|
|
60
|
+
}
|
|
61
|
+
lines.push("}");
|
|
62
|
+
return lines.join("\n");
|
|
63
|
+
}
|
|
64
|
+
function formatNumber(n) {
|
|
65
|
+
if (!Number.isFinite(n))
|
|
66
|
+
return "0";
|
|
67
|
+
if (Number.isInteger(n))
|
|
68
|
+
return n.toString();
|
|
69
|
+
return Number(n.toFixed(5)).toString();
|
|
70
|
+
}
|
|
71
|
+
//# sourceMappingURL=css.js.map
|
package/dist/css.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,WAAW,CAAC,IAAwC,EAAE,OAAO,GAAG,EAAE;IAChF,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;QAC9C,MAAM,IAAI,UAAU,CAAC,wDAAwD,OAAO,EAAE,CAAC,CAAC;IAC1F,CAAC;IACD,MAAM,MAAM,GAAa,EAAE,CAAC;IAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACtB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,UAAU,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,GAAW,EAAE,GAAW,EAAE,GAAW,EAAE,GAAW;IAC5E,OAAO,gBAAgB,YAAY,CAAC,GAAG,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC;AAChH,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc,CAC5B,IAAY,EACZ,QAAgB,EAChB,gBAAgD,EAChD,IAAwC,EACxC,OAAO,GAAG,EAAE;IAEZ,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,MAAM,IAAI,UAAU,CAAC,6CAA6C,OAAO,EAAE,CAAC,CAAC;IAC/E,CAAC;IACD,MAAM,KAAK,GAAa,CAAC,cAAc,IAAI,IAAI,CAAC,CAAC;IACjD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QACtB,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACvD,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,QAAQ,KAAK,KAAK,KAAK,CAAC,CAAC;IACrD,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,SAAS,YAAY,CAAC,CAAS;IAC7B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAE,OAAO,GAAG,CAAC;IACpC,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;QAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC7C,OAAO,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;AACzC,CAAC"}
|
package/dist/define.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { EasingFn, ParametricEasing } from "./types.js";
|
|
2
|
+
export type DefineEasingOptions = {
|
|
3
|
+
/**
|
|
4
|
+
* When true (default), t ≤ 0 returns 0 and t ≥ 1 returns 1 regardless of
|
|
5
|
+
* the underlying formula. Disable for easings that intentionally don't
|
|
6
|
+
* hit (0, 0) or (1, 1) — notably `steps(n, "start")`.
|
|
7
|
+
*/
|
|
8
|
+
exactEndpoints?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare function defineEasing(name: string, fn: (t: number) => number, options?: DefineEasingOptions): EasingFn;
|
|
11
|
+
export declare function defineParametricEasing<P extends object>(name: string, defaults: P, build: (params: P) => (t: number) => number, options?: DefineEasingOptions): ParametricEasing<P>;
|
|
12
|
+
//# sourceMappingURL=define.d.ts.map
|