use-scroll-animate 4.1.0 → 4.2.0

package/dist/components/tokens.js

@@ -0,0 +1,211 @@
+/**
+ * use-scroll-animate/components/tokens — motion design tokens (4.2).
+ *
+ * One source of truth for durations, easings and springs: as CSS custom
+ * properties (`--usa-duration-fast`, `--usa-easing-emphasized`,
+ * `--usa-spring-bouncy-stiffness`…), as W3C Design Tokens JSON, and importable
+ * from Figma Tokens (Tokens Studio) or Style Dictionary exports.
+ *
+ * ```ts
+ * import { applyMotionTokens, importMotionTokens, motionToken } from 'use-scroll-animate/components/tokens';
+ * applyMotionTokens(importMotionTokens(await (await fetch('/tokens.json')).json()));
+ * el.animate(frames, { duration: motionToken('duration', 'slow'), easing: motionToken('easing', 'emphasized') });
+ * ```
+ */
+/** The default motion scale (Material / Fluent-inspired). */
+const MOTION_TOKENS = {
+    duration: { instant: 0, fast: 150, normal: 300, slow: 600, slower: 900, slowest: 1400 },
+    easing: {
+        linear: 'linear',
+        standard: 'cubic-bezier(0.2, 0, 0, 1)',
+        emphasized: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        decelerate: 'cubic-bezier(0, 0, 0, 1)',
+        accelerate: 'cubic-bezier(0.3, 0, 1, 1)',
+        spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+        bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+    },
+    spring: {
+        gentle: { stiffness: 120, damping: 14, mass: 1 },
+        snappy: { stiffness: 300, damping: 30, mass: 1 },
+        bouncy: { stiffness: 260, damping: 12, mass: 1 },
+        wobbly: { stiffness: 180, damping: 8, mass: 1 },
+        stiff: { stiffness: 500, damping: 40, mass: 1 },
+    },
+};
+let active = clone(MOTION_TOKENS);
+function clone(t) {
+    return { duration: { ...t.duration }, easing: { ...t.easing }, spring: Object.fromEntries(Object.entries(t.spring).map(([k, v]) => [k, { ...v }])) };
+}
+/** Merge partial tokens over a base (defaults: the built-in scale). */
+function mergeMotionTokens(partial, base = MOTION_TOKENS) {
+    const out = clone(base);
+    Object.assign(out.duration, partial.duration || {});
+    Object.assign(out.easing, partial.easing || {});
+    for (const [k, v] of Object.entries(partial.spring || {}))
+        out.spring[k] = { ...(out.spring[k] || { stiffness: 170, damping: 26, mass: 1 }), ...v };
+    return out;
+}
+const kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/[\s_.]+/g, '-').toLowerCase();
+/** The custom-property map: `{ '--usa-duration-fast': '150ms', … }`. */
+function motionTokensToVars(tokens = active, prefix = '--usa') {
+    const vars = {};
+    for (const [k, v] of Object.entries(tokens.duration))
+        vars[`${prefix}-duration-${kebab(k)}`] = `${v}ms`;
+    for (const [k, v] of Object.entries(tokens.easing))
+        vars[`${prefix}-easing-${kebab(k)}`] = v;
+    for (const [k, v] of Object.entries(tokens.spring)) {
+        vars[`${prefix}-spring-${kebab(k)}-stiffness`] = String(v.stiffness);
+        vars[`${prefix}-spring-${kebab(k)}-damping`] = String(v.damping);
+        vars[`${prefix}-spring-${kebab(k)}-mass`] = String(v.mass);
+    }
+    return vars;
+}
+/** A stylesheet string: `:root { --usa-duration-fast: 150ms; … }`. */
+function motionTokensToCss(tokens = active, selector = ':root', prefix = '--usa') {
+    const body = Object.entries(motionTokensToVars(tokens, prefix)).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+    return `${selector} {\n${body}\n}\n`;
+}
+/** W3C Design Tokens (DTCG) JSON: `{ motion: { duration: { fast: { $type: 'duration', $value: '150ms' } } } }`. */
+function motionTokensToJSON(tokens = active) {
+    const grp = (o, f) => Object.fromEntries(Object.entries(o).map(([k, v]) => [k, f(v)]));
+    return {
+        motion: {
+            duration: grp(tokens.duration, (v) => ({ $type: 'duration', $value: `${v}ms` })),
+            easing: grp(tokens.easing, (v) => {
+                const m = /^cubic-bezier\(([^)]+)\)$/.exec(v);
+                return m ? { $type: 'cubicBezier', $value: m[1].split(',').map(Number) } : { $type: 'string', $value: v };
+            }),
+            spring: grp(tokens.spring, (v) => ({ $type: 'spring', $value: { ...v } })),
+        },
+    };
+}
+/** Parse `150ms`, `0.15s`, `150` → ms. */
+function parseDuration(v) {
+    if (typeof v === 'number' && isFinite(v))
+        return v;
+    if (typeof v === 'object' && v && 'value' in v && 'unit' in v)
+        return parseDuration(`${v.value}${v.unit}`);
+    const m = /^\s*(-?\d*\.?\d+)\s*(ms|s)?\s*$/.exec(String(v ?? ''));
+    if (!m)
+        return undefined;
+    return m[2] === 's' ? Number(m[1]) * 1000 : Number(m[1]);
+}
+/** Parse `[x1,y1,x2,y2]`, `'cubic-bezier(…)'`, `'0.2, 0, 0, 1'` or a keyword → CSS easing. */
+function parseEasing(v) {
+    if (Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === 'number'))
+        return `cubic-bezier(${v.join(', ')})`;
+    if (typeof v !== 'string' || !v.trim())
+        return undefined;
+    const s = v.trim();
+    if (/^-?\d*\.?\d+(\s*,\s*-?\d*\.?\d+){3}$/.test(s))
+        return `cubic-bezier(${s.split(/\s*,\s*/).join(', ')})`;
+    return s;
+}
+const isLeaf = (o) => o && typeof o === 'object' && ('$value' in o || 'value' in o);
+const leafValue = (o) => ('$value' in o ? o.$value : o.value);
+const leafType = (o) => String(o.$type ?? o.type ?? '').toLowerCase();
+/**
+ * Import tokens from W3C DTCG JSON, Figma Tokens / Tokens Studio
+ * (`{ value, type }`) or Style Dictionary (`{ value }`, nested) — anything
+ * under a `duration` / `easing` / `spring` group (any depth, e.g.
+ * `motion.duration.fast` or `global.animation.easing.out`), or typed leaves
+ * (`duration`, `cubicBezier`, `transition`, `spring`). Unknown values are
+ * skipped; the result is merged over the defaults.
+ */
+function importMotionTokens(json, base = MOTION_TOKENS) {
+    const partial = { duration: {}, easing: {}, spring: {} };
+    const walk = (node, path) => {
+        if (!node || typeof node !== 'object')
+            return;
+        if (isLeaf(node)) {
+            const name = path[path.length - 1];
+            const type = leafType(node);
+            const group = path.slice(0, -1).map((p) => p.toLowerCase());
+            const val = leafValue(node);
+            const inGroup = (g) => group.some((p) => g.includes(p));
+            if (type === 'duration' || (!type && inGroup(['duration', 'durations'])) || (type !== 'cubicbezier' && inGroup(['duration', 'durations']))) {
+                const ms = parseDuration(val);
+                if (ms !== undefined)
+                    partial.duration[name] = ms;
+            }
+            else if (type === 'cubicbezier' || type === 'easing' || inGroup(['easing', 'easings', 'ease'])) {
+                const e = parseEasing(val);
+                if (e)
+                    partial.easing[name] = e;
+            }
+            else if (type === 'spring' || inGroup(['spring', 'springs'])) {
+                if (val && typeof val === 'object')
+                    partial.spring[name] = { stiffness: Number(val.stiffness ?? 170), damping: Number(val.damping ?? 26), mass: Number(val.mass ?? 1) };
+            }
+            else if (type === 'transition' && val && typeof val === 'object') {
+                const ms = parseDuration(val.duration);
+                if (ms !== undefined)
+                    partial.duration[name] = ms;
+                const e = parseEasing(val.timingFunction);
+                if (e)
+                    partial.easing[name] = e;
+            }
+            return;
+        }
+        for (const [k, v] of Object.entries(node))
+            if (!k.startsWith('$'))
+                walk(v, [...path, k]);
+    };
+    walk(json, []);
+    return mergeMotionTokens(partial, base);
+}
+/** The tokens currently applied (via `applyMotionTokens`), or the defaults. */
+function getMotionTokens() {
+    return clone(active);
+}
+/**
+ * Write tokens as CSS custom properties on `root` (default `<html>`) and make
+ * them the active set for `motionToken()`. Returns an undo function.
+ */
+function applyMotionTokens(tokens = MOTION_TOKENS, root, prefix = '--usa') {
+    const prev = active;
+    active = mergeMotionTokens(tokens, MOTION_TOKENS);
+    const el = root || (typeof document !== 'undefined' ? document.documentElement : null);
+    const vars = motionTokensToVars(active, prefix);
+    const old = {};
+    if (el)
+        for (const [k, v] of Object.entries(vars))
+            ((old[k] = el.style.getPropertyValue(k)), el.style.setProperty(k, v));
+    return () => {
+        active = prev;
+        if (el)
+            for (const [k, v] of Object.entries(old))
+                v ? el.style.setProperty(k, v) : el.style.removeProperty(k);
+    };
+}
+function motionToken(group, name) {
+    const g = active[group];
+    return g[name] ?? MOTION_TOKENS[group][name];
+}
+/** `var(--usa-duration-fast, 150ms)` — a CSS reference with the current value as fallback. */
+function motionVar(group, name, prop, prefix = '--usa') {
+    if (group === 'spring') {
+        const s = motionToken('spring', name);
+        const p = prop || 'stiffness';
+        return `var(${prefix}-spring-${kebab(name)}-${p}, ${s ? s[p] : ''})`;
+    }
+    const v = group === 'duration' ? `${motionToken('duration', name)}ms` : motionToken('easing', name);
+    return `var(${prefix}-${group}-${kebab(name)}, ${v})`;
+}
+/** Resolve a duration that may be a token name (`'fast'`) or ms. */
+function resolveDurationToken(v, fallback) {
+    if (typeof v === 'number')
+        return v;
+    if (typeof v === 'string')
+        return (active.duration[v] ?? parseDuration(v)) ?? fallback;
+    return fallback;
+}
+/** Resolve an easing that may be a token name (`'emphasized'`) or CSS. */
+function resolveEasingToken(v, fallback) {
+    if (!v)
+        return fallback;
+    return active.easing[v] ?? v;
+}
+
+export { MOTION_TOKENS, applyMotionTokens, getMotionTokens, importMotionTokens, mergeMotionTokens, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, parseDuration, parseEasing, resolveDurationToken, resolveEasingToken };
+//# sourceMappingURL=tokens.js.map

package/dist/components/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../src/components/tokens/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/tokens — motion design tokens (4.2).\n *\n * One source of truth for durations, easings and springs: as CSS custom\n * properties (`--usa-duration-fast`, `--usa-easing-emphasized`,\n * `--usa-spring-bouncy-stiffness`…), as W3C Design Tokens JSON, and importable\n * from Figma Tokens (Tokens Studio) or Style Dictionary exports.\n *\n * ```ts\n * import { applyMotionTokens, importMotionTokens, motionToken } from 'use-scroll-animate/components/tokens';\n * applyMotionTokens(importMotionTokens(await (await fetch('/tokens.json')).json()));\n * el.animate(frames, { duration: motionToken('duration', 'slow'), easing: motionToken('easing', 'emphasized') });\n * ```\n */\n\nexport interface SpringToken {\n  stiffness: number;\n  damping: number;\n  mass: number;\n}\n\nexport interface MotionTokens {\n  /** Durations in ms. */\n  duration: Record<string, number>;\n  /** CSS easing strings. */\n  easing: Record<string, string>;\n  /** Spring physics parameters. */\n  spring: Record<string, SpringToken>;\n}\n\n/** The default motion scale (Material / Fluent-inspired). */\nexport const MOTION_TOKENS: MotionTokens = {\n  duration: { instant: 0, fast: 150, normal: 300, slow: 600, slower: 900, slowest: 1400 },\n  easing: {\n    linear: 'linear',\n    standard: 'cubic-bezier(0.2, 0, 0, 1)',\n    emphasized: 'cubic-bezier(0.22, 1, 0.36, 1)',\n    decelerate: 'cubic-bezier(0, 0, 0, 1)',\n    accelerate: 'cubic-bezier(0.3, 0, 1, 1)',\n    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n  },\n  spring: {\n    gentle: { stiffness: 120, damping: 14, mass: 1 },\n    snappy: { stiffness: 300, damping: 30, mass: 1 },\n    bouncy: { stiffness: 260, damping: 12, mass: 1 },\n    wobbly: { stiffness: 180, damping: 8, mass: 1 },\n    stiff: { stiffness: 500, damping: 40, mass: 1 },\n  },\n};\n\nexport type MotionTokenGroup = keyof MotionTokens;\nexport type DeepPartialTokens = { [K in keyof MotionTokens]?: Partial<MotionTokens[K]> };\n\nlet active: MotionTokens = clone(MOTION_TOKENS);\n\nfunction clone(t: MotionTokens): MotionTokens {\n  return { duration: { ...t.duration }, easing: { ...t.easing }, spring: Object.fromEntries(Object.entries(t.spring).map(([k, v]) => [k, { ...v }])) };\n}\n\n/** Merge partial tokens over a base (defaults: the built-in scale). */\nexport function mergeMotionTokens(partial: DeepPartialTokens, base: MotionTokens = MOTION_TOKENS): MotionTokens {\n  const out = clone(base);\n  Object.assign(out.duration, partial.duration || {});\n  Object.assign(out.easing, partial.easing || {});\n  for (const [k, v] of Object.entries(partial.spring || {})) out.spring[k] = { ...(out.spring[k] || { stiffness: 170, damping: 26, mass: 1 }), ...v };\n  return out;\n}\n\nconst kebab = (s: string) => s.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/[\\s_.]+/g, '-').toLowerCase();\n\n/** The custom-property map: `{ '--usa-duration-fast': '150ms', … }`. */\nexport function motionTokensToVars(tokens: MotionTokens = active, prefix = '--usa'): Record<string, string> {\n  const vars: Record<string, string> = {};\n  for (const [k, v] of Object.entries(tokens.duration)) vars[`${prefix}-duration-${kebab(k)}`] = `${v}ms`;\n  for (const [k, v] of Object.entries(tokens.easing)) vars[`${prefix}-easing-${kebab(k)}`] = v;\n  for (const [k, v] of Object.entries(tokens.spring)) {\n    vars[`${prefix}-spring-${kebab(k)}-stiffness`] = String(v.stiffness);\n    vars[`${prefix}-spring-${kebab(k)}-damping`] = String(v.damping);\n    vars[`${prefix}-spring-${kebab(k)}-mass`] = String(v.mass);\n  }\n  return vars;\n}\n\n/** A stylesheet string: `:root { --usa-duration-fast: 150ms; … }`. */\nexport function motionTokensToCss(tokens: MotionTokens = active, selector = ':root', prefix = '--usa'): string {\n  const body = Object.entries(motionTokensToVars(tokens, prefix)).map(([k, v]) => `  ${k}: ${v};`).join('\\n');\n  return `${selector} {\\n${body}\\n}\\n`;\n}\n\n/** W3C Design Tokens (DTCG) JSON: `{ motion: { duration: { fast: { $type: 'duration', $value: '150ms' } } } }`. */\nexport function motionTokensToJSON(tokens: MotionTokens = active): Record<string, unknown> {\n  const grp = <T>(o: Record<string, T>, f: (v: T) => unknown) => Object.fromEntries(Object.entries(o).map(([k, v]) => [k, f(v)]));\n  return {\n    motion: {\n      duration: grp(tokens.duration, (v) => ({ $type: 'duration', $value: `${v}ms` })),\n      easing: grp(tokens.easing, (v) => {\n        const m = /^cubic-bezier\\(([^)]+)\\)$/.exec(v);\n        return m ? { $type: 'cubicBezier', $value: m[1].split(',').map(Number) } : { $type: 'string', $value: v };\n      }),\n      spring: grp(tokens.spring, (v) => ({ $type: 'spring', $value: { ...v } })),\n    },\n  };\n}\n\n/** Parse `150ms`, `0.15s`, `150` → ms. */\nexport function parseDuration(v: unknown): number | undefined {\n  if (typeof v === 'number' && isFinite(v)) return v;\n  if (typeof v === 'object' && v && 'value' in (v as any) && 'unit' in (v as any)) return parseDuration(`${(v as any).value}${(v as any).unit}`);\n  const m = /^\\s*(-?\\d*\\.?\\d+)\\s*(ms|s)?\\s*$/.exec(String(v ?? ''));\n  if (!m) return undefined;\n  return m[2] === 's' ? Number(m[1]) * 1000 : Number(m[1]);\n}\n\n/** Parse `[x1,y1,x2,y2]`, `'cubic-bezier(…)'`, `'0.2, 0, 0, 1'` or a keyword → CSS easing. */\nexport function parseEasing(v: unknown): string | undefined {\n  if (Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === 'number')) return `cubic-bezier(${v.join(', ')})`;\n  if (typeof v !== 'string' || !v.trim()) return undefined;\n  const s = v.trim();\n  if (/^-?\\d*\\.?\\d+(\\s*,\\s*-?\\d*\\.?\\d+){3}$/.test(s)) return `cubic-bezier(${s.split(/\\s*,\\s*/).join(', ')})`;\n  return s;\n}\n\nconst isLeaf = (o: any) => o && typeof o === 'object' && ('$value' in o || 'value' in o);\nconst leafValue = (o: any) => ('$value' in o ? o.$value : o.value);\nconst leafType = (o: any) => String(o.$type ?? o.type ?? '').toLowerCase();\n\n/**\n * Import tokens from W3C DTCG JSON, Figma Tokens / Tokens Studio\n * (`{ value, type }`) or Style Dictionary (`{ value }`, nested) — anything\n * under a `duration` / `easing` / `spring` group (any depth, e.g.\n * `motion.duration.fast` or `global.animation.easing.out`), or typed leaves\n * (`duration`, `cubicBezier`, `transition`, `spring`). Unknown values are\n * skipped; the result is merged over the defaults.\n */\nexport function importMotionTokens(json: unknown, base: MotionTokens = MOTION_TOKENS): MotionTokens {\n  const partial: Required<DeepPartialTokens> = { duration: {}, easing: {}, spring: {} };\n  const walk = (node: any, path: string[]) => {\n    if (!node || typeof node !== 'object') return;\n    if (isLeaf(node)) {\n      const name = path[path.length - 1];\n      const type = leafType(node);\n      const group = path.slice(0, -1).map((p) => p.toLowerCase());\n      const val = leafValue(node);\n      const inGroup = (g: string[]) => group.some((p) => g.includes(p));\n      if (type === 'duration' || (!type && inGroup(['duration', 'durations'])) || (type !== 'cubicbezier' && inGroup(['duration', 'durations']))) {\n        const ms = parseDuration(val);\n        if (ms !== undefined) partial.duration[name] = ms;\n      } else if (type === 'cubicbezier' || type === 'easing' || inGroup(['easing', 'easings', 'ease'])) {\n        const e = parseEasing(val);\n        if (e) partial.easing[name] = e;\n      } else if (type === 'spring' || inGroup(['spring', 'springs'])) {\n        if (val && typeof val === 'object') partial.spring[name] = { stiffness: Number(val.stiffness ?? 170), damping: Number(val.damping ?? 26), mass: Number(val.mass ?? 1) };\n      } else if (type === 'transition' && val && typeof val === 'object') {\n        const ms = parseDuration(val.duration);\n        if (ms !== undefined) partial.duration[name] = ms;\n        const e = parseEasing(val.timingFunction);\n        if (e) partial.easing[name] = e;\n      }\n      return;\n    }\n    for (const [k, v] of Object.entries(node)) if (!k.startsWith('$')) walk(v, [...path, k]);\n  };\n  walk(json, []);\n  return mergeMotionTokens(partial, base);\n}\n\n/** The tokens currently applied (via `applyMotionTokens`), or the defaults. */\nexport function getMotionTokens(): MotionTokens {\n  return clone(active);\n}\n\n/**\n * Write tokens as CSS custom properties on `root` (default `<html>`) and make\n * them the active set for `motionToken()`. Returns an undo function.\n */\nexport function applyMotionTokens(tokens: DeepPartialTokens | MotionTokens = MOTION_TOKENS, root?: HTMLElement, prefix = '--usa'): () => void {\n  const prev = active;\n  active = mergeMotionTokens(tokens as DeepPartialTokens, MOTION_TOKENS);\n  const el = root || (typeof document !== 'undefined' ? document.documentElement : null);\n  const vars = motionTokensToVars(active, prefix);\n  const old: Record<string, string> = {};\n  if (el) for (const [k, v] of Object.entries(vars)) ((old[k] = el.style.getPropertyValue(k)), el.style.setProperty(k, v));\n  return () => {\n    active = prev;\n    if (el) for (const [k, v] of Object.entries(old)) v ? el.style.setProperty(k, v) : el.style.removeProperty(k);\n  };\n}\n\n/** Look up a token: `motionToken('duration', 'fast')` → `150`; `motionToken('easing', 'emphasized')` → CSS easing. */\nexport function motionToken(group: 'duration', name: string): number;\nexport function motionToken(group: 'easing', name: string): string;\nexport function motionToken(group: 'spring', name: string): SpringToken;\nexport function motionToken(group: MotionTokenGroup, name: string): number | string | SpringToken | undefined {\n  const g = active[group] as Record<string, any>;\n  return g[name] ?? (MOTION_TOKENS[group] as Record<string, any>)[name];\n}\n\n/** `var(--usa-duration-fast, 150ms)` — a CSS reference with the current value as fallback. */\nexport function motionVar(group: MotionTokenGroup, name: string, prop?: 'stiffness' | 'damping' | 'mass', prefix = '--usa'): string {\n  if (group === 'spring') {\n    const s = motionToken('spring', name);\n    const p = prop || 'stiffness';\n    return `var(${prefix}-spring-${kebab(name)}-${p}, ${s ? s[p] : ''})`;\n  }\n  const v = group === 'duration' ? `${motionToken('duration', name)}ms` : motionToken('easing', name);\n  return `var(${prefix}-${group}-${kebab(name)}, ${v})`;\n}\n\n/** Resolve a duration that may be a token name (`'fast'`) or ms. */\nexport function resolveDurationToken(v: number | string | undefined, fallback: number): number {\n  if (typeof v === 'number') return v;\n  if (typeof v === 'string') return (active.duration[v] ?? parseDuration(v)) ?? fallback;\n  return fallback;\n}\n\n/** Resolve an easing that may be a token name (`'emphasized'`) or CSS. */\nexport function resolveEasingToken(v: string | undefined, fallback: string): string {\n  if (!v) return fallback;\n  return active.easing[v] ?? v;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/vue.cjs

@@ -16,7 +16,8 @@ require('./click.cjs');
 require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
-require('../chunks/core-CLu8ZrC-.cjs');
+require('../chunks/core-BRIIoKeS.cjs');
+require('./tokens.cjs');
 require('./gesture.cjs');
 require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');

package/dist/components/vue.cjs.map

@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;;;;;"}
+{"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;;;;;;"}

package/dist/components/vue.d.cts

@@ -1285,9 +1285,9 @@ declare global {
  */
 type TimelinePosition = number | string;
 interface TimelineStepOptions {
-    /** Duration in ms (default: timeline default, 600). */
-    duration?: number;
-    /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */
+    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
+    duration?: number | string;
+    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
     easing?: string;
     /** Start position, see `TimelinePosition`. */
     at?: TimelinePosition;

package/dist/components/vue.d.ts

@@ -1285,9 +1285,9 @@ declare global {
  */
 type TimelinePosition = number | string;
 interface TimelineStepOptions {
-    /** Duration in ms (default: timeline default, 600). */
-    duration?: number;
-    /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */
+    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
+    duration?: number | string;
+    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
     easing?: string;
     /** Start position, see `TimelinePosition`. */
     at?: TimelinePosition;

package/dist/components/vue.js

@@ -14,7 +14,8 @@ import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
-import '../chunks/core-QTFk4kgO.js';
+import '../chunks/core-LkGRmgES.js';
+import './tokens.js';
 import './gesture.js';
 import '../chunks/core-eXX8rB_b.js';
 import './svg.js';

package/dist/components/vue.js.map

@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;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;;;;;"}
+{"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;;;;;"}

package/dist/components.cjs

@@ -20,9 +20,10 @@ var components_layout = require('./components/layout.cjs');
 var components_packs = require('./components/packs.cjs');
 var variants = require('./chunks/variants-BNIrn4ch.cjs');
 var base = require('./chunks/base-CXx7jZ-o.cjs');
+var components_tokens = require('./components/tokens.cjs');
 var indexTags = require('./chunks/index-tags-BQh_uGqH.cjs');
 var spring = require('./chunks/spring-2OTnYCzm.cjs');
-var core = require('./chunks/core-CLu8ZrC-.cjs');
+var core = require('./chunks/core-BRIIoKeS.cjs');
 var core$1 = require('./chunks/core-IaorbTdu.cjs');
 
 /**
@@ -243,6 +244,20 @@ exports.MOTION_SCALE = base.MOTION_SCALE;
 exports.configureComponents = base.configureComponents;
 exports.getMotionIntensity = base.getMotionIntensity;
 exports.prefersReducedMotion = base.prefersReducedMotion;
+exports.MOTION_TOKENS = components_tokens.MOTION_TOKENS;
+exports.applyMotionTokens = components_tokens.applyMotionTokens;
+exports.getMotionTokens = components_tokens.getMotionTokens;
+exports.importMotionTokens = components_tokens.importMotionTokens;
+exports.mergeMotionTokens = components_tokens.mergeMotionTokens;
+exports.motionToken = components_tokens.motionToken;
+exports.motionTokensToCss = components_tokens.motionTokensToCss;
+exports.motionTokensToJSON = components_tokens.motionTokensToJSON;
+exports.motionTokensToVars = components_tokens.motionTokensToVars;
+exports.motionVar = components_tokens.motionVar;
+exports.parseDuration = components_tokens.parseDuration;
+exports.parseEasing = components_tokens.parseEasing;
+exports.resolveDurationToken = components_tokens.resolveDurationToken;
+exports.resolveEasingToken = components_tokens.resolveEasingToken;
 exports.COMPONENT_CATEGORIES = indexTags.COMPONENT_CATEGORIES;
 exports.SPRING_PRESETS = spring.SPRING_PRESETS;
 exports.createSpring = spring.createSpring;

package/dist/components.cjs.map

@@ -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';\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;AA6CH,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA8CH,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.d.cts

@@ -1757,9 +1757,9 @@ declare global {
  */
 type TimelinePosition = number | string;
 interface TimelineStepOptions {
-    /** Duration in ms (default: timeline default, 600). */
-    duration?: number;
-    /** CSS easing (default `cubic-bezier(0.22, 1, 0.36, 1)`). */
+    /** Duration in ms or a motion token name (`'fast'`, `'slow'`…; 4.2). Default: timeline default, 600. */
+    duration?: number | string;
+    /** CSS easing or a motion token name (`'emphasized'`, `'spring'`…; 4.2). Default `cubic-bezier(0.22, 1, 0.36, 1)`. */
     easing?: string;
     /** Start position, see `TimelinePosition`. */
     at?: TimelinePosition;
@@ -2401,6 +2401,78 @@ declare global {
     }
 }
 
+/**
+ * use-scroll-animate/components/tokens — motion design tokens (4.2).
+ *
+ * One source of truth for durations, easings and springs: as CSS custom
+ * properties (`--usa-duration-fast`, `--usa-easing-emphasized`,
+ * `--usa-spring-bouncy-stiffness`…), as W3C Design Tokens JSON, and importable
+ * from Figma Tokens (Tokens Studio) or Style Dictionary exports.
+ *
+ * ```ts
+ * import { applyMotionTokens, importMotionTokens, motionToken } from 'use-scroll-animate/components/tokens';
+ * applyMotionTokens(importMotionTokens(await (await fetch('/tokens.json')).json()));
+ * el.animate(frames, { duration: motionToken('duration', 'slow'), easing: motionToken('easing', 'emphasized') });
+ * ```
+ */
+interface SpringToken {
+    stiffness: number;
+    damping: number;
+    mass: number;
+}
+interface MotionTokens {
+    /** Durations in ms. */
+    duration: Record<string, number>;
+    /** CSS easing strings. */
+    easing: Record<string, string>;
+    /** Spring physics parameters. */
+    spring: Record<string, SpringToken>;
+}
+/** The default motion scale (Material / Fluent-inspired). */
+declare const MOTION_TOKENS: MotionTokens;
+type MotionTokenGroup = keyof MotionTokens;
+type DeepPartialTokens = {
+    [K in keyof MotionTokens]?: Partial<MotionTokens[K]>;
+};
+/** Merge partial tokens over a base (defaults: the built-in scale). */
+declare function mergeMotionTokens(partial: DeepPartialTokens, base?: MotionTokens): MotionTokens;
+/** The custom-property map: `{ '--usa-duration-fast': '150ms', … }`. */
+declare function motionTokensToVars(tokens?: MotionTokens, prefix?: string): Record<string, string>;
+/** A stylesheet string: `:root { --usa-duration-fast: 150ms; … }`. */
+declare function motionTokensToCss(tokens?: MotionTokens, selector?: string, prefix?: string): string;
+/** W3C Design Tokens (DTCG) JSON: `{ motion: { duration: { fast: { $type: 'duration', $value: '150ms' } } } }`. */
+declare function motionTokensToJSON(tokens?: MotionTokens): Record<string, unknown>;
+/** Parse `150ms`, `0.15s`, `150` → ms. */
+declare function parseDuration(v: unknown): number | undefined;
+/** Parse `[x1,y1,x2,y2]`, `'cubic-bezier(…)'`, `'0.2, 0, 0, 1'` or a keyword → CSS easing. */
+declare function parseEasing(v: unknown): string | undefined;
+/**
+ * Import tokens from W3C DTCG JSON, Figma Tokens / Tokens Studio
+ * (`{ value, type }`) or Style Dictionary (`{ value }`, nested) — anything
+ * under a `duration` / `easing` / `spring` group (any depth, e.g.
+ * `motion.duration.fast` or `global.animation.easing.out`), or typed leaves
+ * (`duration`, `cubicBezier`, `transition`, `spring`). Unknown values are
+ * skipped; the result is merged over the defaults.
+ */
+declare function importMotionTokens(json: unknown, base?: MotionTokens): MotionTokens;
+/** The tokens currently applied (via `applyMotionTokens`), or the defaults. */
+declare function getMotionTokens(): MotionTokens;
+/**
+ * Write tokens as CSS custom properties on `root` (default `<html>`) and make
+ * them the active set for `motionToken()`. Returns an undo function.
+ */
+declare function applyMotionTokens(tokens?: DeepPartialTokens | MotionTokens, root?: HTMLElement, prefix?: string): () => void;
+/** Look up a token: `motionToken('duration', 'fast')` → `150`; `motionToken('easing', 'emphasized')` → CSS easing. */
+declare function motionToken(group: 'duration', name: string): number;
+declare function motionToken(group: 'easing', name: string): string;
+declare function motionToken(group: 'spring', name: string): SpringToken;
+/** `var(--usa-duration-fast, 150ms)` — a CSS reference with the current value as fallback. */
+declare function motionVar(group: MotionTokenGroup, name: string, prop?: 'stiffness' | 'damping' | 'mass', prefix?: string): string;
+/** Resolve a duration that may be a token name (`'fast'`) or ms. */
+declare function resolveDurationToken(v: number | string | undefined, fallback: number): number;
+/** Resolve an easing that may be a token name (`'emphasized'`) or CSS. */
+declare function resolveEasingToken(v: string | undefined, fallback: string): string;
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -2430,5 +2502,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
  */
 declare function defineComponents(categories?: ComponentCategory[]): void;
 
-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 };
-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 };
+export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyMotionTokens, 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, getMotionTokens, glQuad, haptic, importMotionTokens, interpolatePath, linearEasing, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, orientationToTilt, pageTransition, parseDuration, parseEasing, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, 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 };
+export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionTokenGroup, MotionTokens, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, 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 };