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.
Files changed (51) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +2 -0
  3. package/README_ja.md +2 -0
  4. package/README_zh.md +2 -0
  5. package/dist/chunks/{index-tags-DCTX4F9b.cjs → index-tags-BKcHAxBK.cjs} +3 -1
  6. package/dist/chunks/index-tags-BKcHAxBK.cjs.map +1 -0
  7. package/dist/chunks/{index-tags-DZ-gjMZc.js → index-tags-qc6OWsJ8.js} +3 -1
  8. package/dist/chunks/index-tags-qc6OWsJ8.js.map +1 -0
  9. package/dist/components/jsx.d.cts +2 -0
  10. package/dist/components/jsx.d.ts +2 -0
  11. package/dist/components/lazy.cjs +3 -1
  12. package/dist/components/lazy.cjs.map +1 -1
  13. package/dist/components/lazy.d.cts +2 -0
  14. package/dist/components/lazy.d.ts +2 -0
  15. package/dist/components/lazy.js +3 -1
  16. package/dist/components/lazy.js.map +1 -1
  17. package/dist/components/react.cjs +1 -1
  18. package/dist/components/react.js +1 -1
  19. package/dist/components/svg.cjs +355 -0
  20. package/dist/components/svg.cjs.map +1 -0
  21. package/dist/components/svg.css +3 -0
  22. package/dist/components/svg.d.cts +148 -0
  23. package/dist/components/svg.d.ts +148 -0
  24. package/dist/components/svg.js +342 -0
  25. package/dist/components/svg.js.map +1 -0
  26. package/dist/components/vue.cjs +3 -1
  27. package/dist/components/vue.cjs.map +1 -1
  28. package/dist/components/vue.d.cts +91 -0
  29. package/dist/components/vue.d.ts +91 -0
  30. package/dist/components/vue.js +3 -1
  31. package/dist/components/vue.js.map +1 -1
  32. package/dist/components/webgl.cjs +277 -0
  33. package/dist/components/webgl.cjs.map +1 -0
  34. package/dist/components/webgl.css +3 -0
  35. package/dist/components/webgl.d.cts +114 -0
  36. package/dist/components/webgl.d.ts +114 -0
  37. package/dist/components/webgl.js +267 -0
  38. package/dist/components/webgl.js.map +1 -0
  39. package/dist/components.cjs +24 -1
  40. package/dist/components.cjs.map +1 -1
  41. package/dist/components.css +2 -0
  42. package/dist/components.d.cts +172 -2
  43. package/dist/components.d.ts +172 -2
  44. package/dist/components.js +8 -2
  45. package/dist/components.js.map +1 -1
  46. package/dist/components.umd.js +2 -2
  47. package/dist/components.umd.js.map +1 -1
  48. package/docs/components.md +21 -0
  49. package/package.json +24 -2
  50. package/dist/chunks/index-tags-DCTX4F9b.cjs.map +0 -1
  51. package/dist/chunks/index-tags-DZ-gjMZc.js.map +0 -1
@@ -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 };
@@ -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-DZ-gjMZc.js';
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
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAmCH,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;CACjC;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;;;;"}
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;;;;"}