use-scroll-animate 3.2.0 → 3.4.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 +25 -0
- package/README.md +2 -0
- package/README_ja.md +2 -0
- package/README_zh.md +2 -0
- package/dist/chunks/{index-tags-DCTX4F9b.cjs → index-tags-BKcHAxBK.cjs} +3 -1
- package/dist/chunks/index-tags-BKcHAxBK.cjs.map +1 -0
- package/dist/chunks/{index-tags-DZ-gjMZc.js → index-tags-qc6OWsJ8.js} +3 -1
- package/dist/chunks/index-tags-qc6OWsJ8.js.map +1 -0
- package/dist/components/jsx.d.cts +2 -0
- package/dist/components/jsx.d.ts +2 -0
- package/dist/components/lazy.cjs +3 -1
- package/dist/components/lazy.cjs.map +1 -1
- package/dist/components/lazy.d.cts +2 -0
- package/dist/components/lazy.d.ts +2 -0
- package/dist/components/lazy.js +3 -1
- package/dist/components/lazy.js.map +1 -1
- package/dist/components/react.cjs +1 -1
- package/dist/components/react.js +1 -1
- package/dist/components/svg.cjs +355 -0
- package/dist/components/svg.cjs.map +1 -0
- package/dist/components/svg.css +3 -0
- package/dist/components/svg.d.cts +148 -0
- package/dist/components/svg.d.ts +148 -0
- package/dist/components/svg.js +342 -0
- package/dist/components/svg.js.map +1 -0
- package/dist/components/vue.cjs +3 -1
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +91 -0
- package/dist/components/vue.d.ts +91 -0
- package/dist/components/vue.js +3 -1
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +277 -0
- package/dist/components/webgl.cjs.map +1 -0
- package/dist/components/webgl.css +3 -0
- package/dist/components/webgl.d.cts +114 -0
- package/dist/components/webgl.d.ts +114 -0
- package/dist/components/webgl.js +267 -0
- package/dist/components/webgl.js.map +1 -0
- package/dist/components.cjs +24 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +2 -0
- package/dist/components.d.cts +172 -2
- package/dist/components.d.ts +172 -2
- package/dist/components.js +8 -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 +21 -0
- package/package.json +24 -2
- package/dist/chunks/index-tags-DCTX4F9b.cjs.map +0 -1
- package/dist/chunks/index-tags-DZ-gjMZc.js.map +0 -1
package/dist/components.d.ts
CHANGED
|
@@ -2013,6 +2013,174 @@ declare global {
|
|
|
2013
2013
|
}
|
|
2014
2014
|
}
|
|
2015
2015
|
|
|
2016
|
+
/**
|
|
2017
|
+
* `<usa-draw>` — line drawing: every stroke of the SVG inside draws itself.
|
|
2018
|
+
* Attributes: `trigger` (`view` default · `hover` · `click` · `scrub`),
|
|
2019
|
+
* `duration` (1600), `stagger` (0–0.9 share of the timeline, 0.2), `fill`
|
|
2020
|
+
* (fade the fill in after drawing), `repeat`. Method `play()`, property
|
|
2021
|
+
* `progress`, event `usa:complete`. Reduced motion: drawn immediately.
|
|
2022
|
+
*/
|
|
2023
|
+
interface UsaDrawElement extends UsaElement {
|
|
2024
|
+
play(): void;
|
|
2025
|
+
progress: number;
|
|
2026
|
+
}
|
|
2027
|
+
declare function defineDraw(tag?: string): CustomElementConstructor | undefined;
|
|
2028
|
+
|
|
2029
|
+
/**
|
|
2030
|
+
* `<usa-morph>` — morphs an SVG path through a list of shapes.
|
|
2031
|
+
* Put a `<svg><path></path></svg>` inside (one is created otherwise) and set
|
|
2032
|
+
* `paths="M… | M… | M…"` (same command structure morphs smoothly, others
|
|
2033
|
+
* switch at the midpoint). Attributes: `trigger` (`click` default · `hover`
|
|
2034
|
+
* · `auto` · `view`), `interval` (ms for auto, 2000), `duration` (600).
|
|
2035
|
+
* Property `index`, method `next()`, event `usa:change`.
|
|
2036
|
+
* Reduced motion: shapes switch without animating; `auto` does not cycle.
|
|
2037
|
+
*/
|
|
2038
|
+
interface UsaMorphElement extends UsaElement {
|
|
2039
|
+
readonly index: number;
|
|
2040
|
+
next(): Promise<void>;
|
|
2041
|
+
}
|
|
2042
|
+
declare function defineMorph(tag?: string): CustomElementConstructor | undefined;
|
|
2043
|
+
|
|
2044
|
+
/** Clip-path start / end frames for each reveal shape. */
|
|
2045
|
+
declare const MASK_SHAPES: Record<string, [string, string]>;
|
|
2046
|
+
/**
|
|
2047
|
+
* `<usa-mask-reveal>` — reveals its content through a growing mask shape.
|
|
2048
|
+
* Attributes: `shape` (`circle` default · `diamond` · `wipe` · `wipe-up` ·
|
|
2049
|
+
* `iris` · `star`), `duration` (900), `delay`, `trigger` (`view` · `hover`
|
|
2050
|
+
* · `click`), `repeat`, `at` (`x% y%` origin for circle). Event
|
|
2051
|
+
* `usa:complete`. Reduced motion: content is shown without the mask.
|
|
2052
|
+
*/
|
|
2053
|
+
interface UsaMaskRevealElement extends UsaElement {
|
|
2054
|
+
reveal(): Promise<void>;
|
|
2055
|
+
}
|
|
2056
|
+
declare function defineMaskReveal(tag?: string): CustomElementConstructor | undefined;
|
|
2057
|
+
|
|
2058
|
+
type Icon = {
|
|
2059
|
+
d: string;
|
|
2060
|
+
frames: Keyframe[];
|
|
2061
|
+
duration: number;
|
|
2062
|
+
origin?: string;
|
|
2063
|
+
};
|
|
2064
|
+
/** Built-in animated icons (24×24 strokes) and the motion each one plays. */
|
|
2065
|
+
declare const ANIM_ICONS: Record<string, Icon>;
|
|
2066
|
+
/**
|
|
2067
|
+
* `<usa-anim-icon name="bell">` — an animated stroke icon that plays its
|
|
2068
|
+
* motion on `trigger` (`hover` default · `click` · `view` · `loop`).
|
|
2069
|
+
* Attributes: `name` (see `ANIM_ICONS`), `size` (24), `label` (accessible
|
|
2070
|
+
* name; decorative when absent). Method `play()`. Reduced motion: static.
|
|
2071
|
+
*/
|
|
2072
|
+
interface UsaAnimIconElement extends UsaElement {
|
|
2073
|
+
play(): void;
|
|
2074
|
+
}
|
|
2075
|
+
declare function defineAnimIcon(tag?: string): CustomElementConstructor | undefined;
|
|
2076
|
+
|
|
2077
|
+
/** `true` when two path strings share the same commands (so their numbers can be interpolated). */
|
|
2078
|
+
declare function pathsCompatible(a: string, b: string): boolean;
|
|
2079
|
+
/**
|
|
2080
|
+
* Path data between `a` and `b` at `t` (0–1). Paths with the same command
|
|
2081
|
+
* structure morph number-by-number; others switch at the midpoint.
|
|
2082
|
+
*/
|
|
2083
|
+
declare function interpolatePath(a: string, b: string, t: number): string;
|
|
2084
|
+
interface MorphOptions {
|
|
2085
|
+
duration?: number;
|
|
2086
|
+
easing?: (t: number) => number;
|
|
2087
|
+
}
|
|
2088
|
+
/** Animate a `<path>`'s `d` to `to`. Resolves when done; instant under reduced motion. */
|
|
2089
|
+
declare function morphTo(path: SVGPathElement | Element, to: string, o?: MorphOptions): Promise<void>;
|
|
2090
|
+
/**
|
|
2091
|
+
* Prepare every stroke in `root` for line drawing (normalised `pathLength=1`,
|
|
2092
|
+
* so no `getTotalLength()` is needed) and return a function that sets
|
|
2093
|
+
* progress 0–1, optionally staggered between shapes.
|
|
2094
|
+
*/
|
|
2095
|
+
declare function drawLines(root: Element, o?: {
|
|
2096
|
+
stagger?: number;
|
|
2097
|
+
}): (progress: number) => void;
|
|
2098
|
+
|
|
2099
|
+
/**
|
|
2100
|
+
* use-scroll-animate/components/svg — SVG animation (v3.3).
|
|
2101
|
+
* `<usa-draw>` (line drawing), `<usa-morph>` (path morph), `<usa-mask-reveal>`
|
|
2102
|
+
* (mask / clip-path reveals) and `<usa-anim-icon>` (animated icons), plus
|
|
2103
|
+
* `interpolatePath()`, `morphTo()`, `drawLines()`.
|
|
2104
|
+
*/
|
|
2105
|
+
|
|
2106
|
+
/** Register every component of this category under its default tag. */
|
|
2107
|
+
declare function defineSvgComponents(): void;
|
|
2108
|
+
declare global {
|
|
2109
|
+
interface HTMLElementTagNameMap {
|
|
2110
|
+
'usa-draw': UsaDrawElement;
|
|
2111
|
+
'usa-morph': UsaMorphElement;
|
|
2112
|
+
'usa-mask-reveal': UsaMaskRevealElement;
|
|
2113
|
+
'usa-anim-icon': UsaAnimIconElement;
|
|
2114
|
+
}
|
|
2115
|
+
}
|
|
2116
|
+
|
|
2117
|
+
/**
|
|
2118
|
+
* Shared shell for the WebGL elements: a canvas over (or behind) the
|
|
2119
|
+
* content that renders only while visible and the tab is shown, a DPR cap
|
|
2120
|
+
* of 2, and a graceful fallback (`data-fallback`) when WebGL, the shader
|
|
2121
|
+
* or the image (CORS) is unavailable — the original content / CSS stays.
|
|
2122
|
+
*/
|
|
2123
|
+
interface UsaGLElement extends UsaElement {
|
|
2124
|
+
/** `true` once WebGL rendering is active (otherwise the CSS fallback shows). */
|
|
2125
|
+
readonly active: boolean;
|
|
2126
|
+
}
|
|
2127
|
+
/**
|
|
2128
|
+
* `<usa-shader>` — GPU shader background behind its content. `preset`
|
|
2129
|
+
* (`gradient` · `plasma` · `waves` · `aurora`) or your own fragment shader in
|
|
2130
|
+
* `<script type="x-shader/x-fragment">` (uniforms `u_time`, `u_resolution`,
|
|
2131
|
+
* `u_mouse`, `v_uv`); `speed`. Without WebGL: the element's CSS background.
|
|
2132
|
+
*/
|
|
2133
|
+
declare function defineShader(tag?: string): CustomElementConstructor | undefined;
|
|
2134
|
+
/**
|
|
2135
|
+
* `<usa-distort>` — hover distortion + RGB split on the `<img>` inside,
|
|
2136
|
+
* following the pointer. Without WebGL / CORS: a gentle CSS zoom.
|
|
2137
|
+
*/
|
|
2138
|
+
declare function defineDistort(tag?: string): CustomElementConstructor | undefined;
|
|
2139
|
+
/**
|
|
2140
|
+
* `<usa-liquid>` — liquid image: clicks / taps send ripples through the
|
|
2141
|
+
* `<img>` inside, hover adds a gentle wobble; `strength`. Fallback: plain image.
|
|
2142
|
+
*/
|
|
2143
|
+
declare function defineLiquid(tag?: string): CustomElementConstructor | undefined;
|
|
2144
|
+
|
|
2145
|
+
/** Built-in fragment shaders (bodies; uniforms `u_time`, `u_resolution`, `u_mouse` 0–1, `u_hover` 0–1, `u_tex`, `u_ripples[4]` = x, y, age, strength). */
|
|
2146
|
+
declare const SHADERS: Record<string, string>;
|
|
2147
|
+
/** Full fragment source for a preset or custom body (adds the shared header). */
|
|
2148
|
+
declare function fragmentSource(body: string): string;
|
|
2149
|
+
declare function supportsWebGL(): boolean;
|
|
2150
|
+
interface GLQuad {
|
|
2151
|
+
/** Draw a frame with these uniform values. */
|
|
2152
|
+
render(u: {
|
|
2153
|
+
time?: number;
|
|
2154
|
+
mouse?: [number, number];
|
|
2155
|
+
hover?: number;
|
|
2156
|
+
ripples?: number[];
|
|
2157
|
+
}): void;
|
|
2158
|
+
/** Resize the drawing buffer to the canvas' CSS size × DPR (≤ 2). */
|
|
2159
|
+
resize(): void;
|
|
2160
|
+
/** Upload an image as `u_tex`. */
|
|
2161
|
+
texture(img: TexImageSource): void;
|
|
2162
|
+
dispose(): void;
|
|
2163
|
+
}
|
|
2164
|
+
/** Compile `frag` on a full-canvas quad, or `null` when WebGL / compilation is unavailable. */
|
|
2165
|
+
declare function glQuad(canvas: HTMLCanvasElement, frag: string): GLQuad | null;
|
|
2166
|
+
|
|
2167
|
+
/**
|
|
2168
|
+
* use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).
|
|
2169
|
+
* `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image
|
|
2170
|
+
* distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner
|
|
2171
|
+
* (`glQuad()`), with graceful fallbacks when WebGL is unavailable.
|
|
2172
|
+
*/
|
|
2173
|
+
|
|
2174
|
+
/** Register every component of this category under its default tag. */
|
|
2175
|
+
declare function defineWebglComponents(): void;
|
|
2176
|
+
declare global {
|
|
2177
|
+
interface HTMLElementTagNameMap {
|
|
2178
|
+
'usa-shader': UsaGLElement;
|
|
2179
|
+
'usa-distort': UsaGLElement;
|
|
2180
|
+
'usa-liquid': UsaGLElement;
|
|
2181
|
+
}
|
|
2182
|
+
}
|
|
2183
|
+
|
|
2016
2184
|
/** The component categories and their default tags. */
|
|
2017
2185
|
declare const COMPONENT_CATEGORIES: {
|
|
2018
2186
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
@@ -2028,6 +2196,8 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2028
2196
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
2029
2197
|
readonly timeline: readonly ["usa-timeline"];
|
|
2030
2198
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
2199
|
+
readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
|
|
2200
|
+
readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
|
|
2031
2201
|
};
|
|
2032
2202
|
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
2033
2203
|
|
|
@@ -2037,5 +2207,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2037
2207
|
*/
|
|
2038
2208
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2039
2209
|
|
|
2040
|
-
export { AMBIENT_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDotNetwork, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLoadingBar, defineMagnetic, defineMarquee, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, easeOutExpo, enableMpaTransitions, flip, fluentPreset, gesture, getMotionIntensity, haptic, linearEasing, loadingBar, morphPath, pageTransition, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2041
|
-
export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GestureHandlers, GestureOptions, MotionIntensity, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, 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 };
|
|
2210
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, drawLines, easeOutExpo, enableMpaTransitions, flip, fluentPreset, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, morphPath, morphTo, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2211
|
+
export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, 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
|
@@ -24,11 +24,15 @@ import { defineTimelineComponents } from './components/timeline.js';
|
|
|
24
24
|
export { TIMELINE_PRESETS, defineTimeline, resolvePosition, timeline } from './components/timeline.js';
|
|
25
25
|
import { defineGestureComponents } from './components/gesture.js';
|
|
26
26
|
export { definePinchZoom, defineSwipeable, gesture, pinchScale, swipeDirection } from './components/gesture.js';
|
|
27
|
+
import { defineSvgComponents } from './components/svg.js';
|
|
28
|
+
export { ANIM_ICONS, MASK_SHAPES, defineAnimIcon, defineDraw, defineMaskReveal, defineMorph, drawLines, interpolatePath, morphTo, pathsCompatible } from './components/svg.js';
|
|
29
|
+
import { defineWebglComponents } from './components/webgl.js';
|
|
30
|
+
export { SHADERS, defineDistort, defineLiquid, defineShader, fragmentSource, glQuad, supportsWebGL } from './components/webgl.js';
|
|
27
31
|
import { a as adoptVariants } from './chunks/variants-BQ3gCb5L.js';
|
|
28
32
|
export { V as VARIANTS, s as setVariant } from './chunks/variants-BQ3gCb5L.js';
|
|
29
33
|
import { c as canDefine } from './chunks/base-Cu-86Z31.js';
|
|
30
34
|
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-Cu-86Z31.js';
|
|
31
|
-
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-
|
|
35
|
+
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-qc6OWsJ8.js';
|
|
32
36
|
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-BV-cpTHC.js';
|
|
33
37
|
|
|
34
38
|
/**
|
|
@@ -65,6 +69,8 @@ const BY_CATEGORY = {
|
|
|
65
69
|
page: definePageComponents,
|
|
66
70
|
timeline: defineTimelineComponents,
|
|
67
71
|
gesture: defineGestureComponents,
|
|
72
|
+
svg: defineSvgComponents,
|
|
73
|
+
webgl: defineWebglComponents,
|
|
68
74
|
};
|
|
69
75
|
/**
|
|
70
76
|
* Register every `<usa-*>` component (or only the given categories).
|
|
@@ -76,5 +82,5 @@ function defineComponents(categories) {
|
|
|
76
82
|
(categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
|
|
77
83
|
}
|
|
78
84
|
|
|
79
|
-
export { adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineFeedbackComponents, defineGestureComponents, defineInteractionComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineTextComponents, defineTimelineComponents, defineTransitionComponents, defineUiComponents };
|
|
85
|
+
export { adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineFeedbackComponents, defineGestureComponents, defineInteractionComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineSvgComponents, defineTextComponents, defineTimelineComponents, defineTransitionComponents, defineUiComponents, defineWebglComponents };
|
|
80
86
|
//# 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 { 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';\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};\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 { 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';\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};\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;AAuCH,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;CAC7B;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;;;;"}
|