use-scroll-animate 3.3.0 → 3.5.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 +24 -0
- package/README.md +2 -0
- package/README_ja.md +2 -0
- package/README_zh.md +2 -0
- package/dist/chunks/{base-Cu-86Z31.js → base-BpROOcey.js} +2 -2
- package/dist/chunks/{base-Cu-86Z31.js.map → base-BpROOcey.js.map} +1 -1
- package/dist/chunks/core-IaorbTdu.cjs +185 -0
- package/dist/chunks/core-IaorbTdu.cjs.map +1 -0
- package/dist/chunks/core-uxs3ETou.js +181 -0
- package/dist/chunks/core-uxs3ETou.js.map +1 -0
- package/dist/chunks/{index-tags-Cz4iTBEK.cjs → index-tags-CLFrjVR7.cjs} +3 -1
- package/dist/chunks/{index-tags-Cz4iTBEK.cjs.map → index-tags-CLFrjVR7.cjs.map} +1 -1
- package/dist/chunks/{index-tags-Dc_Z4yAY.js → index-tags-uw1Fospg.js} +3 -1
- package/dist/chunks/{index-tags-Dc_Z4yAY.js.map → index-tags-uw1Fospg.js.map} +1 -1
- package/dist/chunks/{spring-BV-cpTHC.js → spring-C-fw7_9f.js} +2 -2
- package/dist/chunks/{spring-BV-cpTHC.js.map → spring-C-fw7_9f.js.map} +1 -1
- package/dist/chunks/{variants-BQ3gCb5L.js → variants-CHe1VbSn.js} +2 -2
- package/dist/chunks/{variants-BQ3gCb5L.js.map → variants-CHe1VbSn.js.map} +1 -1
- package/dist/components/background.js +3 -3
- package/dist/components/cards.js +3 -3
- package/dist/components/click.js +3 -3
- package/dist/components/depth.cjs +252 -0
- package/dist/components/depth.cjs.map +1 -0
- package/dist/components/depth.css +3 -0
- package/dist/components/depth.d.cts +121 -0
- package/dist/components/depth.d.ts +121 -0
- package/dist/components/depth.js +243 -0
- package/dist/components/depth.js.map +1 -0
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.cjs +6 -182
- package/dist/components/gesture.cjs.map +1 -1
- package/dist/components/gesture.js +6 -181
- package/dist/components/gesture.js.map +1 -1
- package/dist/components/interaction.js +2 -2
- 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/page.js +3 -3
- package/dist/components/physics.js +4 -4
- package/dist/components/react.cjs +1 -1
- package/dist/components/react.js +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/svg.js +2 -2
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +2 -2
- package/dist/components/transitions.js +2 -2
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +4 -1
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +74 -0
- package/dist/components/vue.d.ts +74 -0
- package/dist/components/vue.js +7 -4
- 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 -4
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +2 -0
- package/dist/components.d.cts +145 -2
- package/dist/components.d.ts +145 -2
- package/dist/components.js +15 -8
- 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/components.d.ts
CHANGED
|
@@ -2114,6 +2114,147 @@ declare global {
|
|
|
2114
2114
|
}
|
|
2115
2115
|
}
|
|
2116
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
|
+
|
|
2184
|
+
/**
|
|
2185
|
+
* `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces
|
|
2186
|
+
* (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow
|
|
2187
|
+
* keys, `autoplay` (ms) or `show(face | index)`; spring-driven.
|
|
2188
|
+
* Attributes: `size` (px, 200), `autoplay`, `perspective` (900).
|
|
2189
|
+
* `usa:change` (`{ index, face }`). Reduced motion: instant face switch.
|
|
2190
|
+
*/
|
|
2191
|
+
interface UsaCubeElement extends UsaElement {
|
|
2192
|
+
readonly index: number;
|
|
2193
|
+
show(face: number | string): void;
|
|
2194
|
+
next(): void;
|
|
2195
|
+
prev(): void;
|
|
2196
|
+
}
|
|
2197
|
+
declare function defineCube(tag?: string): CustomElementConstructor | undefined;
|
|
2198
|
+
|
|
2199
|
+
/**
|
|
2200
|
+
* `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the
|
|
2201
|
+
* screen plane) move and scale by depth as the pointer moves, the device
|
|
2202
|
+
* tilts (`orientation`) or the page scrolls (`scroll`).
|
|
2203
|
+
* Attributes: `source` (`pointer` default · `orientation` · `scroll` ·
|
|
2204
|
+
* space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt
|
|
2205
|
+
* of the whole scene in deg, 0). `requestPermission()` for iOS motion.
|
|
2206
|
+
* Reduced motion: layers stay flat.
|
|
2207
|
+
*/
|
|
2208
|
+
interface UsaDepthElement extends UsaElement {
|
|
2209
|
+
/** Current -1…1 input. */
|
|
2210
|
+
readonly tilt: {
|
|
2211
|
+
x: number;
|
|
2212
|
+
y: number;
|
|
2213
|
+
};
|
|
2214
|
+
requestPermission(): Promise<boolean>;
|
|
2215
|
+
}
|
|
2216
|
+
declare function defineDepth(tag?: string): CustomElementConstructor | undefined;
|
|
2217
|
+
|
|
2218
|
+
interface TiltReading {
|
|
2219
|
+
/** Left/right tilt, -1…1. */
|
|
2220
|
+
x: number;
|
|
2221
|
+
/** Front/back tilt, -1…1. */
|
|
2222
|
+
y: number;
|
|
2223
|
+
}
|
|
2224
|
+
/** Map a DeviceOrientation reading (beta/gamma degrees) to -1…1 tilt around a resting pose (pure). */
|
|
2225
|
+
declare function orientationToTilt(beta: number | null, gamma: number | null, range?: number, rest?: number): TiltReading;
|
|
2226
|
+
/** `true` when DeviceOrientation events exist. */
|
|
2227
|
+
declare const supportsOrientation: () => boolean;
|
|
2228
|
+
/**
|
|
2229
|
+
* Ask for motion-sensor permission where required (iOS 13+; must run inside
|
|
2230
|
+
* a user gesture). Resolves `true` when tilt events can be used.
|
|
2231
|
+
*/
|
|
2232
|
+
declare function requestOrientationPermission(): Promise<boolean>;
|
|
2233
|
+
/**
|
|
2234
|
+
* Listen to device tilt (smoothed); falls back to nothing on desktops.
|
|
2235
|
+
* Returns a stop function.
|
|
2236
|
+
*/
|
|
2237
|
+
declare function deviceTilt(cb: (t: TiltReading) => void, o?: {
|
|
2238
|
+
range?: number;
|
|
2239
|
+
smooth?: number;
|
|
2240
|
+
}): () => void;
|
|
2241
|
+
|
|
2242
|
+
/**
|
|
2243
|
+
* use-scroll-animate/components/depth — 3D (v3.5).
|
|
2244
|
+
* `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
|
|
2245
|
+
* pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
|
|
2246
|
+
* carousel is `<usa-carousel-3d>` in `components/cards`.
|
|
2247
|
+
*/
|
|
2248
|
+
|
|
2249
|
+
/** Register every component of this category under its default tag. */
|
|
2250
|
+
declare function defineDepthComponents(): void;
|
|
2251
|
+
declare global {
|
|
2252
|
+
interface HTMLElementTagNameMap {
|
|
2253
|
+
'usa-cube': UsaCubeElement;
|
|
2254
|
+
'usa-depth': UsaDepthElement;
|
|
2255
|
+
}
|
|
2256
|
+
}
|
|
2257
|
+
|
|
2117
2258
|
/** The component categories and their default tags. */
|
|
2118
2259
|
declare const COMPONENT_CATEGORIES: {
|
|
2119
2260
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
@@ -2130,6 +2271,8 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2130
2271
|
readonly timeline: readonly ["usa-timeline"];
|
|
2131
2272
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
2132
2273
|
readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
|
|
2274
|
+
readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
|
|
2275
|
+
readonly depth: readonly ["usa-cube", "usa-depth"];
|
|
2133
2276
|
};
|
|
2134
2277
|
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
2135
2278
|
|
|
@@ -2139,5 +2282,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2139
2282
|
*/
|
|
2140
2283
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2141
2284
|
|
|
2142
|
-
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, 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, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMorph, 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, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, drawLines, easeOutExpo, enableMpaTransitions, flip, fluentPreset, gesture, getMotionIntensity, 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, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2143
|
-
export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, 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, 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 };
|
|
2285
|
+
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, defineCube, defineCursor, defineDepth, defineDepthComponents, 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, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, fluentPreset, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2286
|
+
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, TiltReading, 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, UsaCubeElement, UsaCursorElement, UsaDepthElement, 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
|
@@ -23,15 +23,20 @@ export { AMBIENT_EFFECTS, CURSOR_MODES, PAGE_EFFECTS, defineAmbient, defineAutoS
|
|
|
23
23
|
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
|
-
export { definePinchZoom, defineSwipeable
|
|
26
|
+
export { definePinchZoom, defineSwipeable } from './components/gesture.js';
|
|
27
27
|
import { defineSvgComponents } from './components/svg.js';
|
|
28
28
|
export { ANIM_ICONS, MASK_SHAPES, defineAnimIcon, defineDraw, defineMaskReveal, defineMorph, drawLines, interpolatePath, morphTo, pathsCompatible } from './components/svg.js';
|
|
29
|
-
import {
|
|
30
|
-
export {
|
|
31
|
-
import {
|
|
32
|
-
export {
|
|
33
|
-
|
|
34
|
-
export {
|
|
29
|
+
import { defineWebglComponents } from './components/webgl.js';
|
|
30
|
+
export { SHADERS, defineDistort, defineLiquid, defineShader, fragmentSource, glQuad, supportsWebGL } from './components/webgl.js';
|
|
31
|
+
import { defineDepthComponents } from './components/depth.js';
|
|
32
|
+
export { defineCube, defineDepth, deviceTilt, orientationToTilt, requestOrientationPermission, supportsOrientation } from './components/depth.js';
|
|
33
|
+
import { a as adoptVariants } from './chunks/variants-CHe1VbSn.js';
|
|
34
|
+
export { V as VARIANTS, s as setVariant } from './chunks/variants-CHe1VbSn.js';
|
|
35
|
+
import { c as canDefine } from './chunks/base-BpROOcey.js';
|
|
36
|
+
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-BpROOcey.js';
|
|
37
|
+
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-uw1Fospg.js';
|
|
38
|
+
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-C-fw7_9f.js';
|
|
39
|
+
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-uxs3ETou.js';
|
|
35
40
|
|
|
36
41
|
/**
|
|
37
42
|
* use-scroll-animate/components
|
|
@@ -68,6 +73,8 @@ const BY_CATEGORY = {
|
|
|
68
73
|
timeline: defineTimelineComponents,
|
|
69
74
|
gesture: defineGestureComponents,
|
|
70
75
|
svg: defineSvgComponents,
|
|
76
|
+
webgl: defineWebglComponents,
|
|
77
|
+
depth: defineDepthComponents,
|
|
71
78
|
};
|
|
72
79
|
/**
|
|
73
80
|
* Register every `<usa-*>` component (or only the given categories).
|
|
@@ -79,5 +86,5 @@ function defineComponents(categories) {
|
|
|
79
86
|
(categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
|
|
80
87
|
}
|
|
81
88
|
|
|
82
|
-
export { adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineFeedbackComponents, defineGestureComponents, defineInteractionComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineSvgComponents, defineTextComponents, defineTimelineComponents, defineTransitionComponents, defineUiComponents };
|
|
89
|
+
export { adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineDepthComponents, defineFeedbackComponents, defineGestureComponents, defineInteractionComponents, definePageComponents, definePhysicsComponents, defineRevealComponents, defineSvgComponents, defineTextComponents, defineTimelineComponents, defineTransitionComponents, defineUiComponents, defineWebglComponents };
|
|
83
90
|
//# sourceMappingURL=components.js.map
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { 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';\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};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n};\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;AAyCH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,UAAU,EAAE,0BAA0B;AACtC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,oBAAoB;AAC3B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,EAAE,EAAE,kBAAkB;AACtB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,GAAG,EAAE,mBAAmB;AACxB,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,KAAK,EAAE,qBAAqB;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;;;;"}
|