use-scroll-animate 4.9.0 → 5.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/CHANGELOG.md +33 -0
- package/README.md +2 -1
- package/README_ja.md +1 -0
- package/README_zh.md +2 -1
- package/dist/chunks/{base-BvpQ4Ggj.cjs → base-B5i8qQPR.cjs} +46 -40
- package/dist/chunks/base-B5i8qQPR.cjs.map +1 -0
- package/dist/chunks/{base-DbbRUxaa.js → base-C3Sw9sAO.js} +46 -41
- package/dist/chunks/base-C3Sw9sAO.js.map +1 -0
- package/dist/chunks/{core-BWO7JKJ5.cjs → core-BDcszY4L.cjs} +2 -2
- package/dist/chunks/{core-BWO7JKJ5.cjs.map → core-BDcszY4L.cjs.map} +1 -1
- package/dist/chunks/{core-CcaSsbV8.js → core-BTf__I-8.js} +2 -2
- package/dist/chunks/{core-CcaSsbV8.js.map → core-BTf__I-8.js.map} +1 -1
- package/dist/chunks/{core-CCAM3nKw.cjs → core-BjOYKSrV.cjs} +2 -2
- package/dist/chunks/{core-CCAM3nKw.cjs.map → core-BjOYKSrV.cjs.map} +1 -1
- package/dist/chunks/{core-BVTuet9o.js → core-DN3hHbHh.js} +2 -2
- package/dist/chunks/{core-BVTuet9o.js.map → core-DN3hHbHh.js.map} +1 -1
- package/dist/chunks/fx-B8hk1Fby.cjs +114 -0
- package/dist/chunks/fx-B8hk1Fby.cjs.map +1 -0
- package/dist/chunks/fx-ChjxrMBo.js +109 -0
- package/dist/chunks/fx-ChjxrMBo.js.map +1 -0
- package/dist/chunks/{index-tags-Dh8nwXqw.js → index-tags-DucKMQr_.js} +2 -1
- package/dist/chunks/{index-tags-Dh8nwXqw.js.map → index-tags-DucKMQr_.js.map} +1 -1
- package/dist/chunks/{index-tags-CIRY2KnU.cjs → index-tags-wv0R_vkO.cjs} +2 -1
- package/dist/chunks/{index-tags-CIRY2KnU.cjs.map → index-tags-wv0R_vkO.cjs.map} +1 -1
- package/dist/chunks/{spring-fFkqE9J0.cjs → spring--oZh55tB.cjs} +2 -2
- package/dist/chunks/{spring-fFkqE9J0.cjs.map → spring--oZh55tB.cjs.map} +1 -1
- package/dist/chunks/{spring-B6w7mVCU.js → spring-CckMe3x0.js} +2 -2
- package/dist/chunks/{spring-B6w7mVCU.js.map → spring-CckMe3x0.js.map} +1 -1
- package/dist/chunks/{variants-Cal4DB0E.js → variants-Bsevy6Xm.js} +2 -2
- package/dist/chunks/{variants-Cal4DB0E.js.map → variants-Bsevy6Xm.js.map} +1 -1
- package/dist/chunks/{variants-C8xj8gfd.cjs → variants-DxPmgrNX.cjs} +2 -2
- package/dist/chunks/{variants-C8xj8gfd.cjs.map → variants-DxPmgrNX.cjs.map} +1 -1
- package/dist/components/a11y.cjs +3 -2
- package/dist/components/a11y.cjs.map +1 -1
- package/dist/components/a11y.d.cts +1 -0
- package/dist/components/a11y.d.ts +1 -0
- package/dist/components/a11y.js +4 -3
- package/dist/components/a11y.js.map +1 -1
- package/dist/components/angular.cjs +8 -6
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +33 -4
- package/dist/components/angular.d.ts +33 -4
- package/dist/components/angular.js +8 -6
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.cjs +2 -4
- package/dist/components/background.cjs.map +1 -1
- package/dist/components/background.d.cts +2 -47
- package/dist/components/background.d.ts +2 -47
- package/dist/components/background.js +3 -4
- package/dist/components/background.js.map +1 -1
- package/dist/components/bridge.cjs +1 -1
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.cjs +2 -4
- package/dist/components/cards.cjs.map +1 -1
- package/dist/components/cards.d.cts +2 -47
- package/dist/components/cards.d.ts +2 -47
- package/dist/components/cards.js +2 -3
- package/dist/components/cards.js.map +1 -1
- package/dist/components/click.cjs +24 -130
- package/dist/components/click.cjs.map +1 -1
- package/dist/components/click.d.cts +2 -47
- package/dist/components/click.d.ts +2 -47
- package/dist/components/click.js +4 -109
- package/dist/components/click.js.map +1 -1
- package/dist/components/depth.cjs +3 -5
- package/dist/components/depth.cjs.map +1 -1
- package/dist/components/depth.d.cts +2 -47
- package/dist/components/depth.d.ts +2 -47
- package/dist/components/depth.js +3 -4
- package/dist/components/depth.js.map +1 -1
- package/dist/components/effects.cjs +265 -0
- package/dist/components/effects.cjs.map +1 -0
- package/dist/components/effects.d.cts +66 -0
- package/dist/components/effects.d.ts +66 -0
- package/dist/components/effects.js +258 -0
- package/dist/components/effects.js.map +1 -0
- package/dist/components/feedback.cjs +1 -3
- package/dist/components/feedback.cjs.map +1 -1
- package/dist/components/feedback.d.cts +2 -47
- package/dist/components/feedback.d.ts +2 -47
- package/dist/components/feedback.js +1 -2
- package/dist/components/feedback.js.map +1 -1
- package/dist/components/fx.cjs +289 -0
- package/dist/components/fx.cjs.map +1 -0
- package/dist/components/fx.css +3 -0
- package/dist/components/fx.d.cts +114 -0
- package/dist/components/fx.d.ts +114 -0
- package/dist/components/fx.js +275 -0
- package/dist/components/fx.js.map +1 -0
- package/dist/components/gesture.cjs +3 -5
- package/dist/components/gesture.cjs.map +1 -1
- package/dist/components/gesture.d.cts +2 -47
- package/dist/components/gesture.d.ts +2 -47
- package/dist/components/gesture.js +4 -5
- package/dist/components/gesture.js.map +1 -1
- package/dist/components/interaction.cjs +1 -3
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.d.cts +2 -47
- package/dist/components/interaction.d.ts +2 -47
- package/dist/components/interaction.js +1 -2
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/jsx.d.cts +1 -0
- package/dist/components/jsx.d.ts +1 -0
- package/dist/components/layout.cjs +1 -3
- package/dist/components/layout.cjs.map +1 -1
- package/dist/components/layout.d.cts +2 -47
- package/dist/components/layout.d.ts +2 -47
- package/dist/components/layout.js +2 -3
- package/dist/components/layout.js.map +1 -1
- package/dist/components/lazy.cjs +2 -1
- package/dist/components/lazy.cjs.map +1 -1
- package/dist/components/lazy.d.cts +1 -0
- package/dist/components/lazy.d.ts +1 -0
- package/dist/components/lazy.js +2 -1
- package/dist/components/lazy.js.map +1 -1
- package/dist/components/lite.cjs +366 -64
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +349 -65
- package/dist/components/lite.js.map +1 -1
- package/dist/components/packs.cjs +1 -3
- package/dist/components/packs.cjs.map +1 -1
- package/dist/components/packs.d.cts +2 -47
- package/dist/components/packs.d.ts +2 -47
- package/dist/components/packs.js +2 -3
- package/dist/components/packs.js.map +1 -1
- package/dist/components/page.cjs +33 -22
- package/dist/components/page.cjs.map +1 -1
- package/dist/components/page.d.cts +15 -52
- package/dist/components/page.d.ts +15 -52
- package/dist/components/page.js +33 -22
- package/dist/components/page.js.map +1 -1
- package/dist/components/perf.cjs +3 -4
- package/dist/components/perf.cjs.map +1 -1
- package/dist/components/perf.d.cts +1 -0
- package/dist/components/perf.d.ts +1 -0
- package/dist/components/perf.js +4 -5
- package/dist/components/perf.js.map +1 -1
- package/dist/components/physics.cjs +2 -4
- package/dist/components/physics.cjs.map +1 -1
- package/dist/components/physics.d.cts +2 -47
- package/dist/components/physics.d.ts +2 -47
- package/dist/components/physics.js +3 -4
- package/dist/components/physics.js.map +1 -1
- package/dist/components/react.cjs +1 -1
- package/dist/components/react.js +1 -1
- package/dist/components/reveal.cjs +1 -3
- package/dist/components/reveal.cjs.map +1 -1
- package/dist/components/reveal.d.cts +2 -47
- package/dist/components/reveal.d.ts +2 -47
- package/dist/components/reveal.js +1 -2
- package/dist/components/reveal.js.map +1 -1
- package/dist/components/solid.cjs +8 -6
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +33 -4
- package/dist/components/solid.d.ts +33 -4
- package/dist/components/solid.js +8 -6
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +8 -6
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +33 -4
- package/dist/components/svelte.d.ts +33 -4
- package/dist/components/svelte.js +8 -6
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.cjs +1 -3
- package/dist/components/svg.cjs.map +1 -1
- package/dist/components/svg.d.cts +2 -47
- package/dist/components/svg.d.ts +2 -47
- package/dist/components/svg.js +2 -3
- package/dist/components/svg.js.map +1 -1
- package/dist/components/text.cjs +2 -4
- package/dist/components/text.cjs.map +1 -1
- package/dist/components/text.d.cts +2 -47
- package/dist/components/text.d.ts +2 -47
- package/dist/components/text.js +2 -3
- package/dist/components/text.js.map +1 -1
- package/dist/components/timeline.cjs +3 -7
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.d.cts +4 -49
- package/dist/components/timeline.d.ts +4 -49
- package/dist/components/timeline.js +4 -7
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.cjs +1 -3
- package/dist/components/transitions.cjs.map +1 -1
- package/dist/components/transitions.d.cts +2 -47
- package/dist/components/transitions.d.ts +2 -47
- package/dist/components/transitions.js +2 -3
- package/dist/components/transitions.js.map +1 -1
- package/dist/components/ui.cjs +3 -5
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.d.cts +2 -47
- package/dist/components/ui.d.ts +2 -47
- package/dist/components/ui.js +4 -5
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.cjs +8 -6
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +33 -4
- package/dist/components/vue.d.ts +33 -4
- package/dist/components/vue.js +8 -6
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +3 -5
- package/dist/components/webgl.cjs.map +1 -1
- package/dist/components/webgl.d.cts +2 -47
- package/dist/components/webgl.d.ts +2 -47
- package/dist/components/webgl.js +3 -4
- package/dist/components/webgl.js.map +1 -1
- package/dist/components.cjs +31 -10
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +1 -0
- package/dist/components.d.cts +137 -17
- package/dist/components.d.ts +137 -17
- package/dist/components.js +15 -11
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/docs/API.md +1 -1
- package/docs/ROADMAP.md +12 -12
- package/docs/components.md +29 -1
- package/docs/performance.md +1 -1
- package/docs/upgrading-5.md +2 -2
- package/package.json +24 -3
- package/dist/chunks/base-BvpQ4Ggj.cjs.map +0 -1
- package/dist/chunks/base-DbbRUxaa.js.map +0 -1
package/dist/components.d.cts
CHANGED
|
@@ -16,15 +16,15 @@ interface ComponentsConfig {
|
|
|
16
16
|
injectStyles?: boolean;
|
|
17
17
|
/**
|
|
18
18
|
* `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always
|
|
19
|
-
* uses the reduced variants (e.g. a kiosk / battery-saver mode)
|
|
20
|
-
*
|
|
19
|
+
* uses the reduced variants (e.g. a kiosk / battery-saver mode). 5.0: the
|
|
20
|
+
* OS setting can no longer be ignored (`'no-preference'` was removed).
|
|
21
21
|
*/
|
|
22
|
-
reducedMotion?: 'user' | 'reduce'
|
|
22
|
+
reducedMotion?: 'user' | 'reduce';
|
|
23
23
|
/**
|
|
24
|
-
* Global motion intensity (v2.7): `'
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
24
|
+
* Global motion intensity (v2.7): `'low'` (shorter, calmer), `'normal'`
|
|
25
|
+
* (default) or `'high'`. Scales every component animation's duration and
|
|
26
|
+
* sets `--usa-motion` (0.6 / 1 / 1.25) on `<html>` for your own CSS. 5.0:
|
|
27
|
+
* `'off'` was removed — use `motionSensitivity: 'minimal'`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
30
|
/**
|
|
@@ -39,7 +39,7 @@ interface ComponentsConfig {
|
|
|
39
39
|
}
|
|
40
40
|
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
41
41
|
declare const MOTION_SENSITIVITY_LEVELS: readonly MotionSensitivity[];
|
|
42
|
-
type MotionIntensity = '
|
|
42
|
+
type MotionIntensity = 'low' | 'normal' | 'high';
|
|
43
43
|
declare const MOTION_SCALE: Record<MotionIntensity, number>;
|
|
44
44
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
45
45
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -51,10 +51,15 @@ declare function getMotionSensitivity(): MotionSensitivity;
|
|
|
51
51
|
* just the final frame. `full` returns them unchanged.
|
|
52
52
|
*/
|
|
53
53
|
declare function adaptKeyframes(frames: Keyframe[], level?: MotionSensitivity): Keyframe[];
|
|
54
|
+
/** Run `fn` without 4.9 deprecation warnings (library-internal calls). */
|
|
55
|
+
declare function withoutDeprecations<T>(fn: () => T): T;
|
|
54
56
|
/** The current global motion intensity. */
|
|
55
57
|
declare function getMotionIntensity(): MotionIntensity;
|
|
58
|
+
/** Duration multiplier for the current intensity (1 when `normal`). */
|
|
59
|
+
declare function motionScale(): number;
|
|
56
60
|
/** `true` when animations should be reduced (OS setting or `configureComponents`). */
|
|
57
61
|
declare function prefersReducedMotion(): boolean;
|
|
62
|
+
type Cleanup$1 = () => void;
|
|
58
63
|
/**
|
|
59
64
|
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
60
65
|
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
@@ -64,6 +69,13 @@ interface UsaElement extends HTMLElement {
|
|
|
64
69
|
/** `true` while reduced motion applies to this element. */
|
|
65
70
|
readonly reduced: boolean;
|
|
66
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* `el.animate()` with the library's motion rules (5.0, shared by elements and
|
|
74
|
+
* registered effects): motion sensitivity (keyframes adapted, `static` →
|
|
75
|
+
* final frame), intensity (duration scale) and the animation budget. Returns
|
|
76
|
+
* `null` (final frame applied) when nothing should animate.
|
|
77
|
+
*/
|
|
78
|
+
declare function animateWithMotion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
67
79
|
/** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */
|
|
68
80
|
declare function onFrame(fn: (t: number, dt: number) => void): () => void;
|
|
69
81
|
/** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */
|
|
@@ -1857,14 +1869,21 @@ interface UsaAutoSkeletonElement extends UsaElement {
|
|
|
1857
1869
|
}
|
|
1858
1870
|
declare function defineAutoSkeleton(tag?: string): CustomElementConstructor | undefined;
|
|
1859
1871
|
|
|
1872
|
+
/** The switch's levels: Off (motion sensitivity `minimal`) + the three intensities. */
|
|
1873
|
+
type MotionSwitchLevel = 'off' | MotionIntensity;
|
|
1860
1874
|
/**
|
|
1861
1875
|
* Set the global motion intensity for every `<usa-*>` component:
|
|
1862
|
-
* `'
|
|
1863
|
-
*
|
|
1864
|
-
*
|
|
1876
|
+
* `'low'`, `'normal'` (default), `'high'`. Sets `--usa-motion` and
|
|
1877
|
+
* `data-usa-motion` on `<html>`; with `persist` the choice is remembered
|
|
1878
|
+
* (localStorage) and restored by `restoreMotionIntensity()`.
|
|
1879
|
+
* 5.0: `'off'` was removed — use `setMotionSensitivity('minimal')`.
|
|
1865
1880
|
*/
|
|
1866
1881
|
declare function setMotionIntensity(level: MotionIntensity, persist?: boolean): void;
|
|
1867
|
-
/**
|
|
1882
|
+
/** Apply a switch level: `'off'` = motion sensitivity `minimal`, otherwise full motion at that intensity. */
|
|
1883
|
+
declare function setMotionLevel(level: MotionSwitchLevel, persist?: boolean): void;
|
|
1884
|
+
/** The current switch level. */
|
|
1885
|
+
declare function getMotionLevel(): MotionSwitchLevel;
|
|
1886
|
+
/** Re-apply a persisted level (call early on page load). Returns the active intensity. */
|
|
1868
1887
|
declare function restoreMotionIntensity(): MotionIntensity;
|
|
1869
1888
|
/**
|
|
1870
1889
|
* `<usa-motion-switch>` — a segmented control letting users choose the
|
|
@@ -1873,7 +1892,7 @@ declare function restoreMotionIntensity(): MotionIntensity;
|
|
|
1873
1892
|
* `label` ("Motion"). Events: `usa:change` (`{ level }`).
|
|
1874
1893
|
*/
|
|
1875
1894
|
interface UsaMotionSwitchElement extends UsaElement {
|
|
1876
|
-
value:
|
|
1895
|
+
value: MotionSwitchLevel;
|
|
1877
1896
|
}
|
|
1878
1897
|
declare function defineMotionSwitch(tag?: string): CustomElementConstructor | undefined;
|
|
1879
1898
|
|
|
@@ -1975,8 +1994,8 @@ declare global {
|
|
|
1975
1994
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1976
1995
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1977
1996
|
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1978
|
-
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="
|
|
1979
|
-
* `scrub="
|
|
1997
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="scroll"`
|
|
1998
|
+
* and `smooth` tune it (5.0: `scrub="js"` removed — the JS engine is automatic). Methods: `play()`,
|
|
1980
1999
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1981
2000
|
* Reduced motion: steps appear in their final state.
|
|
1982
2001
|
*/
|
|
@@ -2660,6 +2679,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2660
2679
|
readonly depth: readonly ["usa-cube", "usa-depth"];
|
|
2661
2680
|
readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
|
|
2662
2681
|
readonly packs: readonly ["usa-pack"];
|
|
2682
|
+
readonly fx: readonly ["usa-fx"];
|
|
2663
2683
|
};
|
|
2664
2684
|
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
2665
2685
|
|
|
@@ -2871,11 +2891,111 @@ declare function connectNativeShell(options?: NativeShellOptions): {
|
|
|
2871
2891
|
disconnect: () => void;
|
|
2872
2892
|
};
|
|
2873
2893
|
|
|
2894
|
+
/**
|
|
2895
|
+
* `<usa-fx effect="pop" trigger="click">` — plays any registered effect
|
|
2896
|
+
* (`registerEffect()`) on its first element child (or itself with `self`).
|
|
2897
|
+
* `trigger`: `click` (default) · `hover` · `enter` · `load` · `loop` · `manual`;
|
|
2898
|
+
* `options` (JSON) is passed to the effect; `once`. Method `play()`.
|
|
2899
|
+
*/
|
|
2900
|
+
interface UsaFxElement extends UsaElement {
|
|
2901
|
+
readonly target: HTMLElement;
|
|
2902
|
+
play(): Promise<void>;
|
|
2903
|
+
}
|
|
2904
|
+
declare function defineFx(tag?: string): CustomElementConstructor | undefined;
|
|
2905
|
+
|
|
2906
|
+
/**
|
|
2907
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
2908
|
+
* yours) is a plain object registered once and played the same way:
|
|
2909
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
2910
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
2911
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
2912
|
+
* animation budget.
|
|
2913
|
+
*/
|
|
2914
|
+
|
|
2915
|
+
declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
|
|
2916
|
+
type EffectKind = (typeof EFFECT_KINDS)[number];
|
|
2917
|
+
declare const EFFECT_TRIGGERS: readonly ["click", "hover", "enter", "load", "loop", "manual"];
|
|
2918
|
+
type EffectTrigger = (typeof EFFECT_TRIGGERS)[number];
|
|
2919
|
+
interface EffectContext {
|
|
2920
|
+
/** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
|
|
2921
|
+
readonly reduced: boolean;
|
|
2922
|
+
readonly sensitivity: MotionSensitivity;
|
|
2923
|
+
/** The triggering event (pointer position for click effects), if any. */
|
|
2924
|
+
readonly event?: Event;
|
|
2925
|
+
/** `el.animate()` with the library's motion rules (may return `null`). */
|
|
2926
|
+
animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
2927
|
+
/** Register teardown for long-running effects (loops, listeners). */
|
|
2928
|
+
onCleanup(fn: Cleanup$1): void;
|
|
2929
|
+
}
|
|
2930
|
+
interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
|
|
2931
|
+
/** Unique, kebab-case. */
|
|
2932
|
+
name: string;
|
|
2933
|
+
kind: EffectKind;
|
|
2934
|
+
/** One line for docs and the gallery. */
|
|
2935
|
+
description?: string;
|
|
2936
|
+
/** Option defaults (merged under the caller's options). */
|
|
2937
|
+
defaults?: Partial<O>;
|
|
2938
|
+
/**
|
|
2939
|
+
* Under reduced motion: `'skip'` (do nothing — default for loop, background
|
|
2940
|
+
* and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
|
|
2941
|
+
* effect degrades itself — default for everything else).
|
|
2942
|
+
*/
|
|
2943
|
+
reduced?: 'skip' | 'run';
|
|
2944
|
+
/** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
|
|
2945
|
+
run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup$1 | Animation | null | Promise<unknown>;
|
|
2946
|
+
}
|
|
2947
|
+
/** Register an effect (throws on a duplicate name unless `override`). Returns an unregister function. */
|
|
2948
|
+
declare function registerEffect<O extends Record<string, unknown>>(def: EffectDefinition<O>, opts?: {
|
|
2949
|
+
override?: boolean;
|
|
2950
|
+
}): () => void;
|
|
2951
|
+
/** Register several effects at once (already-registered names are skipped). */
|
|
2952
|
+
declare function registerEffects(defs: EffectDefinition<any>[]): void;
|
|
2953
|
+
declare const getEffect: (name: string) => EffectDefinition | undefined;
|
|
2954
|
+
declare const hasEffect: (name: string) => boolean;
|
|
2955
|
+
/** Registered effects (optionally of one kind), sorted by name. */
|
|
2956
|
+
declare function listEffects(kind?: EffectKind): EffectDefinition[];
|
|
2957
|
+
/**
|
|
2958
|
+
* Play a registered effect once on `el`. Resolves when it finishes (or
|
|
2959
|
+
* immediately for fire-and-forget effects). Unknown names reject.
|
|
2960
|
+
*/
|
|
2961
|
+
declare function playEffect(el: HTMLElement, name: string, options?: Record<string, unknown>, event?: Event): Promise<void>;
|
|
2962
|
+
/**
|
|
2963
|
+
* Bind an effect to a trigger on `el`: `click`, `hover` (pointerenter / focus),
|
|
2964
|
+
* `enter` (scrolls into view; `once` by default), `load` (now), `loop`
|
|
2965
|
+
* (starts now, cleanup stops it) or `manual` (nothing). Returns an unbind.
|
|
2966
|
+
*/
|
|
2967
|
+
declare function bindEffect(el: HTMLElement, name: string, options?: Record<string, unknown> & {
|
|
2968
|
+
trigger?: EffectTrigger;
|
|
2969
|
+
once?: boolean;
|
|
2970
|
+
}): Cleanup$1;
|
|
2971
|
+
|
|
2972
|
+
/** Every built-in 5.0 effect definition. */
|
|
2973
|
+
declare const BUILTIN_EFFECTS: EffectDefinition[];
|
|
2974
|
+
|
|
2975
|
+
/**
|
|
2976
|
+
* use-scroll-animate/components/fx — unified plugin-style effects (5.0).
|
|
2977
|
+
* `registerEffect({ name, kind, run })`, `playEffect(el, name)`,
|
|
2978
|
+
* `bindEffect(el, name, { trigger })`, `<usa-fx effect trigger>`. Built-ins:
|
|
2979
|
+
* every timeline preset (`enter`), `pulse` · `pop` · `jelly` · `wiggle` ·
|
|
2980
|
+
* `heartbeat` · `bounce` · `flash` · `tada` · `shake` (attention),
|
|
2981
|
+
* `burst` · `confetti` · `ripple` (click). More packs: `use-scroll-animate/components/effects`.
|
|
2982
|
+
*/
|
|
2983
|
+
|
|
2984
|
+
/** Register the built-in effects (idempotent; `defineFxComponents()` calls it). */
|
|
2985
|
+
declare function registerBuiltinEffects(): void;
|
|
2986
|
+
/** Register every component of this category under its default tag (+ the built-in effects). */
|
|
2987
|
+
declare function defineFxComponents(): void;
|
|
2988
|
+
declare global {
|
|
2989
|
+
interface HTMLElementTagNameMap {
|
|
2990
|
+
'usa-fx': UsaFxElement;
|
|
2991
|
+
}
|
|
2992
|
+
}
|
|
2993
|
+
|
|
2874
2994
|
/**
|
|
2875
2995
|
* Register every `<usa-*>` component (or only the given categories).
|
|
2876
2996
|
* Safe to call more than once and on the server (no-op without DOM).
|
|
2877
2997
|
*/
|
|
2878
2998
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2879
2999
|
|
|
2880
|
-
export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver };
|
|
2881
|
-
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
|
3000
|
+
export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getEffect, getMotionIntensity, getMotionLevel, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, hasEffect, importMotionTokens, interpolatePath, linearEasing, listEffects, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionScale, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, playEffect, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, registerBuiltinEffects, registerEffect, registerEffects, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionLevel, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver, withoutDeprecations };
|
|
3001
|
+
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, EffectContext, EffectDefinition, EffectKind, EffectTrigger, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionSwitchLevel, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaFxElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.d.ts
CHANGED
|
@@ -16,15 +16,15 @@ interface ComponentsConfig {
|
|
|
16
16
|
injectStyles?: boolean;
|
|
17
17
|
/**
|
|
18
18
|
* `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always
|
|
19
|
-
* uses the reduced variants (e.g. a kiosk / battery-saver mode)
|
|
20
|
-
*
|
|
19
|
+
* uses the reduced variants (e.g. a kiosk / battery-saver mode). 5.0: the
|
|
20
|
+
* OS setting can no longer be ignored (`'no-preference'` was removed).
|
|
21
21
|
*/
|
|
22
|
-
reducedMotion?: 'user' | 'reduce'
|
|
22
|
+
reducedMotion?: 'user' | 'reduce';
|
|
23
23
|
/**
|
|
24
|
-
* Global motion intensity (v2.7): `'
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
24
|
+
* Global motion intensity (v2.7): `'low'` (shorter, calmer), `'normal'`
|
|
25
|
+
* (default) or `'high'`. Scales every component animation's duration and
|
|
26
|
+
* sets `--usa-motion` (0.6 / 1 / 1.25) on `<html>` for your own CSS. 5.0:
|
|
27
|
+
* `'off'` was removed — use `motionSensitivity: 'minimal'`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
30
|
/**
|
|
@@ -39,7 +39,7 @@ interface ComponentsConfig {
|
|
|
39
39
|
}
|
|
40
40
|
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
41
41
|
declare const MOTION_SENSITIVITY_LEVELS: readonly MotionSensitivity[];
|
|
42
|
-
type MotionIntensity = '
|
|
42
|
+
type MotionIntensity = 'low' | 'normal' | 'high';
|
|
43
43
|
declare const MOTION_SCALE: Record<MotionIntensity, number>;
|
|
44
44
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
45
45
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -51,10 +51,15 @@ declare function getMotionSensitivity(): MotionSensitivity;
|
|
|
51
51
|
* just the final frame. `full` returns them unchanged.
|
|
52
52
|
*/
|
|
53
53
|
declare function adaptKeyframes(frames: Keyframe[], level?: MotionSensitivity): Keyframe[];
|
|
54
|
+
/** Run `fn` without 4.9 deprecation warnings (library-internal calls). */
|
|
55
|
+
declare function withoutDeprecations<T>(fn: () => T): T;
|
|
54
56
|
/** The current global motion intensity. */
|
|
55
57
|
declare function getMotionIntensity(): MotionIntensity;
|
|
58
|
+
/** Duration multiplier for the current intensity (1 when `normal`). */
|
|
59
|
+
declare function motionScale(): number;
|
|
56
60
|
/** `true` when animations should be reduced (OS setting or `configureComponents`). */
|
|
57
61
|
declare function prefersReducedMotion(): boolean;
|
|
62
|
+
type Cleanup$1 = () => void;
|
|
58
63
|
/**
|
|
59
64
|
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
60
65
|
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
@@ -64,6 +69,13 @@ interface UsaElement extends HTMLElement {
|
|
|
64
69
|
/** `true` while reduced motion applies to this element. */
|
|
65
70
|
readonly reduced: boolean;
|
|
66
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* `el.animate()` with the library's motion rules (5.0, shared by elements and
|
|
74
|
+
* registered effects): motion sensitivity (keyframes adapted, `static` →
|
|
75
|
+
* final frame), intensity (duration scale) and the animation budget. Returns
|
|
76
|
+
* `null` (final frame applied) when nothing should animate.
|
|
77
|
+
*/
|
|
78
|
+
declare function animateWithMotion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
67
79
|
/** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */
|
|
68
80
|
declare function onFrame(fn: (t: number, dt: number) => void): () => void;
|
|
69
81
|
/** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */
|
|
@@ -1857,14 +1869,21 @@ interface UsaAutoSkeletonElement extends UsaElement {
|
|
|
1857
1869
|
}
|
|
1858
1870
|
declare function defineAutoSkeleton(tag?: string): CustomElementConstructor | undefined;
|
|
1859
1871
|
|
|
1872
|
+
/** The switch's levels: Off (motion sensitivity `minimal`) + the three intensities. */
|
|
1873
|
+
type MotionSwitchLevel = 'off' | MotionIntensity;
|
|
1860
1874
|
/**
|
|
1861
1875
|
* Set the global motion intensity for every `<usa-*>` component:
|
|
1862
|
-
* `'
|
|
1863
|
-
*
|
|
1864
|
-
*
|
|
1876
|
+
* `'low'`, `'normal'` (default), `'high'`. Sets `--usa-motion` and
|
|
1877
|
+
* `data-usa-motion` on `<html>`; with `persist` the choice is remembered
|
|
1878
|
+
* (localStorage) and restored by `restoreMotionIntensity()`.
|
|
1879
|
+
* 5.0: `'off'` was removed — use `setMotionSensitivity('minimal')`.
|
|
1865
1880
|
*/
|
|
1866
1881
|
declare function setMotionIntensity(level: MotionIntensity, persist?: boolean): void;
|
|
1867
|
-
/**
|
|
1882
|
+
/** Apply a switch level: `'off'` = motion sensitivity `minimal`, otherwise full motion at that intensity. */
|
|
1883
|
+
declare function setMotionLevel(level: MotionSwitchLevel, persist?: boolean): void;
|
|
1884
|
+
/** The current switch level. */
|
|
1885
|
+
declare function getMotionLevel(): MotionSwitchLevel;
|
|
1886
|
+
/** Re-apply a persisted level (call early on page load). Returns the active intensity. */
|
|
1868
1887
|
declare function restoreMotionIntensity(): MotionIntensity;
|
|
1869
1888
|
/**
|
|
1870
1889
|
* `<usa-motion-switch>` — a segmented control letting users choose the
|
|
@@ -1873,7 +1892,7 @@ declare function restoreMotionIntensity(): MotionIntensity;
|
|
|
1873
1892
|
* `label` ("Motion"). Events: `usa:change` (`{ level }`).
|
|
1874
1893
|
*/
|
|
1875
1894
|
interface UsaMotionSwitchElement extends UsaElement {
|
|
1876
|
-
value:
|
|
1895
|
+
value: MotionSwitchLevel;
|
|
1877
1896
|
}
|
|
1878
1897
|
declare function defineMotionSwitch(tag?: string): CustomElementConstructor | undefined;
|
|
1879
1898
|
|
|
@@ -1975,8 +1994,8 @@ declare global {
|
|
|
1975
1994
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1976
1995
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1977
1996
|
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1978
|
-
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="
|
|
1979
|
-
* `scrub="
|
|
1997
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="scroll"`
|
|
1998
|
+
* and `smooth` tune it (5.0: `scrub="js"` removed — the JS engine is automatic). Methods: `play()`,
|
|
1980
1999
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1981
2000
|
* Reduced motion: steps appear in their final state.
|
|
1982
2001
|
*/
|
|
@@ -2660,6 +2679,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2660
2679
|
readonly depth: readonly ["usa-cube", "usa-depth"];
|
|
2661
2680
|
readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
|
|
2662
2681
|
readonly packs: readonly ["usa-pack"];
|
|
2682
|
+
readonly fx: readonly ["usa-fx"];
|
|
2663
2683
|
};
|
|
2664
2684
|
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
2665
2685
|
|
|
@@ -2871,11 +2891,111 @@ declare function connectNativeShell(options?: NativeShellOptions): {
|
|
|
2871
2891
|
disconnect: () => void;
|
|
2872
2892
|
};
|
|
2873
2893
|
|
|
2894
|
+
/**
|
|
2895
|
+
* `<usa-fx effect="pop" trigger="click">` — plays any registered effect
|
|
2896
|
+
* (`registerEffect()`) on its first element child (or itself with `self`).
|
|
2897
|
+
* `trigger`: `click` (default) · `hover` · `enter` · `load` · `loop` · `manual`;
|
|
2898
|
+
* `options` (JSON) is passed to the effect; `once`. Method `play()`.
|
|
2899
|
+
*/
|
|
2900
|
+
interface UsaFxElement extends UsaElement {
|
|
2901
|
+
readonly target: HTMLElement;
|
|
2902
|
+
play(): Promise<void>;
|
|
2903
|
+
}
|
|
2904
|
+
declare function defineFx(tag?: string): CustomElementConstructor | undefined;
|
|
2905
|
+
|
|
2906
|
+
/**
|
|
2907
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
2908
|
+
* yours) is a plain object registered once and played the same way:
|
|
2909
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
2910
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
2911
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
2912
|
+
* animation budget.
|
|
2913
|
+
*/
|
|
2914
|
+
|
|
2915
|
+
declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
|
|
2916
|
+
type EffectKind = (typeof EFFECT_KINDS)[number];
|
|
2917
|
+
declare const EFFECT_TRIGGERS: readonly ["click", "hover", "enter", "load", "loop", "manual"];
|
|
2918
|
+
type EffectTrigger = (typeof EFFECT_TRIGGERS)[number];
|
|
2919
|
+
interface EffectContext {
|
|
2920
|
+
/** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
|
|
2921
|
+
readonly reduced: boolean;
|
|
2922
|
+
readonly sensitivity: MotionSensitivity;
|
|
2923
|
+
/** The triggering event (pointer position for click effects), if any. */
|
|
2924
|
+
readonly event?: Event;
|
|
2925
|
+
/** `el.animate()` with the library's motion rules (may return `null`). */
|
|
2926
|
+
animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
2927
|
+
/** Register teardown for long-running effects (loops, listeners). */
|
|
2928
|
+
onCleanup(fn: Cleanup$1): void;
|
|
2929
|
+
}
|
|
2930
|
+
interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
|
|
2931
|
+
/** Unique, kebab-case. */
|
|
2932
|
+
name: string;
|
|
2933
|
+
kind: EffectKind;
|
|
2934
|
+
/** One line for docs and the gallery. */
|
|
2935
|
+
description?: string;
|
|
2936
|
+
/** Option defaults (merged under the caller's options). */
|
|
2937
|
+
defaults?: Partial<O>;
|
|
2938
|
+
/**
|
|
2939
|
+
* Under reduced motion: `'skip'` (do nothing — default for loop, background
|
|
2940
|
+
* and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
|
|
2941
|
+
* effect degrades itself — default for everything else).
|
|
2942
|
+
*/
|
|
2943
|
+
reduced?: 'skip' | 'run';
|
|
2944
|
+
/** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
|
|
2945
|
+
run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup$1 | Animation | null | Promise<unknown>;
|
|
2946
|
+
}
|
|
2947
|
+
/** Register an effect (throws on a duplicate name unless `override`). Returns an unregister function. */
|
|
2948
|
+
declare function registerEffect<O extends Record<string, unknown>>(def: EffectDefinition<O>, opts?: {
|
|
2949
|
+
override?: boolean;
|
|
2950
|
+
}): () => void;
|
|
2951
|
+
/** Register several effects at once (already-registered names are skipped). */
|
|
2952
|
+
declare function registerEffects(defs: EffectDefinition<any>[]): void;
|
|
2953
|
+
declare const getEffect: (name: string) => EffectDefinition | undefined;
|
|
2954
|
+
declare const hasEffect: (name: string) => boolean;
|
|
2955
|
+
/** Registered effects (optionally of one kind), sorted by name. */
|
|
2956
|
+
declare function listEffects(kind?: EffectKind): EffectDefinition[];
|
|
2957
|
+
/**
|
|
2958
|
+
* Play a registered effect once on `el`. Resolves when it finishes (or
|
|
2959
|
+
* immediately for fire-and-forget effects). Unknown names reject.
|
|
2960
|
+
*/
|
|
2961
|
+
declare function playEffect(el: HTMLElement, name: string, options?: Record<string, unknown>, event?: Event): Promise<void>;
|
|
2962
|
+
/**
|
|
2963
|
+
* Bind an effect to a trigger on `el`: `click`, `hover` (pointerenter / focus),
|
|
2964
|
+
* `enter` (scrolls into view; `once` by default), `load` (now), `loop`
|
|
2965
|
+
* (starts now, cleanup stops it) or `manual` (nothing). Returns an unbind.
|
|
2966
|
+
*/
|
|
2967
|
+
declare function bindEffect(el: HTMLElement, name: string, options?: Record<string, unknown> & {
|
|
2968
|
+
trigger?: EffectTrigger;
|
|
2969
|
+
once?: boolean;
|
|
2970
|
+
}): Cleanup$1;
|
|
2971
|
+
|
|
2972
|
+
/** Every built-in 5.0 effect definition. */
|
|
2973
|
+
declare const BUILTIN_EFFECTS: EffectDefinition[];
|
|
2974
|
+
|
|
2975
|
+
/**
|
|
2976
|
+
* use-scroll-animate/components/fx — unified plugin-style effects (5.0).
|
|
2977
|
+
* `registerEffect({ name, kind, run })`, `playEffect(el, name)`,
|
|
2978
|
+
* `bindEffect(el, name, { trigger })`, `<usa-fx effect trigger>`. Built-ins:
|
|
2979
|
+
* every timeline preset (`enter`), `pulse` · `pop` · `jelly` · `wiggle` ·
|
|
2980
|
+
* `heartbeat` · `bounce` · `flash` · `tada` · `shake` (attention),
|
|
2981
|
+
* `burst` · `confetti` · `ripple` (click). More packs: `use-scroll-animate/components/effects`.
|
|
2982
|
+
*/
|
|
2983
|
+
|
|
2984
|
+
/** Register the built-in effects (idempotent; `defineFxComponents()` calls it). */
|
|
2985
|
+
declare function registerBuiltinEffects(): void;
|
|
2986
|
+
/** Register every component of this category under its default tag (+ the built-in effects). */
|
|
2987
|
+
declare function defineFxComponents(): void;
|
|
2988
|
+
declare global {
|
|
2989
|
+
interface HTMLElementTagNameMap {
|
|
2990
|
+
'usa-fx': UsaFxElement;
|
|
2991
|
+
}
|
|
2992
|
+
}
|
|
2993
|
+
|
|
2874
2994
|
/**
|
|
2875
2995
|
* Register every `<usa-*>` component (or only the given categories).
|
|
2876
2996
|
* Safe to call more than once and on the server (no-op without DOM).
|
|
2877
2997
|
*/
|
|
2878
2998
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2879
2999
|
|
|
2880
|
-
export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver };
|
|
2881
|
-
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
|
3000
|
+
export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getEffect, getMotionIntensity, getMotionLevel, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, hasEffect, importMotionTokens, interpolatePath, linearEasing, listEffects, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionScale, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, playEffect, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, registerBuiltinEffects, registerEffect, registerEffects, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionLevel, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver, withoutDeprecations };
|
|
3001
|
+
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, EffectContext, EffectDefinition, EffectKind, EffectTrigger, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionSwitchLevel, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaFxElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.js
CHANGED
|
@@ -15,11 +15,11 @@ export { SPRING_EFFECTS, defineDraggable, defineOverscroll, defineSpring, spring
|
|
|
15
15
|
import { defineCardComponents } from './components/cards.js';
|
|
16
16
|
export { CARD_EFFECTS, defineCard, defineCardStack, defineCarousel3d, defineStickyStack } from './components/cards.js';
|
|
17
17
|
import { defineClickComponents } from './components/click.js';
|
|
18
|
-
export { BUTTON_DEFORMS, CLICK_EFFECTS, MORPH_ICONS,
|
|
18
|
+
export { BUTTON_DEFORMS, CLICK_EFFECTS, MORPH_ICONS, defineButton, defineCheckbox, defineClick, defineDoubleTap, defineHold, defineIconMorph, defineLike, morphPath } from './components/click.js';
|
|
19
19
|
import { defineUiComponents } from './components/ui.js';
|
|
20
20
|
export { defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, defineFab, defineNavbar, definePopover, definePullRefresh, defineRating, defineSlider, defineTabs, defineTooltip } from './components/ui.js';
|
|
21
21
|
import { definePageComponents } from './components/page.js';
|
|
22
|
-
export { AMBIENT_EFFECTS, CURSOR_MODES, PAGE_EFFECTS, defineAmbient, defineAutoSkeleton, defineBackToTop, defineCursor, defineFullpage, defineLoadingBar, defineMotionSwitch, defineSplash, enableMpaTransitions, loadingBar, pageTransition, restoreMotionIntensity, scrollToTarget, setMotionIntensity, smoothScroll, supportsViewTransitions, themeTransition } from './components/page.js';
|
|
22
|
+
export { AMBIENT_EFFECTS, CURSOR_MODES, PAGE_EFFECTS, defineAmbient, defineAutoSkeleton, defineBackToTop, defineCursor, defineFullpage, defineLoadingBar, defineMotionSwitch, defineSplash, enableMpaTransitions, getMotionLevel, loadingBar, pageTransition, restoreMotionIntensity, scrollToTarget, setMotionIntensity, setMotionLevel, smoothScroll, supportsViewTransitions, themeTransition } from './components/page.js';
|
|
23
23
|
import { defineTimelineComponents } from './components/timeline.js';
|
|
24
24
|
export { defineTimeline } from './components/timeline.js';
|
|
25
25
|
import { defineGestureComponents } from './components/gesture.js';
|
|
@@ -34,18 +34,21 @@ import { defineLayoutComponents } from './components/layout.js';
|
|
|
34
34
|
export { autoAnimate, defineAutoAnimate, defineMasonry, flipFrames, masonryLayout, sharedTransition } from './components/layout.js';
|
|
35
35
|
import { definePacksComponents } from './components/packs.js';
|
|
36
36
|
export { PACKS, PACK_PRIMITIVES, applyPack, countUp, definePack, flyToCart } from './components/packs.js';
|
|
37
|
-
import {
|
|
38
|
-
export {
|
|
39
|
-
import {
|
|
40
|
-
export {
|
|
37
|
+
import { defineFxComponents } from './components/fx.js';
|
|
38
|
+
export { BUILTIN_EFFECTS, EFFECT_KINDS, EFFECT_TRIGGERS, bindEffect, defineFx, getEffect, hasEffect, listEffects, playEffect, registerBuiltinEffects, registerEffect, registerEffects } from './components/fx.js';
|
|
39
|
+
import { a as adoptVariants } from './chunks/variants-Bsevy6Xm.js';
|
|
40
|
+
export { V as VARIANTS, s as setVariant } from './chunks/variants-Bsevy6Xm.js';
|
|
41
|
+
import { c as canDefine } from './chunks/base-C3Sw9sAO.js';
|
|
42
|
+
export { M as MOTION_SCALE, a as MOTION_SENSITIVITY_LEVELS, b as activeAnimations, d as adaptKeyframes, e as animateWithMotion, f as animationBudget, g as configureComponents, h as getMotionIntensity, i as getMotionSensitivity, m as motionScale, o as onFrame, p as prefersReducedMotion, s as schedulerStats, j as setAnimationBudget, w as withoutDeprecations } from './chunks/base-C3Sw9sAO.js';
|
|
41
43
|
export { MOTION_TOKENS, applyMotionTokens, getMotionTokens, importMotionTokens, mergeMotionTokens, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, parseDuration, parseEasing, resolveDurationToken, resolveEasingToken } from './components/tokens.js';
|
|
42
44
|
export { ALL_TAGS, LIVE_REGION_IDS, MOTION_SENSITIVITY, SENSITIVITY_CSS, STATIC_ALTERNATIVES, announce, auditMotionA11y, baselineReport, liveRegion, motionAllowed, restoreMotionSensitivity, setMotionSensitivity, staticAlternative, warnBaseline } from './components/a11y.js';
|
|
43
45
|
export { autoDegrade, categoryOf, loadCategoryStyles, loadedStyles, onDemandStyles } from './components/perf.js';
|
|
44
46
|
export { BRIDGE_PROTOCOL_VERSION, applyNativeSettings, connectNativeShell, detectNativeHost, parseNativeSettings, postToNative } from './components/bridge.js';
|
|
45
|
-
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-
|
|
46
|
-
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-
|
|
47
|
-
export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-
|
|
48
|
-
export {
|
|
47
|
+
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-DucKMQr_.js';
|
|
48
|
+
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-CckMe3x0.js';
|
|
49
|
+
export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-DN3hHbHh.js';
|
|
50
|
+
export { b as burst, c as confetti, h as haptic, s as shake } from './chunks/fx-ChjxrMBo.js';
|
|
51
|
+
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-BTf__I-8.js';
|
|
49
52
|
|
|
50
53
|
/**
|
|
51
54
|
* use-scroll-animate/components
|
|
@@ -86,6 +89,7 @@ const BY_CATEGORY = {
|
|
|
86
89
|
depth: defineDepthComponents,
|
|
87
90
|
layout: defineLayoutComponents,
|
|
88
91
|
packs: definePacksComponents,
|
|
92
|
+
fx: defineFxComponents,
|
|
89
93
|
};
|
|
90
94
|
/**
|
|
91
95
|
* Register every `<usa-*>` component (or only the given categories).
|
|
@@ -97,5 +101,5 @@ function defineComponents(categories) {
|
|
|
97
101
|
(categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
|
|
98
102
|
}
|
|
99
103
|
|
|
100
|
-
export { adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineDepthComponents, defineFeedbackComponents, defineGestureComponents, defineInteractionComponents, defineLayoutComponents, definePacksComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineSvgComponents, defineTextComponents, defineTimelineComponents, defineTransitionComponents, defineUiComponents, defineWebglComponents };
|
|
104
|
+
export { adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineDepthComponents, defineFeedbackComponents, defineFxComponents, defineGestureComponents, defineInteractionComponents, defineLayoutComponents, definePacksComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineSvgComponents, defineTextComponents, defineTimelineComponents, defineTransitionComponents, defineUiComponents, defineWebglComponents };
|
|
101
105
|
//# sourceMappingURL=components.js.map
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/index';\nexport * from './tokens/index';\nexport * from './a11y/index';\nexport * from './perf/index';\nexport * from './bridge/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/index';\nimport { defineFxComponents } from './fx/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\nexport { configureComponents, prefersReducedMotion, getMotionIntensity, motionScale, animateWithMotion, withoutDeprecations, MOTION_SCALE } from './base';\nexport type { ComponentsConfig, UsaElement, MotionIntensity, MotionSensitivity } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/index';\nexport * from './tokens/index';\nexport * from './a11y/index';\nexport * from './perf/index';\nexport * from './bridge/index';\nexport * from './fx/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\n fx: defineFxComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAqDH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,UAAU,EAAE,0BAA0B;AACtC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,oBAAoB;AAC3B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,EAAE,EAAE,kBAAkB;AACtB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,GAAG,EAAE,mBAAmB;AACxB,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,EAAE,EAAE,kBAAkB;CACvB;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAI,SAAS,EAAE;AAAE,QAAA,aAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;"}
|