use-scroll-animate 4.2.0 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/chunks/{base-BPG5zvex.js → base-BtJDNCB6.js} +45 -5
- package/dist/chunks/base-BtJDNCB6.js.map +1 -0
- package/dist/chunks/{base-CXx7jZ-o.cjs → base-DE2yzxE7.cjs} +47 -4
- package/dist/chunks/base-DE2yzxE7.cjs.map +1 -0
- package/dist/chunks/{core-BRIIoKeS.cjs → core-BC9S2osy.cjs} +2 -2
- package/dist/chunks/{core-BRIIoKeS.cjs.map → core-BC9S2osy.cjs.map} +1 -1
- package/dist/chunks/{core-IaorbTdu.cjs → core-DPYjLqA0.cjs} +2 -2
- package/dist/chunks/{core-IaorbTdu.cjs.map → core-DPYjLqA0.cjs.map} +1 -1
- package/dist/chunks/{core-LkGRmgES.js → core-DS1nrx5L.js} +2 -2
- package/dist/chunks/{core-LkGRmgES.js.map → core-DS1nrx5L.js.map} +1 -1
- package/dist/chunks/{core-eXX8rB_b.js → core-DX6pdOoY.js} +2 -2
- package/dist/chunks/{core-eXX8rB_b.js.map → core-DX6pdOoY.js.map} +1 -1
- package/dist/chunks/{spring-BziPsW3r.js → spring-CxRz49Wk.js} +2 -2
- package/dist/chunks/{spring-BziPsW3r.js.map → spring-CxRz49Wk.js.map} +1 -1
- package/dist/chunks/{spring-2OTnYCzm.cjs → spring-hsmgd7ml.cjs} +2 -2
- package/dist/chunks/{spring-2OTnYCzm.cjs.map → spring-hsmgd7ml.cjs.map} +1 -1
- package/dist/chunks/{variants-BNIrn4ch.cjs → variants-CM2zaG8v.cjs} +2 -2
- package/dist/chunks/{variants-BNIrn4ch.cjs.map → variants-CM2zaG8v.cjs.map} +1 -1
- package/dist/chunks/{variants-BVYMcxRv.js → variants-dD6SbUMR.js} +2 -2
- package/dist/chunks/{variants-BVYMcxRv.js.map → variants-dD6SbUMR.js.map} +1 -1
- package/dist/components/a11y.cjs +239 -0
- package/dist/components/a11y.cjs.map +1 -0
- package/dist/components/a11y.d.cts +120 -0
- package/dist/components/a11y.d.ts +120 -0
- package/dist/components/a11y.js +224 -0
- package/dist/components/a11y.js.map +1 -0
- package/dist/components/angular.cjs +7 -6
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +80 -76
- package/dist/components/angular.d.ts +80 -76
- package/dist/components/angular.js +7 -6
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.cjs +2 -2
- package/dist/components/background.d.cts +10 -0
- package/dist/components/background.d.ts +10 -0
- package/dist/components/background.js +3 -3
- package/dist/components/cards.cjs +2 -2
- package/dist/components/cards.d.cts +10 -0
- package/dist/components/cards.d.ts +10 -0
- package/dist/components/cards.js +3 -3
- package/dist/components/click.cjs +2 -2
- package/dist/components/click.d.cts +10 -0
- package/dist/components/click.d.ts +10 -0
- package/dist/components/click.js +3 -3
- package/dist/components/depth.cjs +3 -3
- package/dist/components/depth.d.cts +10 -0
- package/dist/components/depth.d.ts +10 -0
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.d.cts +10 -0
- package/dist/components/feedback.d.ts +10 -0
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.cjs +3 -3
- package/dist/components/gesture.d.cts +10 -0
- package/dist/components/gesture.d.ts +10 -0
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.cjs +1 -1
- package/dist/components/interaction.d.cts +10 -0
- package/dist/components/interaction.d.ts +10 -0
- package/dist/components/interaction.js +2 -2
- package/dist/components/layout.cjs +1 -1
- package/dist/components/layout.d.cts +10 -0
- package/dist/components/layout.d.ts +10 -0
- package/dist/components/layout.js +2 -2
- package/dist/components/packs.cjs +1 -1
- package/dist/components/packs.d.cts +10 -0
- package/dist/components/packs.d.ts +10 -0
- package/dist/components/packs.js +2 -2
- package/dist/components/page.cjs +6 -3
- package/dist/components/page.cjs.map +1 -1
- package/dist/components/page.d.cts +10 -0
- package/dist/components/page.d.ts +10 -0
- package/dist/components/page.js +7 -4
- package/dist/components/page.js.map +1 -1
- package/dist/components/physics.cjs +2 -2
- package/dist/components/physics.d.cts +10 -0
- package/dist/components/physics.d.ts +10 -0
- package/dist/components/physics.js +4 -4
- package/dist/components/reveal.cjs +1 -1
- package/dist/components/reveal.d.cts +10 -0
- package/dist/components/reveal.d.ts +10 -0
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +7 -6
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +80 -76
- package/dist/components/solid.d.ts +80 -76
- package/dist/components/solid.js +7 -6
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +7 -6
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +80 -76
- package/dist/components/svelte.d.ts +80 -76
- package/dist/components/svelte.js +7 -6
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.cjs +1 -1
- package/dist/components/svg.d.cts +10 -0
- package/dist/components/svg.d.ts +10 -0
- package/dist/components/svg.js +2 -2
- package/dist/components/text.cjs +284 -11
- package/dist/components/text.cjs.map +1 -1
- package/dist/components/text.d.cts +166 -3
- package/dist/components/text.d.ts +166 -3
- package/dist/components/text.js +280 -13
- package/dist/components/text.js.map +1 -1
- package/dist/components/timeline.cjs +2 -2
- package/dist/components/timeline.d.cts +10 -0
- package/dist/components/timeline.d.ts +10 -0
- package/dist/components/timeline.js +4 -4
- package/dist/components/transitions.cjs +1 -1
- package/dist/components/transitions.d.cts +10 -0
- package/dist/components/transitions.d.ts +10 -0
- package/dist/components/transitions.js +2 -2
- package/dist/components/ui.cjs +3 -3
- package/dist/components/ui.d.cts +10 -0
- package/dist/components/ui.d.ts +10 -0
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +7 -6
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +80 -76
- package/dist/components/vue.d.ts +80 -76
- package/dist/components/vue.js +7 -6
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +1 -1
- package/dist/components/webgl.d.cts +10 -0
- package/dist/components/webgl.d.ts +10 -0
- package/dist/components/webgl.js +2 -2
- package/dist/components.cjs +27 -5
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.cts +289 -108
- package/dist/components.d.ts +289 -108
- package/dist/components.js +9 -8
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/accessibility.md +28 -0
- package/package.json +11 -1
- package/dist/chunks/base-BPG5zvex.js.map +0 -1
- package/dist/chunks/base-CXx7jZ-o.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":["defineComponents"],"mappings":"
|
|
1
|
+
{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}
|
|
@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
|
|
|
117
117
|
* them in a cascade (pure CSS animation per unit, transform / opacity /
|
|
118
118
|
* filter only). Words never break across lines.
|
|
119
119
|
*
|
|
120
|
-
*
|
|
120
|
+
* 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
|
|
121
|
+
* never split below the word, `by="lines"` reveals line by line, and `from`
|
|
122
|
+
* (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
|
|
123
|
+
*
|
|
124
|
+
* Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
|
|
121
125
|
* (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
|
|
122
126
|
* (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
|
|
123
127
|
* `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
|
|
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
|
|
|
230
234
|
readonly progress: number;
|
|
231
235
|
}
|
|
232
236
|
|
|
237
|
+
/**
|
|
238
|
+
* Where a step starts on a timeline:
|
|
239
|
+
* - a number: absolute time in ms
|
|
240
|
+
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
241
|
+
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
242
|
+
* - `'<+=100'`: 100ms after the previous step's start
|
|
243
|
+
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
244
|
+
*/
|
|
245
|
+
type TimelinePosition = number | string;
|
|
246
|
+
interface TimelineStepOptions {
|
|
247
|
+
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
248
|
+
duration?: number | string;
|
|
249
|
+
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
250
|
+
easing?: string;
|
|
251
|
+
/** Start position, see `TimelinePosition`. */
|
|
252
|
+
at?: TimelinePosition;
|
|
253
|
+
/** ms between targets when the selector matches several elements. */
|
|
254
|
+
stagger?: number;
|
|
255
|
+
}
|
|
256
|
+
interface ScrubOptions {
|
|
257
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
258
|
+
offset?: number;
|
|
259
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
260
|
+
smooth?: number;
|
|
261
|
+
/**
|
|
262
|
+
* 4.1: which progress source drives the timeline.
|
|
263
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
264
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
265
|
+
*/
|
|
266
|
+
source?: 'view' | 'scroll';
|
|
267
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
268
|
+
engine?: 'auto' | 'native' | 'js';
|
|
269
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
270
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
271
|
+
}
|
|
272
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
273
|
+
interface ScrubHandle {
|
|
274
|
+
(): void;
|
|
275
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
276
|
+
readonly native: boolean;
|
|
277
|
+
}
|
|
278
|
+
interface Timeline {
|
|
279
|
+
/** Total length in ms. */
|
|
280
|
+
readonly duration: number;
|
|
281
|
+
/** Label positions in ms. */
|
|
282
|
+
readonly labels: Readonly<Record<string, number>>;
|
|
283
|
+
/** Current playhead in ms. */
|
|
284
|
+
readonly time: number;
|
|
285
|
+
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
286
|
+
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
287
|
+
/** Name a position (default: the current end). */
|
|
288
|
+
label(name: string, at?: TimelinePosition): Timeline;
|
|
289
|
+
/** Run `fn` when the playhead passes `at`. */
|
|
290
|
+
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
291
|
+
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
292
|
+
play(from?: TimelinePosition): Promise<void>;
|
|
293
|
+
/** Play backwards to 0. */
|
|
294
|
+
reverse(): Promise<void>;
|
|
295
|
+
pause(): Timeline;
|
|
296
|
+
/** Jump to a time (ms) or label. */
|
|
297
|
+
seek(to: TimelinePosition): Timeline;
|
|
298
|
+
/** Get or set progress 0–1. */
|
|
299
|
+
progress(p?: number): number;
|
|
300
|
+
/**
|
|
301
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
302
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
303
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
304
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
305
|
+
* Returns a stop function with a `native` flag.
|
|
306
|
+
*/
|
|
307
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
308
|
+
/** Stop and drop every animation (elements keep their last frame). */
|
|
309
|
+
cancel(): void;
|
|
310
|
+
}
|
|
311
|
+
|
|
233
312
|
/**
|
|
234
313
|
* use-scroll-animate/components/text — text effects.
|
|
235
314
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
@@ -1275,81 +1354,6 @@ declare global {
|
|
|
1275
1354
|
}
|
|
1276
1355
|
}
|
|
1277
1356
|
|
|
1278
|
-
/**
|
|
1279
|
-
* Where a step starts on a timeline:
|
|
1280
|
-
* - a number: absolute time in ms
|
|
1281
|
-
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
1282
|
-
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
1283
|
-
* - `'<+=100'`: 100ms after the previous step's start
|
|
1284
|
-
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
1285
|
-
*/
|
|
1286
|
-
type TimelinePosition = number | string;
|
|
1287
|
-
interface TimelineStepOptions {
|
|
1288
|
-
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
1289
|
-
duration?: number | string;
|
|
1290
|
-
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
1291
|
-
easing?: string;
|
|
1292
|
-
/** Start position, see `TimelinePosition`. */
|
|
1293
|
-
at?: TimelinePosition;
|
|
1294
|
-
/** ms between targets when the selector matches several elements. */
|
|
1295
|
-
stagger?: number;
|
|
1296
|
-
}
|
|
1297
|
-
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
|
-
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
|
-
smooth?: number;
|
|
1302
|
-
/**
|
|
1303
|
-
* 4.1: which progress source drives the timeline.
|
|
1304
|
-
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
-
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
-
*/
|
|
1307
|
-
source?: 'view' | 'scroll';
|
|
1308
|
-
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
-
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
-
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
-
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
-
}
|
|
1313
|
-
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
-
interface ScrubHandle {
|
|
1315
|
-
(): void;
|
|
1316
|
-
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
-
readonly native: boolean;
|
|
1318
|
-
}
|
|
1319
|
-
interface Timeline {
|
|
1320
|
-
/** Total length in ms. */
|
|
1321
|
-
readonly duration: number;
|
|
1322
|
-
/** Label positions in ms. */
|
|
1323
|
-
readonly labels: Readonly<Record<string, number>>;
|
|
1324
|
-
/** Current playhead in ms. */
|
|
1325
|
-
readonly time: number;
|
|
1326
|
-
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
1327
|
-
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
1328
|
-
/** Name a position (default: the current end). */
|
|
1329
|
-
label(name: string, at?: TimelinePosition): Timeline;
|
|
1330
|
-
/** Run `fn` when the playhead passes `at`. */
|
|
1331
|
-
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
1332
|
-
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
1333
|
-
play(from?: TimelinePosition): Promise<void>;
|
|
1334
|
-
/** Play backwards to 0. */
|
|
1335
|
-
reverse(): Promise<void>;
|
|
1336
|
-
pause(): Timeline;
|
|
1337
|
-
/** Jump to a time (ms) or label. */
|
|
1338
|
-
seek(to: TimelinePosition): Timeline;
|
|
1339
|
-
/** Get or set progress 0–1. */
|
|
1340
|
-
progress(p?: number): number;
|
|
1341
|
-
/**
|
|
1342
|
-
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
-
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
-
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
-
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
-
* Returns a stop function with a `native` flag.
|
|
1347
|
-
*/
|
|
1348
|
-
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1349
|
-
/** Stop and drop every animation (elements keep their last frame). */
|
|
1350
|
-
cancel(): void;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
1357
|
/**
|
|
1354
1358
|
* `<usa-timeline>` — declarative choreography. Every descendant with
|
|
1355
1359
|
* `data-tl="<preset>"` becomes a step, in document order; `data-at`
|
package/dist/components/vue.d.ts
CHANGED
|
@@ -117,7 +117,11 @@ interface UsaTypewriterElement extends UsaElement {
|
|
|
117
117
|
* them in a cascade (pure CSS animation per unit, transform / opacity /
|
|
118
118
|
* filter only). Words never break across lines.
|
|
119
119
|
*
|
|
120
|
-
*
|
|
120
|
+
* 4.3: `Intl.Segmenter`-aware (emoji, CJK words), Arabic-script words are
|
|
121
|
+
* never split below the word, `by="lines"` reveals line by line, and `from`
|
|
122
|
+
* (`start` · `end` · `center` · `edges` · `random`) sets the cascade order.
|
|
123
|
+
*
|
|
124
|
+
* Attributes: `by` (`chars` | `words` | `lines`, default `chars`), `effect`
|
|
121
125
|
* (`rise` | `fade` | `blur` | `flip` | `pop`, default `rise`), `stagger`
|
|
122
126
|
* (ms between units, 28 for chars / 70 for words), `duration` (ms, 620),
|
|
123
127
|
* `delay` (ms, 0), `trigger` (`view` | `load` | `manual`, default `view`),
|
|
@@ -230,6 +234,81 @@ interface UsaScrollHighlightElement extends UsaElement {
|
|
|
230
234
|
readonly progress: number;
|
|
231
235
|
}
|
|
232
236
|
|
|
237
|
+
/**
|
|
238
|
+
* Where a step starts on a timeline:
|
|
239
|
+
* - a number: absolute time in ms
|
|
240
|
+
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
241
|
+
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
242
|
+
* - `'<+=100'`: 100ms after the previous step's start
|
|
243
|
+
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
244
|
+
*/
|
|
245
|
+
type TimelinePosition = number | string;
|
|
246
|
+
interface TimelineStepOptions {
|
|
247
|
+
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
248
|
+
duration?: number | string;
|
|
249
|
+
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
250
|
+
easing?: string;
|
|
251
|
+
/** Start position, see `TimelinePosition`. */
|
|
252
|
+
at?: TimelinePosition;
|
|
253
|
+
/** ms between targets when the selector matches several elements. */
|
|
254
|
+
stagger?: number;
|
|
255
|
+
}
|
|
256
|
+
interface ScrubOptions {
|
|
257
|
+
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
258
|
+
offset?: number;
|
|
259
|
+
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
260
|
+
smooth?: number;
|
|
261
|
+
/**
|
|
262
|
+
* 4.1: which progress source drives the timeline.
|
|
263
|
+
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
264
|
+
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
265
|
+
*/
|
|
266
|
+
source?: 'view' | 'scroll';
|
|
267
|
+
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
268
|
+
engine?: 'auto' | 'native' | 'js';
|
|
269
|
+
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
270
|
+
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
271
|
+
}
|
|
272
|
+
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
273
|
+
interface ScrubHandle {
|
|
274
|
+
(): void;
|
|
275
|
+
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
276
|
+
readonly native: boolean;
|
|
277
|
+
}
|
|
278
|
+
interface Timeline {
|
|
279
|
+
/** Total length in ms. */
|
|
280
|
+
readonly duration: number;
|
|
281
|
+
/** Label positions in ms. */
|
|
282
|
+
readonly labels: Readonly<Record<string, number>>;
|
|
283
|
+
/** Current playhead in ms. */
|
|
284
|
+
readonly time: number;
|
|
285
|
+
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
286
|
+
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
287
|
+
/** Name a position (default: the current end). */
|
|
288
|
+
label(name: string, at?: TimelinePosition): Timeline;
|
|
289
|
+
/** Run `fn` when the playhead passes `at`. */
|
|
290
|
+
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
291
|
+
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
292
|
+
play(from?: TimelinePosition): Promise<void>;
|
|
293
|
+
/** Play backwards to 0. */
|
|
294
|
+
reverse(): Promise<void>;
|
|
295
|
+
pause(): Timeline;
|
|
296
|
+
/** Jump to a time (ms) or label. */
|
|
297
|
+
seek(to: TimelinePosition): Timeline;
|
|
298
|
+
/** Get or set progress 0–1. */
|
|
299
|
+
progress(p?: number): number;
|
|
300
|
+
/**
|
|
301
|
+
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
302
|
+
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
303
|
+
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
304
|
+
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
305
|
+
* Returns a stop function with a `native` flag.
|
|
306
|
+
*/
|
|
307
|
+
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
308
|
+
/** Stop and drop every animation (elements keep their last frame). */
|
|
309
|
+
cancel(): void;
|
|
310
|
+
}
|
|
311
|
+
|
|
233
312
|
/**
|
|
234
313
|
* use-scroll-animate/components/text — text effects.
|
|
235
314
|
* `<usa-typewriter>`, `<usa-split-text>`, `<usa-scramble>`, `<usa-counter>`,
|
|
@@ -1275,81 +1354,6 @@ declare global {
|
|
|
1275
1354
|
}
|
|
1276
1355
|
}
|
|
1277
1356
|
|
|
1278
|
-
/**
|
|
1279
|
-
* Where a step starts on a timeline:
|
|
1280
|
-
* - a number: absolute time in ms
|
|
1281
|
-
* - `'>'` (default): when the previous step ends · `'<'`: when it starts
|
|
1282
|
-
* - `'+=200'` / `'-=200'`: after / overlapping the previous end
|
|
1283
|
-
* - `'<+=100'`: 100ms after the previous step's start
|
|
1284
|
-
* - `'intro'` / `'intro+=150'`: at (or relative to) a label
|
|
1285
|
-
*/
|
|
1286
|
-
type TimelinePosition = number | string;
|
|
1287
|
-
interface TimelineStepOptions {
|
|
1288
|
-
/** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
|
|
1289
|
-
duration?: number | string;
|
|
1290
|
-
/** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
|
|
1291
|
-
easing?: string;
|
|
1292
|
-
/** Start position, see `TimelinePosition`. */
|
|
1293
|
-
at?: TimelinePosition;
|
|
1294
|
-
/** ms between targets when the selector matches several elements. */
|
|
1295
|
-
stagger?: number;
|
|
1296
|
-
}
|
|
1297
|
-
interface ScrubOptions {
|
|
1298
|
-
/** Scroll offset (px) before the source's top reaches the viewport bottom where progress starts (JS engine only). */
|
|
1299
|
-
offset?: number;
|
|
1300
|
-
/** Smoothing 0–1 (0 = immediate, default 0). Smoothing needs the JS engine. */
|
|
1301
|
-
smooth?: number;
|
|
1302
|
-
/**
|
|
1303
|
-
* 4.1: which progress source drives the timeline.
|
|
1304
|
-
* - `'view'` (default): `source` moving through the viewport (CSS `ViewTimeline`, range `cover`).
|
|
1305
|
-
* - `'scroll'`: the scroll position of `source` itself (a scroll container; CSS `ScrollTimeline`).
|
|
1306
|
-
*/
|
|
1307
|
-
source?: 'view' | 'scroll';
|
|
1308
|
-
/** 4.1: `'auto'` (default) uses the browser's native scroll-driven animations when available, `'js'` forces the fallback. */
|
|
1309
|
-
engine?: 'auto' | 'native' | 'js';
|
|
1310
|
-
/** 4.1: scroll axis, `'block'` (default) · `'inline'` · `'x'` · `'y'`. */
|
|
1311
|
-
axis?: 'block' | 'inline' | 'x' | 'y';
|
|
1312
|
-
}
|
|
1313
|
-
/** The function `scrub()` returns: call it to stop. `native` tells which engine runs it. */
|
|
1314
|
-
interface ScrubHandle {
|
|
1315
|
-
(): void;
|
|
1316
|
-
/** `true` when the browser's ScrollTimeline / ViewTimeline drives it (compositor, no JS per frame). */
|
|
1317
|
-
readonly native: boolean;
|
|
1318
|
-
}
|
|
1319
|
-
interface Timeline {
|
|
1320
|
-
/** Total length in ms. */
|
|
1321
|
-
readonly duration: number;
|
|
1322
|
-
/** Label positions in ms. */
|
|
1323
|
-
readonly labels: Readonly<Record<string, number>>;
|
|
1324
|
-
/** Current playhead in ms. */
|
|
1325
|
-
readonly time: number;
|
|
1326
|
-
/** Add a step: animate `target` with keyframes or a preset name (`fade-up`, `scale`…). */
|
|
1327
|
-
to(target: string | Element | Element[] | NodeList, frames: Keyframe[] | string, options?: TimelineStepOptions): Timeline;
|
|
1328
|
-
/** Name a position (default: the current end). */
|
|
1329
|
-
label(name: string, at?: TimelinePosition): Timeline;
|
|
1330
|
-
/** Run `fn` when the playhead passes `at`. */
|
|
1331
|
-
call(fn: () => void, at?: TimelinePosition): Timeline;
|
|
1332
|
-
/** Play forwards from the playhead (from 0 when at the end). Resolves at the end. */
|
|
1333
|
-
play(from?: TimelinePosition): Promise<void>;
|
|
1334
|
-
/** Play backwards to 0. */
|
|
1335
|
-
reverse(): Promise<void>;
|
|
1336
|
-
pause(): Timeline;
|
|
1337
|
-
/** Jump to a time (ms) or label. */
|
|
1338
|
-
seek(to: TimelinePosition): Timeline;
|
|
1339
|
-
/** Get or set progress 0–1. */
|
|
1340
|
-
progress(p?: number): number;
|
|
1341
|
-
/**
|
|
1342
|
-
* Tie progress to scroll: `source` moving through the viewport (or, with
|
|
1343
|
-
* `{ source: 'scroll' }`, a scroll container's own position). Runs on native
|
|
1344
|
-
* ScrollTimeline / ViewTimeline when available (and no `smooth`, `offset`,
|
|
1345
|
-
* `call()` cues or `onUpdate` need JS), else on a rAF-throttled listener.
|
|
1346
|
-
* Returns a stop function with a `native` flag.
|
|
1347
|
-
*/
|
|
1348
|
-
scrub(source: Element, options?: ScrubOptions): ScrubHandle;
|
|
1349
|
-
/** Stop and drop every animation (elements keep their last frame). */
|
|
1350
|
-
cancel(): void;
|
|
1351
|
-
}
|
|
1352
|
-
|
|
1353
1357
|
/**
|
|
1354
1358
|
* `<usa-timeline>` — declarative choreography. Every descendant with
|
|
1355
1359
|
* `data-tl="<preset>"` becomes a step, in document order; `data-at`
|
package/dist/components/vue.js
CHANGED
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
import { defineComponents } from '../components.js';
|
|
2
2
|
import './reveal.js';
|
|
3
|
-
import '../chunks/base-
|
|
3
|
+
import '../chunks/base-BtJDNCB6.js';
|
|
4
4
|
import './text.js';
|
|
5
|
+
import '../chunks/core-DS1nrx5L.js';
|
|
6
|
+
import './tokens.js';
|
|
5
7
|
import './interaction.js';
|
|
6
8
|
import './feedback.js';
|
|
7
9
|
import './background.js';
|
|
8
|
-
import '../chunks/variants-
|
|
10
|
+
import '../chunks/variants-dD6SbUMR.js';
|
|
9
11
|
import './transitions.js';
|
|
10
12
|
import './physics.js';
|
|
11
|
-
import '../chunks/spring-
|
|
13
|
+
import '../chunks/spring-CxRz49Wk.js';
|
|
12
14
|
import './cards.js';
|
|
13
15
|
import './click.js';
|
|
14
16
|
import './ui.js';
|
|
15
17
|
import './page.js';
|
|
16
18
|
import './timeline.js';
|
|
17
|
-
import '../chunks/core-LkGRmgES.js';
|
|
18
|
-
import './tokens.js';
|
|
19
19
|
import './gesture.js';
|
|
20
|
-
import '../chunks/core-
|
|
20
|
+
import '../chunks/core-DX6pdOoY.js';
|
|
21
21
|
import './svg.js';
|
|
22
22
|
import './webgl.js';
|
|
23
23
|
import './depth.js';
|
|
24
24
|
import './layout.js';
|
|
25
25
|
import './packs.js';
|
|
26
|
+
import './a11y.js';
|
|
26
27
|
import '../chunks/index-tags-43Xtd01A.js';
|
|
27
28
|
|
|
28
29
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var base = require('../chunks/base-
|
|
3
|
+
var base = require('../chunks/base-DE2yzxE7.cjs');
|
|
4
4
|
|
|
5
5
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
6
6
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
|
@@ -27,7 +27,17 @@ interface ComponentsConfig {
|
|
|
27
27
|
* 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
|
|
28
28
|
*/
|
|
29
29
|
motionIntensity?: MotionIntensity;
|
|
30
|
+
/**
|
|
31
|
+
* Motion-sensitivity level (v4.4), finer than reduced motion:
|
|
32
|
+
* `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —
|
|
33
|
+
* translations and fades only, safe for vestibular disorders) ·
|
|
34
|
+
* `'minimal'` (fades only; components use their reduced-motion variants) ·
|
|
35
|
+
* `'static'` (no animation: every component shows its static alternative).
|
|
36
|
+
* See `setMotionSensitivity()` in `use-scroll-animate/components/a11y`.
|
|
37
|
+
*/
|
|
38
|
+
motionSensitivity?: MotionSensitivity;
|
|
30
39
|
}
|
|
40
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
31
41
|
type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
|
|
32
42
|
/** Change global component settings (call before `define*()` for `injectStyles`). */
|
|
33
43
|
declare function configureComponents(options: ComponentsConfig): void;
|
package/dist/components/webgl.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { k as defineElement, n as now, h as caf, f as clamp, r as raf } from '../chunks/base-BtJDNCB6.js';
|
|
2
|
+
export { d as configureComponents, p as prefersReducedMotion } from '../chunks/base-BtJDNCB6.js';
|
|
3
3
|
|
|
4
4
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
5
5
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|
package/dist/components.cjs
CHANGED
|
@@ -18,13 +18,14 @@ var components_webgl = require('./components/webgl.cjs');
|
|
|
18
18
|
var components_depth = require('./components/depth.cjs');
|
|
19
19
|
var components_layout = require('./components/layout.cjs');
|
|
20
20
|
var components_packs = require('./components/packs.cjs');
|
|
21
|
-
var variants = require('./chunks/variants-
|
|
22
|
-
var base = require('./chunks/base-
|
|
21
|
+
var variants = require('./chunks/variants-CM2zaG8v.cjs');
|
|
22
|
+
var base = require('./chunks/base-DE2yzxE7.cjs');
|
|
23
23
|
var components_tokens = require('./components/tokens.cjs');
|
|
24
|
+
var components_a11y = require('./components/a11y.cjs');
|
|
24
25
|
var indexTags = require('./chunks/index-tags-BQh_uGqH.cjs');
|
|
25
|
-
var spring = require('./chunks/spring-
|
|
26
|
-
var core = require('./chunks/core-
|
|
27
|
-
var core$1 = require('./chunks/core-
|
|
26
|
+
var spring = require('./chunks/spring-hsmgd7ml.cjs');
|
|
27
|
+
var core = require('./chunks/core-BC9S2osy.cjs');
|
|
28
|
+
var core$1 = require('./chunks/core-DPYjLqA0.cjs');
|
|
28
29
|
|
|
29
30
|
/**
|
|
30
31
|
* use-scroll-animate/components
|
|
@@ -84,6 +85,7 @@ exports.defineScrolly = components_reveal.defineScrolly;
|
|
|
84
85
|
exports.defineStagger = components_reveal.defineStagger;
|
|
85
86
|
exports.readScrollProgress = components_reveal.readScrollProgress;
|
|
86
87
|
exports.revealKeyframes = components_reveal.revealKeyframes;
|
|
88
|
+
exports.JOINING_SCRIPT = components_text.JOINING_SCRIPT;
|
|
87
89
|
exports.defineCounter = components_text.defineCounter;
|
|
88
90
|
exports.defineGlitch = components_text.defineGlitch;
|
|
89
91
|
exports.defineGradientText = components_text.defineGradientText;
|
|
@@ -97,7 +99,12 @@ exports.defineTextRotate = components_text.defineTextRotate;
|
|
|
97
99
|
exports.defineTypewriter = components_text.defineTypewriter;
|
|
98
100
|
exports.defineWaveText = components_text.defineWaveText;
|
|
99
101
|
exports.easeOutExpo = components_text.easeOutExpo;
|
|
102
|
+
exports.graphemes = components_text.graphemes;
|
|
100
103
|
exports.scrambleFrame = components_text.scrambleFrame;
|
|
104
|
+
exports.splitOrder = components_text.splitOrder;
|
|
105
|
+
exports.splitText = components_text.splitText;
|
|
106
|
+
exports.splitTimeline = components_text.splitTimeline;
|
|
107
|
+
exports.splitWords = components_text.splitWords;
|
|
101
108
|
exports.defineInteractionComponents = components_interaction.defineInteractionComponents;
|
|
102
109
|
exports.defineMagnetic = components_interaction.defineMagnetic;
|
|
103
110
|
exports.definePress = components_interaction.definePress;
|
|
@@ -241,8 +248,11 @@ exports.VARIANTS = variants.VARIANTS;
|
|
|
241
248
|
exports.adoptVariants = variants.adoptVariants;
|
|
242
249
|
exports.setVariant = variants.setVariant;
|
|
243
250
|
exports.MOTION_SCALE = base.MOTION_SCALE;
|
|
251
|
+
exports.MOTION_SENSITIVITY_LEVELS = base.MOTION_SENSITIVITY_LEVELS;
|
|
252
|
+
exports.adaptKeyframes = base.adaptKeyframes;
|
|
244
253
|
exports.configureComponents = base.configureComponents;
|
|
245
254
|
exports.getMotionIntensity = base.getMotionIntensity;
|
|
255
|
+
exports.getMotionSensitivity = base.getMotionSensitivity;
|
|
246
256
|
exports.prefersReducedMotion = base.prefersReducedMotion;
|
|
247
257
|
exports.MOTION_TOKENS = components_tokens.MOTION_TOKENS;
|
|
248
258
|
exports.applyMotionTokens = components_tokens.applyMotionTokens;
|
|
@@ -258,6 +268,18 @@ exports.parseDuration = components_tokens.parseDuration;
|
|
|
258
268
|
exports.parseEasing = components_tokens.parseEasing;
|
|
259
269
|
exports.resolveDurationToken = components_tokens.resolveDurationToken;
|
|
260
270
|
exports.resolveEasingToken = components_tokens.resolveEasingToken;
|
|
271
|
+
exports.ALL_TAGS = components_a11y.ALL_TAGS;
|
|
272
|
+
exports.LIVE_REGION_IDS = components_a11y.LIVE_REGION_IDS;
|
|
273
|
+
exports.MOTION_SENSITIVITY = components_a11y.MOTION_SENSITIVITY;
|
|
274
|
+
exports.SENSITIVITY_CSS = components_a11y.SENSITIVITY_CSS;
|
|
275
|
+
exports.STATIC_ALTERNATIVES = components_a11y.STATIC_ALTERNATIVES;
|
|
276
|
+
exports.announce = components_a11y.announce;
|
|
277
|
+
exports.auditMotionA11y = components_a11y.auditMotionA11y;
|
|
278
|
+
exports.liveRegion = components_a11y.liveRegion;
|
|
279
|
+
exports.motionAllowed = components_a11y.motionAllowed;
|
|
280
|
+
exports.restoreMotionSensitivity = components_a11y.restoreMotionSensitivity;
|
|
281
|
+
exports.setMotionSensitivity = components_a11y.setMotionSensitivity;
|
|
282
|
+
exports.staticAlternative = components_a11y.staticAlternative;
|
|
261
283
|
exports.COMPONENT_CATEGORIES = indexTags.COMPONENT_CATEGORIES;
|
|
262
284
|
exports.SPRING_PRESETS = spring.SPRING_PRESETS;
|
|
263
285
|
exports.createSpring = spring.createSpring;
|
package/dist/components.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.cjs","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 { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/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';\nexport * from './layout/index';\nexport * from './packs/index';\nexport * from './tokens/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 layout: defineLayoutComponents,\n packs: definePacksComponents,\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":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","defineWebglComponents","defineDepthComponents","defineLayoutComponents","definePacksComponents","canDefine","adoptVariants"],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.cjs","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 { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/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';\nexport * from './layout/index';\nexport * from './packs/index';\nexport * from './tokens/index';\nexport * from './a11y/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 layout: defineLayoutComponents,\n packs: definePacksComponents,\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":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","defineWebglComponents","defineDepthComponents","defineLayoutComponents","definePacksComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA+CH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,GAAG,EAAEC,kCAAmB;AACxB,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,MAAM,EAAEC,wCAAsB;AAC9B,IAAA,KAAK,EAAEC,sCAAqB;CAC7B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|