use-scroll-animate 2.2.0 → 2.3.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 +12 -0
- package/README.md +2 -1
- package/README_ja.md +1 -0
- package/README_zh.md +1 -0
- package/dist/chunks/{base-BiTc85p_.cjs → base-CJ7XfidP.cjs} +2 -1
- package/dist/chunks/{base-BiTc85p_.cjs.map → base-CJ7XfidP.cjs.map} +1 -1
- package/dist/chunks/{base-CFtnmfli.js → base-CuvCgqLy.js} +2 -2
- package/dist/chunks/{base-CFtnmfli.js.map → base-CuvCgqLy.js.map} +1 -1
- package/dist/components/background.cjs +1 -1
- package/dist/components/background.js +2 -2
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.js +2 -2
- package/dist/components/interaction.cjs +1 -1
- package/dist/components/interaction.js +2 -2
- package/dist/components/physics.cjs +664 -0
- package/dist/components/physics.cjs.map +1 -0
- package/dist/components/physics.css +5 -0
- package/dist/components/physics.d.cts +216 -0
- package/dist/components/physics.d.ts +216 -0
- package/dist/components/physics.js +644 -0
- package/dist/components/physics.js.map +1 -0
- package/dist/components/reveal.cjs +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/text.cjs +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/transitions.cjs +1 -1
- package/dist/components/transitions.js +2 -2
- package/dist/components.cjs +22 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +3 -0
- package/dist/components.d.cts +180 -2
- package/dist/components.d.ts +180 -2
- package/dist/components.js +6 -2
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/docs/components.md +14 -0
- package/package.json +14 -2
package/dist/components.d.ts
CHANGED
|
@@ -721,6 +721,183 @@ declare global {
|
|
|
721
721
|
}
|
|
722
722
|
}
|
|
723
723
|
|
|
724
|
+
declare const SPRING_EFFECTS: readonly ["bounce-in", "pop", "drop", "jelly", "rubber-band"];
|
|
725
|
+
type SpringEffect = (typeof SPRING_EFFECTS)[number];
|
|
726
|
+
/** Keyframes of a spring effect (entrances use spring timing, attention effects fixed frames). */
|
|
727
|
+
declare function springEffectKeyframes(effect: string, reduced?: boolean): Keyframe[];
|
|
728
|
+
/**
|
|
729
|
+
* `<usa-spring>` — spring / bounce effects on its content.
|
|
730
|
+
*
|
|
731
|
+
* Attributes: `effect` (`bounce-in` default, `pop`, `drop`, `jelly`,
|
|
732
|
+
* `rubber-band`), `trigger` (`view` default, `hover`, `click`, `manual`),
|
|
733
|
+
* `preset` (`gentle`, `wobbly`, `stiff`, `bouncy`, …) or `stiffness` /
|
|
734
|
+
* `damping` / `mass`, `delay` (ms), `duration` (ms, attention effects; 900),
|
|
735
|
+
* `repeat` (replay every time it re-enters the view), `block`.
|
|
736
|
+
* Events: `usa:complete`. Reduced motion: entrances fade, attention effects do nothing.
|
|
737
|
+
*/
|
|
738
|
+
interface UsaSpringElement extends UsaElement {
|
|
739
|
+
effect: string;
|
|
740
|
+
play(): Promise<void>;
|
|
741
|
+
reset(): void;
|
|
742
|
+
}
|
|
743
|
+
declare function defineSpring(tag?: string): CustomElementConstructor | undefined;
|
|
744
|
+
|
|
745
|
+
/**
|
|
746
|
+
* `<usa-draggable>` — drag its content with the pointer (mouse, touch, pen)
|
|
747
|
+
* or the arrow keys; physics on release.
|
|
748
|
+
*
|
|
749
|
+
* Attributes: `axis` (`both` default, `x`, `y`), `spring-back` (return to
|
|
750
|
+
* the origin with a spring), `inertia` (keep gliding after a flick),
|
|
751
|
+
* `snap` (grid size like `80`, or points like `0,120,240`), `bounds`
|
|
752
|
+
* (`parent` = stay inside the parent box, rubber-banding past its edges),
|
|
753
|
+
* `preset` (spring, default `wobbly`), `step` (arrow-key step, px, 16),
|
|
754
|
+
* `disabled`. Methods: `moveTo(x, y, animate?)`, `reset()`. Events:
|
|
755
|
+
* `usa:drag-start`, `usa:drag-end` (`{ x, y, vx, vy }`), `usa:settle`.
|
|
756
|
+
* Reduced motion: positions change instantly (no spring or inertia).
|
|
757
|
+
*/
|
|
758
|
+
interface UsaDraggableElement extends UsaElement {
|
|
759
|
+
readonly x: number;
|
|
760
|
+
readonly y: number;
|
|
761
|
+
readonly dragging: boolean;
|
|
762
|
+
moveTo(x: number, y: number, animate?: boolean): void;
|
|
763
|
+
reset(): void;
|
|
764
|
+
}
|
|
765
|
+
declare function defineDraggable(tag?: string): CustomElementConstructor | undefined;
|
|
766
|
+
|
|
767
|
+
/**
|
|
768
|
+
* `<usa-overscroll>` — an elastic scroll container: pulling past the top or
|
|
769
|
+
* bottom (touch, trackpad or wheel) stretches the content with iOS-style
|
|
770
|
+
* rubber-band resistance and it springs back on release.
|
|
771
|
+
*
|
|
772
|
+
* Attributes: `axis` (`y` default, `x`), `max` (largest stretch in px, 120),
|
|
773
|
+
* `preset` (spring, default `default`), `disabled`. CSS variable
|
|
774
|
+
* `--usa-overscroll` holds the current offset. Reduced motion: no stretch
|
|
775
|
+
* (a plain scroll container with `overscroll-behavior: contain`).
|
|
776
|
+
*/
|
|
777
|
+
interface UsaOverscrollElement extends UsaElement {
|
|
778
|
+
/** Current stretch in px (negative = pulled past the end). */
|
|
779
|
+
readonly offset: number;
|
|
780
|
+
}
|
|
781
|
+
declare function defineOverscroll(tag?: string): CustomElementConstructor | undefined;
|
|
782
|
+
|
|
783
|
+
/**
|
|
784
|
+
* Spring physics core (v2.3). A damped harmonic oscillator integrated in
|
|
785
|
+
* 1 ms steps: `stiffness` (k, N/m), `damping` (c) and `mass` (m). Used by
|
|
786
|
+
* the `<usa-spring>`, `<usa-draggable>` and `<usa-overscroll>` elements and
|
|
787
|
+
* exported for your own animations:
|
|
788
|
+
*
|
|
789
|
+
* - `springEasing()` turns a spring into a CSS `linear()` easing + duration
|
|
790
|
+
* for WAAPI / CSS (falls back to a cubic-bezier overshoot where `linear()`
|
|
791
|
+
* is unsupported);
|
|
792
|
+
* - `spring(el, keyframes, cfg)` animates with it;
|
|
793
|
+
* - `createSpring()` is an interruptible, velocity-preserving value for
|
|
794
|
+
* gestures (drag, inertia, snap).
|
|
795
|
+
*/
|
|
796
|
+
interface SpringConfig {
|
|
797
|
+
/** Spring stiffness (default 170). Higher = faster, snappier. */
|
|
798
|
+
stiffness?: number;
|
|
799
|
+
/** Damping / friction (default 26). Lower = more bounces. */
|
|
800
|
+
damping?: number;
|
|
801
|
+
/** Mass (default 1). Higher = slower, heavier. */
|
|
802
|
+
mass?: number;
|
|
803
|
+
/** Initial velocity in progress units per second (default 0). */
|
|
804
|
+
velocity?: number;
|
|
805
|
+
/** Rest threshold (default 0.001). */
|
|
806
|
+
precision?: number;
|
|
807
|
+
}
|
|
808
|
+
type SpringPreset = 'default' | 'gentle' | 'wobbly' | 'stiff' | 'bouncy' | 'slow' | 'molasses';
|
|
809
|
+
declare const SPRING_PRESETS: Record<SpringPreset, Required<Pick<SpringConfig, 'stiffness' | 'damping' | 'mass'>>>;
|
|
810
|
+
type SpringInput = SpringPreset | SpringConfig | string | undefined;
|
|
811
|
+
/** Resolve a preset name or a partial config to a full config. */
|
|
812
|
+
declare function resolveSpring(input?: SpringInput): Required<SpringConfig>;
|
|
813
|
+
/** One integration step (semi-implicit Euler) towards `to`. Returns [x, v]. */
|
|
814
|
+
declare function stepSpring(cfg: Required<SpringConfig>, x: number, v: number, to: number, dt: number): [number, number];
|
|
815
|
+
/**
|
|
816
|
+
* Sample the spring from 0 to 1 at `fps` (default 60). `values` may exceed 1
|
|
817
|
+
* (overshoot); `duration` is the time to rest, in ms (max 10 s).
|
|
818
|
+
*/
|
|
819
|
+
declare function springSamples(input?: SpringInput, fps?: number): {
|
|
820
|
+
values: number[];
|
|
821
|
+
duration: number;
|
|
822
|
+
};
|
|
823
|
+
/** `true` when CSS `linear()` easing is supported. */
|
|
824
|
+
declare function supportsLinearEasing(): boolean;
|
|
825
|
+
/**
|
|
826
|
+
* The spring as `{ easing, duration }` for `el.animate()` / CSS. `easing` is
|
|
827
|
+
* a `linear(…)` function with at most `points` stops (default 48), or a
|
|
828
|
+
* cubic-bezier overshoot where `linear()` is unsupported.
|
|
829
|
+
*/
|
|
830
|
+
declare function springEasing(input?: SpringInput, points?: number): {
|
|
831
|
+
easing: string;
|
|
832
|
+
duration: number;
|
|
833
|
+
};
|
|
834
|
+
/** Build a CSS `linear()` easing from samples (down-sampled to `points`). */
|
|
835
|
+
declare function linearEasing(values: number[], points?: number): string;
|
|
836
|
+
/**
|
|
837
|
+
* Animate `el` between keyframes with spring timing (WAAPI). Under reduced
|
|
838
|
+
* motion the final frame is applied immediately. Returns the Animation (or
|
|
839
|
+
* `null` without WAAPI / under reduced motion).
|
|
840
|
+
*/
|
|
841
|
+
declare function spring(el: Element, keyframes: Keyframe[], input?: SpringInput, options?: KeyframeAnimationOptions): Animation | null;
|
|
842
|
+
interface SpringValueOptions {
|
|
843
|
+
/** Start value (default 0). */
|
|
844
|
+
value?: number;
|
|
845
|
+
/** Spring config or preset (default `'default'`). */
|
|
846
|
+
spring?: SpringInput;
|
|
847
|
+
/** Called with the value every frame (and on `jump()`). */
|
|
848
|
+
onUpdate?: (value: number, velocity: number) => void;
|
|
849
|
+
/** Called when the value comes to rest at its target. */
|
|
850
|
+
onRest?: (value: number) => void;
|
|
851
|
+
}
|
|
852
|
+
interface SpringValue {
|
|
853
|
+
readonly value: number;
|
|
854
|
+
/** Units per second. */
|
|
855
|
+
readonly velocity: number;
|
|
856
|
+
readonly target: number;
|
|
857
|
+
readonly animating: boolean;
|
|
858
|
+
/** Animate to `target`, optionally with a new initial velocity (units/s). */
|
|
859
|
+
set(target: number, velocity?: number): void;
|
|
860
|
+
/** Jump to `value` with no animation. */
|
|
861
|
+
jump(value: number): void;
|
|
862
|
+
/** Stop where it is. */
|
|
863
|
+
stop(): void;
|
|
864
|
+
/** Change the spring config. */
|
|
865
|
+
configure(spring: SpringInput): void;
|
|
866
|
+
}
|
|
867
|
+
/**
|
|
868
|
+
* An interruptible spring-animated number: call `set()` as often as you like,
|
|
869
|
+
* the motion keeps its velocity (like iOS / Framer springs). Reduced motion
|
|
870
|
+
* jumps straight to the target.
|
|
871
|
+
*/
|
|
872
|
+
declare function createSpring(opts?: SpringValueOptions): SpringValue;
|
|
873
|
+
/**
|
|
874
|
+
* Where a flick at `velocity` (units/s) comes to rest with exponential
|
|
875
|
+
* decay: `value + velocity · timeConstant` (default 0.325 s, iOS-like).
|
|
876
|
+
*/
|
|
877
|
+
declare function projectInertia(value: number, velocity: number, timeConstant?: number): number;
|
|
878
|
+
/** Snap to a grid (`number`) or the nearest of a list of points. */
|
|
879
|
+
declare function snapTo(value: number, to: number | number[] | null | undefined): number;
|
|
880
|
+
/** iOS-style rubber-band resistance: how far content moves when pulled `distance` past an edge. */
|
|
881
|
+
declare function rubberBand(distance: number, dimension: number, constant?: number): number;
|
|
882
|
+
|
|
883
|
+
/**
|
|
884
|
+
* use-scroll-animate/components/physics — spring & bounce physics (v2.3).
|
|
885
|
+
* `<usa-spring>` (bounce-in, pop, drop, jelly, rubber-band), `<usa-draggable>`
|
|
886
|
+
* (spring-back, inertia, snap) and `<usa-overscroll>` (elastic edges), plus
|
|
887
|
+
* the spring core: `spring()`, `springEasing()`, `createSpring()`,
|
|
888
|
+
* `SPRING_PRESETS`, `projectInertia()`, `snapTo()`, `rubberBand()`.
|
|
889
|
+
*/
|
|
890
|
+
|
|
891
|
+
/** Register every component of this category under its default tag. */
|
|
892
|
+
declare function definePhysicsComponents(): void;
|
|
893
|
+
declare global {
|
|
894
|
+
interface HTMLElementTagNameMap {
|
|
895
|
+
'usa-spring': UsaSpringElement;
|
|
896
|
+
'usa-draggable': UsaDraggableElement;
|
|
897
|
+
'usa-overscroll': UsaOverscrollElement;
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
|
|
724
901
|
/** The component categories and their default tags. */
|
|
725
902
|
declare const COMPONENT_CATEGORIES: {
|
|
726
903
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
@@ -729,6 +906,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
729
906
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
730
907
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic"];
|
|
731
908
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
|
|
909
|
+
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
732
910
|
};
|
|
733
911
|
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
734
912
|
/**
|
|
@@ -737,5 +915,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
737
915
|
*/
|
|
738
916
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
739
917
|
|
|
740
|
-
export { COMPONENT_CATEGORIES, REVEAL_EFFECTS, SPINNER_VARIANTS, configureComponents, connectedAnimation, defineAccordion, defineAcrylic, defineAurora, defineBackgroundComponents, defineCheck, defineComponents, defineCounter, defineDialog, defineFeedbackComponents, defineFlipList, defineGrain, defineInteractionComponents, defineMagnetic, defineMarquee, defineParticles, definePress, defineProgress, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSpinner, defineSplitText, defineSpotlight, defineStagger, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTransitionComponents, defineTypewriter, defineViewSwitch, easeOutExpo, flip, prefersReducedMotion, readScrollProgress, revealKeyframes, scrambleFrame, toast, viewTransition };
|
|
741
|
-
export type { ComponentCategory, ComponentsConfig, ConnectedOptions, DialogVariant, FlipOptions, RevealEffect, SpinnerVariant, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAuroraElement, UsaCheckElement, UsaCounterElement, UsaDialogElement, UsaElement, UsaFlipListElement, UsaGrainElement, UsaMagneticElement, UsaMarqueeElement, UsaParticlesElement, UsaPressElement, UsaProgressElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSpinnerElement, UsaSplitTextElement, UsaSpotlightElement, UsaStaggerElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTypewriterElement, UsaViewSwitchElement, ViewTransitionOptions };
|
|
918
|
+
export { COMPONENT_CATEGORIES, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAurora, defineBackgroundComponents, defineCheck, defineComponents, defineCounter, defineDialog, defineDraggable, defineFeedbackComponents, defineFlipList, defineGrain, defineInteractionComponents, defineMagnetic, defineMarquee, defineOverscroll, defineParticles, definePhysicsComponents, definePress, defineProgress, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSpinner, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTransitionComponents, defineTypewriter, defineViewSwitch, easeOutExpo, flip, linearEasing, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, revealKeyframes, rubberBand, scrambleFrame, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, toast, viewTransition };
|
|
919
|
+
export type { ComponentCategory, ComponentsConfig, ConnectedOptions, DialogVariant, FlipOptions, RevealEffect, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAuroraElement, UsaCheckElement, UsaCounterElement, UsaDialogElement, UsaDraggableElement, UsaElement, UsaFlipListElement, UsaGrainElement, UsaMagneticElement, UsaMarqueeElement, UsaOverscrollElement, UsaParticlesElement, UsaPressElement, UsaProgressElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSpinnerElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTypewriterElement, UsaViewSwitchElement, ViewTransitionOptions };
|
package/dist/components.js
CHANGED
|
@@ -10,7 +10,9 @@ import { defineBackgroundComponents } from './components/background.js';
|
|
|
10
10
|
export { defineAcrylic, defineAurora, defineGrain, defineMarquee, defineParticles } from './components/background.js';
|
|
11
11
|
import { defineTransitionComponents } from './components/transitions.js';
|
|
12
12
|
export { connectedAnimation, defineAccordion, defineDialog, defineFlipList, defineViewSwitch, flip, viewTransition } from './components/transitions.js';
|
|
13
|
-
|
|
13
|
+
import { definePhysicsComponents } from './components/physics.js';
|
|
14
|
+
export { SPRING_EFFECTS, SPRING_PRESETS, createSpring, defineDraggable, defineOverscroll, defineSpring, linearEasing, projectInertia, resolveSpring, rubberBand, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing } from './components/physics.js';
|
|
15
|
+
export { c as configureComponents, p as prefersReducedMotion } from './chunks/base-CuvCgqLy.js';
|
|
14
16
|
|
|
15
17
|
/**
|
|
16
18
|
* use-scroll-animate/components
|
|
@@ -40,6 +42,7 @@ const COMPONENT_CATEGORIES = {
|
|
|
40
42
|
feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],
|
|
41
43
|
background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],
|
|
42
44
|
transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],
|
|
45
|
+
physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],
|
|
43
46
|
};
|
|
44
47
|
const BY_CATEGORY = {
|
|
45
48
|
reveal: defineRevealComponents,
|
|
@@ -48,6 +51,7 @@ const BY_CATEGORY = {
|
|
|
48
51
|
feedback: defineFeedbackComponents,
|
|
49
52
|
background: defineBackgroundComponents,
|
|
50
53
|
transitions: defineTransitionComponents,
|
|
54
|
+
physics: definePhysicsComponents,
|
|
51
55
|
};
|
|
52
56
|
/**
|
|
53
57
|
* Register every `<usa-*>` component (or only the given categories).
|
|
@@ -57,5 +61,5 @@ function defineComponents(categories) {
|
|
|
57
61
|
(categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
|
|
58
62
|
}
|
|
59
63
|
|
|
60
|
-
export { COMPONENT_CATEGORIES, defineBackgroundComponents, defineComponents, defineFeedbackComponents, defineInteractionComponents, defineRevealComponents, defineTextComponents, defineTransitionComponents };
|
|
64
|
+
export { COMPONENT_CATEGORIES, defineBackgroundComponents, defineComponents, defineFeedbackComponents, defineInteractionComponents, definePhysicsComponents, defineRevealComponents, defineTextComponents, defineTransitionComponents };
|
|
61
65
|
//# 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';\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';\n\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate'],\n interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],\n transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\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};\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 (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';\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';\n\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate'],\n interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],\n transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\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};\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 (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAiBH;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;AAC3E,IAAA,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAChH,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;IACrF,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,CAAC;IACtF,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;;AAK5D,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;CACjC;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;IAC/D,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;"}
|