use-scroll-animate 4.0.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/chunks/{base-ZARFccur.js → base-BPG5zvex.js} +2 -2
- package/dist/chunks/{base-ZARFccur.js.map → base-BPG5zvex.js.map} +1 -1
- package/dist/chunks/{core-DXqZm5Il.cjs → core-CLu8ZrC-.cjs} +52 -10
- package/dist/chunks/core-CLu8ZrC-.cjs.map +1 -0
- package/dist/chunks/{core-Co-6AL0h.js → core-QTFk4kgO.js} +53 -12
- package/dist/chunks/core-QTFk4kgO.js.map +1 -0
- package/dist/chunks/{core-DKY-fVzR.js → core-eXX8rB_b.js} +2 -2
- package/dist/chunks/{core-DKY-fVzR.js.map → core-eXX8rB_b.js.map} +1 -1
- package/dist/chunks/{spring-E2ickYNI.js → spring-BziPsW3r.js} +2 -2
- package/dist/chunks/{spring-E2ickYNI.js.map → spring-BziPsW3r.js.map} +1 -1
- package/dist/chunks/{variants-DvnxvRCM.js → variants-BVYMcxRv.js} +2 -2
- package/dist/chunks/{variants-DvnxvRCM.js.map → variants-BVYMcxRv.js.map} +1 -1
- package/dist/components/angular.cjs +1 -1
- package/dist/components/angular.d.cts +29 -5
- package/dist/components/angular.d.ts +29 -5
- package/dist/components/angular.js +5 -5
- 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.js +4 -4
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.js +2 -2
- package/dist/components/layout.js +2 -2
- package/dist/components/packs.js +2 -2
- package/dist/components/page.js +3 -3
- package/dist/components/physics.js +4 -4
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +20 -5
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +33 -23
- package/dist/components/solid.d.ts +33 -23
- package/dist/components/solid.js +24 -9
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +1 -1
- package/dist/components/svelte.d.cts +29 -5
- package/dist/components/svelte.d.ts +29 -5
- package/dist/components/svelte.js +5 -5
- package/dist/components/svg.cjs +16 -10
- package/dist/components/svg.cjs.map +1 -1
- package/dist/components/svg.css +1 -1
- package/dist/components/svg.js +18 -12
- package/dist/components/svg.js.map +1 -1
- package/dist/components/text.cjs +1 -1
- package/dist/components/text.css +1 -1
- package/dist/components/text.js +3 -3
- package/dist/components/timeline.cjs +25 -5
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.d.cts +33 -7
- package/dist/components/timeline.d.ts +33 -7
- package/dist/components/timeline.js +27 -8
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.js +2 -2
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +1 -1
- package/dist/components/vue.d.cts +29 -5
- package/dist/components/vue.d.ts +29 -5
- package/dist/components/vue.js +5 -5
- package/dist/components/webgl.cjs +10 -0
- package/dist/components/webgl.cjs.map +1 -1
- package/dist/components/webgl.js +12 -2
- package/dist/components/webgl.js.map +1 -1
- package/dist/components.cjs +2 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +2 -2
- package/dist/components.d.cts +34 -8
- package/dist/components.d.ts +34 -8
- package/dist/components.js +7 -7
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +30 -6
- package/dist/index.d.ts +30 -6
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/solid.cjs +38 -8
- package/dist/solid.cjs.map +1 -1
- package/dist/solid.d.cts +6 -1
- package/dist/solid.d.ts +6 -1
- package/dist/solid.js +39 -9
- package/dist/solid.js.map +1 -1
- package/docs/API.md +3 -1
- package/docs/ROADMAP.md +1 -1
- package/package.json +1 -1
- package/dist/chunks/core-Co-6AL0h.js.map +0 -1
- package/dist/chunks/core-DXqZm5Il.cjs.map +0 -1
package/dist/components.css
CHANGED
|
@@ -6,7 +6,7 @@ usa-scrolly{display:block;position:relative}usa-scrolly [data-sticky]{position:s
|
|
|
6
6
|
usa-counter{font-variant-numeric:tabular-nums}
|
|
7
7
|
usa-shimmer-text{--usa-shimmer-color:currentColor;--usa-shimmer-shine:#fff;background:linear-gradient(var(--usa-shimmer-angle,110deg),var(--usa-shimmer-color) 35%,var(--usa-shimmer-shine) 50%,var(--usa-shimmer-color) 65%) 0 0 / 250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:usa-shimmer var(--usa-shimmer-duration,2600ms) linear infinite}@keyframes usa-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
|
|
8
8
|
usa-split-text .usa-split-word{display:inline-block;white-space:nowrap}usa-split-text .usa-split-unit{display:inline-block;white-space:pre}usa-split-text[data-state="hidden"] .usa-split-unit{opacity:0}usa-split-text[data-state="play"] .usa-split-unit{animation:usa-split-rise var(--usa-split-duration,620ms) cubic-bezier(0.22,1,0.36,1) both;animation-delay:calc(var(--usa-split-delay,0ms) + var(--i,0) * var(--usa-split-stagger,28ms))}usa-split-text[effect="fade"][data-state="play"] .usa-split-unit{animation-name:usa-split-fade}usa-split-text[effect="blur"][data-state="play"] .usa-split-unit{animation-name:usa-split-blur}usa-split-text[effect="flip"][data-state="play"] .usa-split-unit{animation-name:usa-split-flip;transform-origin:50% 100%}usa-split-text[effect="pop"][data-state="play"] .usa-split-unit{animation-name:usa-split-pop;animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}@keyframes usa-split-rise{from{opacity:0;transform:translate3d(0,0.6em,0)}to{opacity:1;transform:none}}@keyframes usa-split-fade{from{opacity:0}to{opacity:1}}@keyframes usa-split-blur{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}@keyframes usa-split-flip{from{opacity:0;transform:perspective(500px) rotateX(-80deg)}to{opacity:1;transform:none}}@keyframes usa-split-pop{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){usa-split-text .usa-split-unit{animation:none !important;opacity:1 !important}}
|
|
9
|
-
usa-wave-text .usa-word,usa-scroll-highlight .usa-word{display:inline-block;white-space:nowrap}usa-wave-text .usa-char{display:inline-block;animation:usa-wave var(--usa-wave-s,1.6s) ease-in-out infinite;animation-delay:calc(var(--i) * var(--usa-wave-d,0.06s))}@keyframes usa-wave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(calc(var(--usa-wave-a,0.25em) * -1))}}usa-glitch{position:relative;display:inline-block}usa-glitch::before,usa-glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}usa-glitch::before{color:#ff2bd6;transform:translate(calc(var(--usa-glitch-i,3px) * -1),0);clip-path:inset(0 0 55% 0);mix-blend-mode:screen;animation:usa-glitch-a 2.4s steps(2,end) infinite}usa-glitch::after{color:#00f0ff;transform:translate(var(--usa-glitch-i,3px),0);clip-path:inset(50% 0 0 0);mix-blend-mode:screen;animation:usa-glitch-b 1.9s steps(2,end) infinite}usa-glitch[trigger="hover"]::before,usa-glitch[trigger="hover"]::after{animation-play-state:paused;opacity:0}usa-glitch[trigger="hover"]:hover::before,usa-glitch[trigger="hover"]:hover::after{animation-play-state:running;opacity:1}@keyframes usa-glitch-a{0%{clip-path:inset(0 0 80% 0)}20%{clip-path:inset(30% 0 40% 0)}40%{clip-path:inset(70% 0 5% 0)}60%{clip-path:inset(10% 0 60% 0)}80%{clip-path:inset(50% 0 30% 0)}100%{clip-path:inset(0 0 80% 0)}}@keyframes usa-glitch-b{0%{clip-path:inset(60% 0 10% 0)}25%{clip-path:inset(15% 0 70% 0)}50%{clip-path:inset(80% 0 2% 0)}75%{clip-path:inset(40% 0 35% 0)}100%{clip-path:inset(60% 0 10% 0)}}usa-gradient-text{background:var(--usa-grad) 0 50% / 300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:usa-grad-flow var(--usa-grad-s,6s) linear infinite}@keyframes usa-grad-flow{to{background-position:150% 50%}}usa-handwriting{--usa-hw-stroke:currentColor;display:inline-block;line-height:0}usa-handwriting svg{max-width:100%;height:auto;overflow:visible}usa-handwriting text{fill:transparent;stroke:var(--usa-hw-stroke);stroke-width:1.2;stroke-dasharray:1600;stroke-dashoffset:1600;font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive}usa-handwriting[data-state="drawing"] text{animation:usa-hw-draw var(--usa-hw-d,2400ms) cubic-bezier(0.55,0,0.45,1) forwards,usa-hw-fill 0.6s ease calc(var(--usa-hw-d,2400ms) * 0.8) forwards}usa-handwriting[data-state="done"] text{stroke-dashoffset:0;fill:currentColor}@keyframes usa-hw-draw{to{stroke-dashoffset:0}}@keyframes usa-hw-fill{to{fill:currentColor}}usa-scroll-highlight .usa-hl-word{opacity:var(--usa-hl-dim,0.2);transition:opacity 0.35s ease}usa-scroll-highlight .usa-hl-word[data-on]{opacity:1}usa-scroll-highlight[mode="marker"]{--usa-hl-color:color-mix(in srgb,#facc15 55%,transparent);background:linear-gradient(var(--usa-hl-color),var(--usa-hl-color)) 0 88% / 0% 40% no-repeat;transition:background-size 1s cubic-bezier(0.65,0,0.35,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}usa-scroll-highlight[mode="marker"][data-lit]{background-size:100% 40%}@media (prefers-reduced-motion:reduce){usa-wave-text .usa-char,usa-glitch::before,usa-glitch::after,usa-gradient-text{animation:none !important}usa-glitch::before,usa-glitch::after{display:none}usa-scroll-highlight .usa-hl-word,usa-scroll-highlight[mode="marker"]{transition:none}}
|
|
9
|
+
usa-wave-text .usa-word,usa-scroll-highlight .usa-word{display:inline-block;white-space:nowrap}usa-wave-text .usa-char{display:inline-block;animation:usa-wave var(--usa-wave-s,1.6s) ease-in-out infinite;animation-delay:calc(var(--i) * var(--usa-wave-d,0.06s))}@keyframes usa-wave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(calc(var(--usa-wave-a,0.25em) * -1))}}usa-glitch{position:relative;display:inline-block}usa-glitch::before,usa-glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}usa-glitch::before{color:#ff2bd6;transform:translate(calc(var(--usa-glitch-i,3px) * -1),0);clip-path:inset(0 0 55% 0);mix-blend-mode:screen;animation:usa-glitch-a 2.4s steps(2,end) infinite}usa-glitch::after{color:#00f0ff;transform:translate(var(--usa-glitch-i,3px),0);clip-path:inset(50% 0 0 0);mix-blend-mode:screen;animation:usa-glitch-b 1.9s steps(2,end) infinite}usa-glitch[trigger="hover"]::before,usa-glitch[trigger="hover"]::after{animation-play-state:paused;opacity:0}usa-glitch[trigger="hover"]:hover::before,usa-glitch[trigger="hover"]:hover::after{animation-play-state:running;opacity:1}@keyframes usa-glitch-a{0%{clip-path:inset(0 0 80% 0)}20%{clip-path:inset(30% 0 40% 0)}40%{clip-path:inset(70% 0 5% 0)}60%{clip-path:inset(10% 0 60% 0)}80%{clip-path:inset(50% 0 30% 0)}100%{clip-path:inset(0 0 80% 0)}}@keyframes usa-glitch-b{0%{clip-path:inset(60% 0 10% 0)}25%{clip-path:inset(15% 0 70% 0)}50%{clip-path:inset(80% 0 2% 0)}75%{clip-path:inset(40% 0 35% 0)}100%{clip-path:inset(60% 0 10% 0)}}usa-gradient-text{background:var(--usa-grad) 0 50% / 300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:usa-grad-flow var(--usa-grad-s,6s) linear infinite}@keyframes usa-grad-flow{to{background-position:150% 50%}}usa-handwriting{--usa-hw-stroke:currentColor;display:inline-block;line-height:0}usa-handwriting svg{width:auto;max-width:100%;height:auto;overflow:visible}usa-handwriting text{fill:transparent;stroke:var(--usa-hw-stroke);stroke-width:1.2;stroke-dasharray:1600;stroke-dashoffset:1600;font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive}usa-handwriting[data-state="drawing"] text{animation:usa-hw-draw var(--usa-hw-d,2400ms) cubic-bezier(0.55,0,0.45,1) forwards,usa-hw-fill 0.6s ease calc(var(--usa-hw-d,2400ms) * 0.8) forwards}usa-handwriting[data-state="done"] text{stroke-dashoffset:0;fill:currentColor}@keyframes usa-hw-draw{to{stroke-dashoffset:0}}@keyframes usa-hw-fill{to{fill:currentColor}}usa-scroll-highlight .usa-hl-word{opacity:var(--usa-hl-dim,0.2);transition:opacity 0.35s ease}usa-scroll-highlight .usa-hl-word[data-on]{opacity:1}usa-scroll-highlight[mode="marker"]{--usa-hl-color:color-mix(in srgb,#facc15 55%,transparent);background:linear-gradient(var(--usa-hl-color),var(--usa-hl-color)) 0 88% / 0% 40% no-repeat;transition:background-size 1s cubic-bezier(0.65,0,0.35,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}usa-scroll-highlight[mode="marker"][data-lit]{background-size:100% 40%}@media (prefers-reduced-motion:reduce){usa-wave-text .usa-char,usa-glitch::before,usa-glitch::after,usa-gradient-text{animation:none !important}usa-glitch::before,usa-glitch::after{display:none}usa-scroll-highlight .usa-hl-word,usa-scroll-highlight[mode="marker"]{transition:none}}
|
|
10
10
|
usa-text-rotate{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-block:0.08em}usa-text-rotate .usa-rotate-word{grid-area:1 / 1;white-space:nowrap}usa-text-rotate .usa-rotate-word[data-hidden]{opacity:0}
|
|
11
11
|
usa-typewriter{white-space:pre-wrap}usa-typewriter .usa-tw-caret{display:inline-block;width:var(--usa-caret-width,0.08em);height:1.05em;margin-left:0.06em;vertical-align:-0.12em;background:var(--usa-caret-color,currentColor);animation:usa-caret 1.06s steps(1) infinite}usa-typewriter[data-typing] .usa-tw-caret{animation:none}usa-typewriter[data-no-cursor] .usa-tw-caret{display:none}@keyframes usa-caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){usa-typewriter .usa-tw-caret,usa-shimmer-text{animation:none}}
|
|
12
12
|
usa-magnetic{display:inline-block}usa-magnetic>*{transform:translate3d(var(--usa-mx,0px),var(--usa-my,0px),0);transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1)}usa-magnetic[data-active]>*{transition-duration:0.15s;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){usa-magnetic>*,usa-tilt,usa-toggle .usa-toggle-knob{transition:none}}
|
|
@@ -67,7 +67,7 @@ usa-splash{position:fixed;inset:0;z-index:2147483400;display:grid;place-items:ce
|
|
|
67
67
|
::view-transition-group(root){animation-duration:var(--usa-pt-duration,600ms)}html[data-usa-pt] ::view-transition-old(root),html[data-usa-pt] ::view-transition-new(root){animation-duration:var(--usa-pt-duration,600ms);animation-timing-function:cubic-bezier(0.22,1,0.36,1);mix-blend-mode:normal}html[data-usa-pt="slide"] ::view-transition-old(root),html[data-usa-pt="slide-left"] ::view-transition-old(root){animation-name:usa-pt-out-left}html[data-usa-pt="slide"] ::view-transition-new(root),html[data-usa-pt="slide-left"] ::view-transition-new(root){animation-name:usa-pt-in-right}html[data-usa-pt="slide-right"] ::view-transition-old(root){animation-name:usa-pt-out-right}html[data-usa-pt="slide-right"] ::view-transition-new(root){animation-name:usa-pt-in-left}html[data-usa-pt="slide-up"] ::view-transition-old(root){animation-name:usa-pt-out-up}html[data-usa-pt="slide-up"] ::view-transition-new(root){animation-name:usa-pt-in-up}html[data-usa-pt="zoom"] ::view-transition-old(root){animation-name:usa-pt-zoom-out}html[data-usa-pt="zoom"] ::view-transition-new(root){animation-name:usa-pt-zoom-in}html[data-usa-pt="circle"] ::view-transition-old(root){animation:none}html[data-usa-pt="circle"] ::view-transition-new(root){animation-name:usa-pt-circle}html[data-usa-pt="blinds"] ::view-transition-old(root){animation:none}html[data-usa-pt="blinds"] ::view-transition-new(root){animation-name:usa-pt-blinds;-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 var(--usa-blind),transparent var(--usa-blind) 10vh);mask-image:repeating-linear-gradient(to bottom,#000 0 var(--usa-blind),transparent var(--usa-blind) 10vh)}html[data-usa-pt="pixel"] ::view-transition-old(root){animation-name:usa-pt-pixel-out;animation-timing-function:steps(10,end)}html[data-usa-pt="pixel"] ::view-transition-new(root){animation-name:usa-pt-pixel-in;animation-timing-function:steps(10,end)}@property --usa-blind{syntax:"<length-percentage>";inherits:false;initial-value:0vh}@keyframes usa-pt-out-left{to{transform:translateX(-30%);opacity:0}}@keyframes usa-pt-in-right{from{transform:translateX(30%);opacity:0}}@keyframes usa-pt-out-right{to{transform:translateX(30%);opacity:0}}@keyframes usa-pt-in-left{from{transform:translateX(-30%);opacity:0}}@keyframes usa-pt-out-up{to{transform:translateY(-12%);opacity:0}}@keyframes usa-pt-in-up{from{transform:translateY(12%);opacity:0}}@keyframes usa-pt-zoom-out{to{transform:scale(0.92);opacity:0}}@keyframes usa-pt-zoom-in{from{transform:scale(1.08);opacity:0}}@keyframes usa-pt-circle{from{clip-path:circle(0 at var(--usa-pt-x,50%) var(--usa-pt-y,50%))}to{clip-path:circle(var(--usa-pt-r,150vmax) at var(--usa-pt-x,50%) var(--usa-pt-y,50%))}}@keyframes usa-pt-blinds{from{--usa-blind:0vh}to{--usa-blind:10vh}}@keyframes usa-pt-pixel-out{to{opacity:0;filter:blur(6px) contrast(1.4)}}@keyframes usa-pt-pixel-in{from{opacity:0;filter:blur(6px) contrast(1.4)}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}
|
|
68
68
|
usa-timeline{display:block}usa-timeline[scrub]{position:relative}@media (prefers-reduced-motion:reduce){usa-timeline [data-tl]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}}
|
|
69
69
|
usa-swipeable{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}usa-swipeable[axis="y"]{touch-action:pan-x}usa-swipeable>*{transform:translate3d(var(--usa-swipe,0px),0,0);opacity:calc(1 - var(--usa-swipe-p,0) * 0.5)}usa-swipeable[axis="y"]>*{transform:translate3d(0,var(--usa-swipe,0px),0)}usa-swipeable:focus-visible{outline:2px solid currentColor;outline-offset:2px}usa-pinch-zoom{display:block;overflow:hidden;touch-action:none;position:relative}usa-pinch-zoom>*{transform:translate3d(var(--usa-zoom-x,0px),var(--usa-zoom-y,0px),0) scale(var(--usa-zoom,1));transform-origin:50% 50%}usa-pinch-zoom[data-zoomed]{cursor:grab}usa-pinch-zoom:focus-visible{outline:2px solid currentColor;outline-offset:2px}
|
|
70
|
-
usa-draw{display:inline-block}usa-draw svg :is(path,line,polyline,polygon,circle,ellipse,rect){transition:fill-opacity 0.6s ease}usa-draw[fill]:not([data-drawn]) svg :is(path,polygon,circle,ellipse,rect){fill-opacity:0}usa-morph{display:inline-block;line-height:0}usa-morph svg{width:100%;height:100%;fill:currentColor}usa-morph[role="button"]{cursor:pointer}usa-mask-reveal{display:block}usa-mask-reveal[data-state="visible"]{clip-path:none !important}usa-anim-icon{display:inline-flex;line-height:0;vertical-align:middle}usa-anim-icon svg{overflow:visible}@media (prefers-reduced-motion:reduce){usa-mask-reveal{clip-path:none !important}usa-draw svg *{stroke-dashoffset:0 !important}}
|
|
70
|
+
usa-draw{display:inline-block}usa-draw svg :is(path,line,polyline,polygon,circle,ellipse,rect){transition:fill-opacity 0.6s ease}usa-draw[fill]:not([data-drawn]) svg :is(path,polygon,circle,ellipse,rect){fill-opacity:0}usa-morph{display:inline-block;line-height:0}usa-morph svg{width:100%;height:100%;fill:currentColor}usa-morph[role="button"]{cursor:pointer}usa-mask-reveal{display:block}usa-mask-reveal[data-state="visible"]{clip-path:none !important}usa-mask-reveal[data-state="hidden"]{opacity:0}usa-anim-icon{display:inline-flex;line-height:0;vertical-align:middle}usa-anim-icon svg{overflow:visible}@media (prefers-reduced-motion:reduce){usa-mask-reveal{clip-path:none !important;opacity:1 !important}usa-draw svg *{stroke-dashoffset:0 !important}}
|
|
71
71
|
usa-shader,usa-distort,usa-liquid{display:block;position:relative;isolation:isolate;overflow:hidden}usa-shader{background:linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)}usa-shader>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}usa-distort>canvas.usa-gl,usa-liquid>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-distort>img,usa-liquid>img{display:block;width:100%;height:auto}usa-distort[data-active]>img,usa-liquid[data-active]>img{visibility:hidden}usa-distort[data-fallback]>img{transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.6s}usa-distort[data-fallback]:hover>img{transform:scale(1.04);filter:saturate(1.2)}@media (prefers-reduced-motion:reduce){usa-distort[data-fallback]:hover>img{transform:none}}
|
|
72
72
|
usa-cube{--usa-cube-size:200px;display:block;width:var(--usa-cube-size);height:var(--usa-cube-size);perspective:var(--usa-cube-perspective,900px);touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}usa-cube>[data-face]{position:absolute;inset:0;backface-visibility:hidden;transform:translateZ(calc(var(--usa-cube-size) / -2)) rotateX(var(--usa-cube-rx,0deg)) rotateY(var(--usa-cube-ry,0deg)) var(--usa-face) translateZ(calc(var(--usa-cube-size) / 2));transform-origin:50% 50%}usa-cube>[data-face="front"]{--usa-face:rotateY(0deg)}usa-cube>[data-face="right"]{--usa-face:rotateY(90deg)}usa-cube>[data-face="back"]{--usa-face:rotateY(180deg)}usa-cube>[data-face="left"]{--usa-face:rotateY(-90deg)}usa-cube>[data-face="top"]{--usa-face:rotateX(90deg)}usa-cube>[data-face="bottom"]{--usa-face:rotateX(-90deg)}usa-cube:focus-visible{outline:2px solid currentColor;outline-offset:6px}usa-depth{display:block;position:relative;perspective:1000px}usa-depth>*{transform:var(--usa-depth-rot,none);transform-style:preserve-3d}usa-depth [data-depth]{will-change:transform;transition:transform 0.12s linear}@media (prefers-reduced-motion:reduce){usa-depth [data-depth]{transform:none !important}}
|
|
73
73
|
usa-auto-animate{display:block}usa-masonry{display:block;column-width:220px;column-gap:16px}usa-masonry>*{break-inside:avoid;margin-bottom:16px}usa-masonry[data-js]{position:relative;columns:auto}usa-masonry[data-js]>*{position:absolute;left:0;top:0;margin:0;box-sizing:border-box;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}@media (prefers-reduced-motion:reduce){usa-masonry[data-js]>*{transition:none}}
|
package/dist/components.d.cts
CHANGED
|
@@ -1777,11 +1777,29 @@ interface TimelineOptions {
|
|
|
1777
1777
|
onUpdate?: (progress: number) => void;
|
|
1778
1778
|
}
|
|
1779
1779
|
interface ScrubOptions {
|
|
1780
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
|
|
1780
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1781
1781
|
offset?: number;
|
|
1782
|
-
/** Smoothing 0–1 (0 = immediate, default 0). */
|
|
1782
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1783
1783
|
smooth?: number;
|
|
1784
|
-
|
|
1784
|
+
/**
|
|
1785
|
+
* 4.1: which progress source drives the timeline.
|
|
1786
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1787
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1788
|
+
*/
|
|
1789
|
+
source?: 'view' | 'scroll';
|
|
1790
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1791
|
+
engine?: 'auto' | 'native' | 'js';
|
|
1792
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1793
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1794
|
+
}
|
|
1795
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1796
|
+
interface ScrubHandle {
|
|
1797
|
+
(): void;
|
|
1798
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1799
|
+
readonly native: boolean;
|
|
1800
|
+
}
|
|
1801
|
+
/** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
|
|
1802
|
+
declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
|
|
1785
1803
|
interface Timeline {
|
|
1786
1804
|
/** Total length in ms. */
|
|
1787
1805
|
readonly duration: number;
|
|
@@ -1804,8 +1822,14 @@ interface Timeline {
|
|
|
1804
1822
|
seek(to: TimelinePosition): Timeline;
|
|
1805
1823
|
/** Get or set progress 0–1. */
|
|
1806
1824
|
progress(p?: number): number;
|
|
1807
|
-
/**
|
|
1808
|
-
|
|
1825
|
+
/**
|
|
1826
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1827
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1828
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1829
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1830
|
+
* Returns a stop function with a `native` flag.
|
|
1831
|
+
*/
|
|
1832
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1809
1833
|
/** Stop and drop every animation (elements keep their last frame). */
|
|
1810
1834
|
cancel(): void;
|
|
1811
1835
|
}
|
|
@@ -1837,7 +1861,9 @@ declare function timeline(options?: TimelineOptions): Timeline;
|
|
|
1837
1861
|
* Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
|
|
1838
1862
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1839
1863
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1840
|
-
* `repeat` (replay every time it enters the viewport).
|
|
1864
|
+
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1865
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
|
|
1866
|
+
* `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
|
|
1841
1867
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1842
1868
|
* Reduced motion: steps appear in their final state.
|
|
1843
1869
|
*/
|
|
@@ -2404,5 +2430,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2404
2430
|
*/
|
|
2405
2431
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2406
2432
|
|
|
2407
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2408
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
|
2433
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2434
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.d.ts
CHANGED
|
@@ -1777,11 +1777,29 @@ interface TimelineOptions {
|
|
|
1777
1777
|
onUpdate?: (progress: number) => void;
|
|
1778
1778
|
}
|
|
1779
1779
|
interface ScrubOptions {
|
|
1780
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts. */
|
|
1780
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1781
1781
|
offset?: number;
|
|
1782
|
-
/** Smoothing 0–1 (0 = immediate, default 0). */
|
|
1782
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1783
1783
|
smooth?: number;
|
|
1784
|
-
|
|
1784
|
+
/**
|
|
1785
|
+
* 4.1: which progress source drives the timeline.
|
|
1786
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1787
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1788
|
+
*/
|
|
1789
|
+
source?: 'view' | 'scroll';
|
|
1790
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1791
|
+
engine?: 'auto' | 'native' | 'js';
|
|
1792
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1793
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1794
|
+
}
|
|
1795
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1796
|
+
interface ScrubHandle {
|
|
1797
|
+
(): void;
|
|
1798
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1799
|
+
readonly native: boolean;
|
|
1800
|
+
}
|
|
1801
|
+
/** 4.1: whether `scrub()` can use native ScrollTimeline / ViewTimeline here. */
|
|
1802
|
+
declare function supportsNativeScrub(source?: 'view' | 'scroll'): boolean;
|
|
1785
1803
|
interface Timeline {
|
|
1786
1804
|
/** Total length in ms. */
|
|
1787
1805
|
readonly duration: number;
|
|
@@ -1804,8 +1822,14 @@ interface Timeline {
|
|
|
1804
1822
|
seek(to: TimelinePosition): Timeline;
|
|
1805
1823
|
/** Get or set progress 0–1. */
|
|
1806
1824
|
progress(p?: number): number;
|
|
1807
|
-
/**
|
|
1808
|
-
|
|
1825
|
+
/**
|
|
1826
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1827
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1828
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1829
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1830
|
+
* Returns a stop function with a `native` flag.
|
|
1831
|
+
*/
|
|
1832
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1809
1833
|
/** Stop and drop every animation (elements keep their last frame). */
|
|
1810
1834
|
cancel(): void;
|
|
1811
1835
|
}
|
|
@@ -1837,7 +1861,9 @@ declare function timeline(options?: TimelineOptions): Timeline;
|
|
|
1837
1861
|
* Attributes: `trigger` (`view` default · `click` · `manual`), `scrub`
|
|
1838
1862
|
* (progress follows scroll instead of playing), `overlap` (ms each step
|
|
1839
1863
|
* overlaps the previous, default 0), `duration` (600), `stagger` (ms),
|
|
1840
|
-
* `repeat` (replay every time it enters the viewport).
|
|
1864
|
+
* `repeat` (replay every time it enters the viewport). 4.1: `scrub` runs on native
|
|
1865
|
+
* ScrollTimeline / ViewTimeline when supported (`data-native` is set); `scrub="js"`,
|
|
1866
|
+
* `scrub="scroll"` and `smooth` tune it. Methods: `play()`,
|
|
1841
1867
|
* `reverse()`, `seek(t)`; property `timeline`. Event `usa:complete`.
|
|
1842
1868
|
* Reduced motion: steps appear in their final state.
|
|
1843
1869
|
*/
|
|
@@ -2404,5 +2430,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2404
2430
|
*/
|
|
2405
2431
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2406
2432
|
|
|
2407
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2408
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
|
2433
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2434
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.js
CHANGED
|
@@ -34,14 +34,14 @@ import { defineLayoutComponents } from './components/layout.js';
|
|
|
34
34
|
export { autoAnimate, defineAutoAnimate, defineMasonry, flipFrames, masonryLayout, sharedTransition } from './components/layout.js';
|
|
35
35
|
import { definePacksComponents } from './components/packs.js';
|
|
36
36
|
export { PACKS, PACK_PRIMITIVES, applyPack, countUp, definePack, flyToCart } from './components/packs.js';
|
|
37
|
-
import { a as adoptVariants } from './chunks/variants-
|
|
38
|
-
export { V as VARIANTS, s as setVariant } from './chunks/variants-
|
|
39
|
-
import { c as canDefine } from './chunks/base-
|
|
40
|
-
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-
|
|
37
|
+
import { a as adoptVariants } from './chunks/variants-BVYMcxRv.js';
|
|
38
|
+
export { V as VARIANTS, s as setVariant } from './chunks/variants-BVYMcxRv.js';
|
|
39
|
+
import { c as canDefine } from './chunks/base-BPG5zvex.js';
|
|
40
|
+
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-BPG5zvex.js';
|
|
41
41
|
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-43Xtd01A.js';
|
|
42
|
-
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-
|
|
43
|
-
export { T as TIMELINE_PRESETS, r as resolvePosition, t as timeline } from './chunks/core-
|
|
44
|
-
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-
|
|
42
|
+
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-BziPsW3r.js';
|
|
43
|
+
export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-QTFk4kgO.js';
|
|
44
|
+
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-eXX8rB_b.js';
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* use-scroll-animate/components
|