motionary 7.0.0 → 7.2.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 +28 -0
- package/dist/chunks/audio-DcPvT2Kh.js +333 -0
- package/dist/chunks/audio-DcPvT2Kh.js.map +1 -0
- package/dist/chunks/audio-EXUoijsG.cjs +342 -0
- package/dist/chunks/audio-EXUoijsG.cjs.map +1 -0
- package/dist/chunks/{base-DchG4q_S.js → base-2-yYc93C.js} +2 -2
- package/dist/chunks/{base-DchG4q_S.js.map → base-2-yYc93C.js.map} +1 -1
- package/dist/chunks/{core-DVyTlo9Q.js → core-D5rU0CV6.js} +2 -2
- package/dist/chunks/{core-DVyTlo9Q.js.map → core-D5rU0CV6.js.map} +1 -1
- package/dist/chunks/{core-D2vF8kZb.js → core-DuO-AVXL.js} +2 -2
- package/dist/chunks/{core-D2vF8kZb.js.map → core-DuO-AVXL.js.map} +1 -1
- package/dist/chunks/{fx-DUMVKSvg.js → fx-CMxWNwH8.js} +2 -2
- package/dist/chunks/{fx-DUMVKSvg.js.map → fx-CMxWNwH8.js.map} +1 -1
- package/dist/chunks/{gpu-Bkw605Ds.js → gpu-DLPghVWr.js} +2 -2
- package/dist/chunks/{gpu-Bkw605Ds.js.map → gpu-DLPghVWr.js.map} +1 -1
- package/dist/chunks/{player-C-TwEEy6.js → player-DxvCYo7Q.js} +4 -4
- package/dist/chunks/{player-C-TwEEy6.js.map → player-DxvCYo7Q.js.map} +1 -1
- package/dist/chunks/{registry-D23neB4M.js → registry-CyKExAmE.js} +2 -2
- package/dist/chunks/{registry-D23neB4M.js.map → registry-CyKExAmE.js.map} +1 -1
- package/dist/chunks/{spring-BhoT09Qb.js → spring-BK8DiezC.js} +2 -2
- package/dist/chunks/{spring-BhoT09Qb.js.map → spring-BK8DiezC.js.map} +1 -1
- package/dist/chunks/{variants-C_hv_s23.js → variants-BQ6bhzn4.js} +2 -2
- package/dist/chunks/{variants-C_hv_s23.js.map → variants-BQ6bhzn4.js.map} +1 -1
- package/dist/components/a11y.js +2 -2
- package/dist/components/angular.js +7 -7
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.js +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.cjs +11 -336
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +9 -333
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.js +2 -2
- package/dist/components/fx-chart.cjs +158 -0
- package/dist/components/fx-chart.cjs.map +1 -0
- package/dist/components/fx-chart.d.cts +73 -0
- package/dist/components/fx-chart.d.ts +73 -0
- package/dist/components/fx-chart.js +154 -0
- package/dist/components/fx-chart.js.map +1 -0
- package/dist/components/fx-focus.js +2 -2
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.js +2 -2
- package/dist/components/fx-morph.js +2 -2
- package/dist/components/fx-music.cjs +179 -0
- package/dist/components/fx-music.cjs.map +1 -0
- package/dist/components/fx-music.d.cts +102 -0
- package/dist/components/fx-music.d.ts +102 -0
- package/dist/components/fx-music.js +174 -0
- package/dist/components/fx-music.js.map +1 -0
- package/dist/components/fx-physics.js +2 -2
- package/dist/components/fx-text.js +2 -2
- package/dist/components/fx-transitions.js +3 -3
- package/dist/components/fx-weather.js +2 -2
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +14 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +88 -1
- package/dist/components/fx2.d.ts +88 -1
- package/dist/components/fx2.js +14 -5
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.js +1 -1
- package/dist/components/layout.js +1 -1
- package/dist/components/marketplace.js +2 -2
- package/dist/components/packs.js +1 -1
- package/dist/components/page.js +3 -3
- package/dist/components/perf.js +2 -2
- package/dist/components/physics.js +3 -3
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.js +7 -7
- package/dist/components/svelte.js +7 -7
- package/dist/components/svg.js +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.js +4 -4
- package/dist/components/vue.js +7 -7
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +953 -61
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +143 -2
- package/dist/components/widgets.d.ts +143 -2
- package/dist/components/widgets.js +947 -67
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.js +9 -9
- package/dist/index.js +2 -2
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +49 -0
- package/package.json +41 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as prefersReducedMotion, n as applyFrame, m as motionScale, E as EASE_SPRING, q as now, r as raf, l as caf } from './base-
|
|
1
|
+
import { p as prefersReducedMotion, n as applyFrame, m as motionScale, E as EASE_SPRING, q as now, r as raf, l as caf } from './base-2-yYc93C.js';
|
|
2
2
|
|
|
3
3
|
const SPRING_PRESETS = {
|
|
4
4
|
default: { stiffness: 170, damping: 26, mass: 1 },
|
|
@@ -216,4 +216,4 @@ function rubberBand(distance, dimension, constant = 0.55) {
|
|
|
216
216
|
}
|
|
217
217
|
|
|
218
218
|
export { SPRING_PRESETS as S, rubberBand as a, spring as b, createSpring as c, springEasing as d, springSamples as e, stepSpring as f, supportsLinearEasing as g, linearEasing as l, projectInertia as p, resolveSpring as r, snapTo as s };
|
|
219
|
-
//# sourceMappingURL=spring-
|
|
219
|
+
//# sourceMappingURL=spring-BK8DiezC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spring-BhoT09Qb.js","sources":["../../src/components/physics/spring.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, raf, caf, now, applyFrame, EASE_SPRING } from '../base';\n\n/**\n * Spring physics core (v2.3). A damped harmonic oscillator integrated in\n * 1 ms steps: `stiffness` (k, N/m), `damping` (c) and `mass` (m). Used by\n * the `<usa-spring>`, `<usa-draggable>` and `<usa-overscroll>` elements and\n * exported for your own animations:\n *\n * - `springEasing()` turns a spring into a CSS `linear()` easing + duration\n * for WAAPI / CSS (falls back to a cubic-bezier overshoot where `linear()`\n * is unsupported);\n * - `spring(el, keyframes, cfg)` animates with it;\n * - `createSpring()` is an interruptible, velocity-preserving value for\n * gestures (drag, inertia, snap).\n */\nexport interface SpringConfig {\n /** Spring stiffness (default 170). Higher = faster, snappier. */\n stiffness?: number;\n /** Damping / friction (default 26). Lower = more bounces. */\n damping?: number;\n /** Mass (default 1). Higher = slower, heavier. */\n mass?: number;\n /** Initial velocity in progress units per second (default 0). */\n velocity?: number;\n /** Rest threshold (default 0.001). */\n precision?: number;\n}\n\nexport type SpringPreset = 'default' | 'gentle' | 'wobbly' | 'stiff' | 'bouncy' | 'slow' | 'molasses';\n\nexport const SPRING_PRESETS: Record<SpringPreset, Required<Pick<SpringConfig, 'stiffness' | 'damping' | 'mass'>>> = {\n default: { stiffness: 170, damping: 26, mass: 1 },\n gentle: { stiffness: 120, damping: 14, mass: 1 },\n wobbly: { stiffness: 180, damping: 12, mass: 1 },\n stiff: { stiffness: 210, damping: 20, mass: 1 },\n bouncy: { stiffness: 300, damping: 10, mass: 1 },\n slow: { stiffness: 280, damping: 60, mass: 1 },\n molasses: { stiffness: 280, damping: 120, mass: 1 },\n};\n\nexport type SpringInput = SpringPreset | SpringConfig | string | undefined;\n\n/** Resolve a preset name or a partial config to a full config. */\nexport function resolveSpring(input?: SpringInput): Required<SpringConfig> {\n const base = typeof input === 'string' ? SPRING_PRESETS[input as SpringPreset] || SPRING_PRESETS.default : { ...SPRING_PRESETS.default, ...(input || {}) };\n const pos = (v: unknown, d: number) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : d);\n const o = (typeof input === 'object' && input) || {};\n return {\n stiffness: pos(base.stiffness, 170),\n damping: Math.max(0, Number.isFinite(base.damping) ? base.damping : 26),\n mass: pos(base.mass, 1),\n velocity: Number.isFinite(o.velocity) ? (o.velocity as number) : 0,\n precision: pos(o.precision, 0.001),\n };\n}\n\n/** One integration step (semi-implicit Euler) towards `to`. Returns [x, v]. */\nexport function stepSpring(cfg: Required<SpringConfig>, x: number, v: number, to: number, dt: number): [number, number] {\n const a = (-cfg.stiffness * (x - to) - cfg.damping * v) / cfg.mass;\n const nv = v + a * dt;\n return [x + nv * dt, nv];\n}\n\nconst cache = new Map<string, { values: number[]; duration: number }>();\n\n/**\n * Sample the spring from 0 to 1 at `fps` (default 60). `values` may exceed 1\n * (overshoot); `duration` is the time to rest, in ms (max 10 s).\n */\nexport function springSamples(input?: SpringInput, fps = 60): { values: number[]; duration: number } {\n const cfg = resolveSpring(input);\n const key = `${cfg.stiffness}|${cfg.damping}|${cfg.mass}|${cfg.velocity}|${cfg.precision}|${fps}`;\n const hit = cache.get(key);\n if (hit) return hit;\n const values = [0];\n let x = 0;\n let v = cfg.velocity;\n const frame = 1000 / fps;\n let t = 0;\n let next = frame;\n while (t < 10000) {\n [x, v] = stepSpring(cfg, x, v, 1, 0.001);\n t += 1;\n if (t >= next) {\n values.push(x);\n next += frame;\n if (Math.abs(1 - x) < cfg.precision && Math.abs(v) < cfg.precision * 10) break;\n }\n }\n values[values.length - 1] = 1;\n const out = { values, duration: Math.round(t) };\n if (cache.size > 64) cache.clear();\n cache.set(key, out);\n return out;\n}\n\n/** `true` when CSS `linear()` easing is supported. */\nexport function supportsLinearEasing(): boolean {\n return typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('animation-timing-function', 'linear(0, 1)');\n}\n\n/**\n * The spring as `{ easing, duration }` for `el.animate()` / CSS. `easing` is\n * a `linear(…)` function with at most `points` stops (default 48), or a\n * cubic-bezier overshoot where `linear()` is unsupported.\n */\nexport function springEasing(input?: SpringInput, points = 48): { easing: string; duration: number } {\n const { values, duration } = springSamples(input);\n if (!supportsLinearEasing()) return { easing: EASE_SPRING, duration: Math.min(duration, 1200) };\n return { easing: linearEasing(values, points), duration };\n}\n\n/** Build a CSS `linear()` easing from samples (down-sampled to `points`). */\nexport function linearEasing(values: number[], points = 48): string {\n const n = values.length;\n const step = Math.max(1, Math.ceil((n - 1) / Math.max(2, points - 1)));\n const out: string[] = [];\n for (let i = 0; i < n - 1; i += step) out.push(String(Math.round(values[i] * 1000) / 1000));\n out.push('1');\n return `linear(${out.join(', ')})`;\n}\n\n/**\n * Animate `el` between keyframes with spring timing (WAAPI). Under reduced\n * motion the final frame is applied immediately. Returns the Animation (or\n * `null` without WAAPI / under reduced motion).\n */\nexport function spring(el: Element, keyframes: Keyframe[], input?: SpringInput, options: KeyframeAnimationOptions = {}): Animation | null {\n const target = el as HTMLElement;\n if (prefersReducedMotion() || typeof target.animate !== 'function') {\n applyFrame(target, keyframes[keyframes.length - 1]);\n return null;\n }\n const { easing, duration } = springEasing(input);\n return target.animate(keyframes, { duration: duration * motionScale(), easing, fill: 'both', ...options });\n}\n\n/* ------------------------------------------------------------------ */\n/* Interactive springs */\n/* ------------------------------------------------------------------ */\n\nexport interface SpringValueOptions {\n /** Start value (default 0). */\n value?: number;\n /** Spring config or preset (default `'default'`). */\n spring?: SpringInput;\n /** Called with the value every frame (and on `jump()`). */\n onUpdate?: (value: number, velocity: number) => void;\n /** Called when the value comes to rest at its target. */\n onRest?: (value: number) => void;\n}\n\nexport interface SpringValue {\n readonly value: number;\n /** Units per second. */\n readonly velocity: number;\n readonly target: number;\n readonly animating: boolean;\n /** Animate to `target`, optionally with a new initial velocity (units/s). */\n set(target: number, velocity?: number): void;\n /** Jump to `value` with no animation. */\n jump(value: number): void;\n /** Stop where it is. */\n stop(): void;\n /** Change the spring config. */\n configure(spring: SpringInput): void;\n}\n\n/**\n * An interruptible spring-animated number: call `set()` as often as you like,\n * the motion keeps its velocity (like iOS / Framer springs). Reduced motion\n * jumps straight to the target.\n */\nexport function createSpring(opts: SpringValueOptions = {}): SpringValue {\n let cfg = resolveSpring(opts.spring);\n let x = opts.value ?? 0;\n let v = 0;\n let to = x;\n let id = 0;\n let last = 0;\n let running = false;\n const stop = () => {\n if (running) caf(id);\n running = false;\n };\n const loop = () => {\n const t = now();\n let dt = Math.min(64, Math.max(1, t - last));\n last = t;\n while (dt > 0) {\n const s = Math.min(dt, 4);\n [x, v] = stepSpring(cfg, x, v, to, s / 1000);\n dt -= s;\n }\n const scale = Math.max(1, Math.abs(to) * 0.0005);\n if (Math.abs(to - x) < cfg.precision * scale * 10 && Math.abs(v) < cfg.precision * scale * 100) {\n x = to;\n v = 0;\n running = false;\n opts.onUpdate?.(x, 0);\n opts.onRest?.(x);\n return;\n }\n opts.onUpdate?.(x, v);\n id = raf(loop);\n };\n const api: SpringValue = {\n get value() {\n return x;\n },\n get velocity() {\n return v;\n },\n get target() {\n return to;\n },\n get animating() {\n return running;\n },\n set(target, velocity) {\n to = target;\n if (velocity !== undefined && Number.isFinite(velocity)) v = velocity;\n if (prefersReducedMotion()) {\n api.jump(target);\n opts.onRest?.(target);\n return;\n }\n if (!running) {\n running = true;\n last = now();\n id = raf(loop);\n }\n },\n jump(value) {\n stop();\n x = to = value;\n v = 0;\n opts.onUpdate?.(x, 0);\n },\n stop() {\n stop();\n v = 0;\n to = x;\n },\n configure(input) {\n cfg = resolveSpring(input);\n },\n };\n return api;\n}\n\n/* ------------------------------------------------------------------ */\n/* Inertia + snapping */\n/* ------------------------------------------------------------------ */\n\n/**\n * Where a flick at `velocity` (units/s) comes to rest with exponential\n * decay: `value + velocity · timeConstant` (default 0.325 s, iOS-like).\n */\nexport function projectInertia(value: number, velocity: number, timeConstant = 0.325): number {\n return value + velocity * timeConstant;\n}\n\n/** Snap to a grid (`number`) or the nearest of a list of points. */\nexport function snapTo(value: number, to: number | number[] | null | undefined): number {\n if (Array.isArray(to)) {\n if (!to.length) return value;\n return to.reduce((best, p) => (Math.abs(p - value) < Math.abs(best - value) ? p : best), to[0]);\n }\n if (typeof to === 'number' && to > 0) return Math.round(value / to) * to;\n return value;\n}\n\n/** iOS-style rubber-band resistance: how far content moves when pulled `distance` past an edge. */\nexport function rubberBand(distance: number, dimension: number, constant = 0.55): number {\n if (dimension <= 0) return 0;\n const sign = distance < 0 ? -1 : 1;\n const d = Math.abs(distance);\n return sign * (1 - 1 / ((d * constant) / dimension + 1)) * dimension;\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"spring-BK8DiezC.js","sources":["../../src/components/physics/spring.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, raf, caf, now, applyFrame, EASE_SPRING } from '../base';\n\n/**\n * Spring physics core (v2.3). A damped harmonic oscillator integrated in\n * 1 ms steps: `stiffness` (k, N/m), `damping` (c) and `mass` (m). Used by\n * the `<usa-spring>`, `<usa-draggable>` and `<usa-overscroll>` elements and\n * exported for your own animations:\n *\n * - `springEasing()` turns a spring into a CSS `linear()` easing + duration\n * for WAAPI / CSS (falls back to a cubic-bezier overshoot where `linear()`\n * is unsupported);\n * - `spring(el, keyframes, cfg)` animates with it;\n * - `createSpring()` is an interruptible, velocity-preserving value for\n * gestures (drag, inertia, snap).\n */\nexport interface SpringConfig {\n /** Spring stiffness (default 170). Higher = faster, snappier. */\n stiffness?: number;\n /** Damping / friction (default 26). Lower = more bounces. */\n damping?: number;\n /** Mass (default 1). Higher = slower, heavier. */\n mass?: number;\n /** Initial velocity in progress units per second (default 0). */\n velocity?: number;\n /** Rest threshold (default 0.001). */\n precision?: number;\n}\n\nexport type SpringPreset = 'default' | 'gentle' | 'wobbly' | 'stiff' | 'bouncy' | 'slow' | 'molasses';\n\nexport const SPRING_PRESETS: Record<SpringPreset, Required<Pick<SpringConfig, 'stiffness' | 'damping' | 'mass'>>> = {\n default: { stiffness: 170, damping: 26, mass: 1 },\n gentle: { stiffness: 120, damping: 14, mass: 1 },\n wobbly: { stiffness: 180, damping: 12, mass: 1 },\n stiff: { stiffness: 210, damping: 20, mass: 1 },\n bouncy: { stiffness: 300, damping: 10, mass: 1 },\n slow: { stiffness: 280, damping: 60, mass: 1 },\n molasses: { stiffness: 280, damping: 120, mass: 1 },\n};\n\nexport type SpringInput = SpringPreset | SpringConfig | string | undefined;\n\n/** Resolve a preset name or a partial config to a full config. */\nexport function resolveSpring(input?: SpringInput): Required<SpringConfig> {\n const base = typeof input === 'string' ? SPRING_PRESETS[input as SpringPreset] || SPRING_PRESETS.default : { ...SPRING_PRESETS.default, ...(input || {}) };\n const pos = (v: unknown, d: number) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : d);\n const o = (typeof input === 'object' && input) || {};\n return {\n stiffness: pos(base.stiffness, 170),\n damping: Math.max(0, Number.isFinite(base.damping) ? base.damping : 26),\n mass: pos(base.mass, 1),\n velocity: Number.isFinite(o.velocity) ? (o.velocity as number) : 0,\n precision: pos(o.precision, 0.001),\n };\n}\n\n/** One integration step (semi-implicit Euler) towards `to`. Returns [x, v]. */\nexport function stepSpring(cfg: Required<SpringConfig>, x: number, v: number, to: number, dt: number): [number, number] {\n const a = (-cfg.stiffness * (x - to) - cfg.damping * v) / cfg.mass;\n const nv = v + a * dt;\n return [x + nv * dt, nv];\n}\n\nconst cache = new Map<string, { values: number[]; duration: number }>();\n\n/**\n * Sample the spring from 0 to 1 at `fps` (default 60). `values` may exceed 1\n * (overshoot); `duration` is the time to rest, in ms (max 10 s).\n */\nexport function springSamples(input?: SpringInput, fps = 60): { values: number[]; duration: number } {\n const cfg = resolveSpring(input);\n const key = `${cfg.stiffness}|${cfg.damping}|${cfg.mass}|${cfg.velocity}|${cfg.precision}|${fps}`;\n const hit = cache.get(key);\n if (hit) return hit;\n const values = [0];\n let x = 0;\n let v = cfg.velocity;\n const frame = 1000 / fps;\n let t = 0;\n let next = frame;\n while (t < 10000) {\n [x, v] = stepSpring(cfg, x, v, 1, 0.001);\n t += 1;\n if (t >= next) {\n values.push(x);\n next += frame;\n if (Math.abs(1 - x) < cfg.precision && Math.abs(v) < cfg.precision * 10) break;\n }\n }\n values[values.length - 1] = 1;\n const out = { values, duration: Math.round(t) };\n if (cache.size > 64) cache.clear();\n cache.set(key, out);\n return out;\n}\n\n/** `true` when CSS `linear()` easing is supported. */\nexport function supportsLinearEasing(): boolean {\n return typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('animation-timing-function', 'linear(0, 1)');\n}\n\n/**\n * The spring as `{ easing, duration }` for `el.animate()` / CSS. `easing` is\n * a `linear(…)` function with at most `points` stops (default 48), or a\n * cubic-bezier overshoot where `linear()` is unsupported.\n */\nexport function springEasing(input?: SpringInput, points = 48): { easing: string; duration: number } {\n const { values, duration } = springSamples(input);\n if (!supportsLinearEasing()) return { easing: EASE_SPRING, duration: Math.min(duration, 1200) };\n return { easing: linearEasing(values, points), duration };\n}\n\n/** Build a CSS `linear()` easing from samples (down-sampled to `points`). */\nexport function linearEasing(values: number[], points = 48): string {\n const n = values.length;\n const step = Math.max(1, Math.ceil((n - 1) / Math.max(2, points - 1)));\n const out: string[] = [];\n for (let i = 0; i < n - 1; i += step) out.push(String(Math.round(values[i] * 1000) / 1000));\n out.push('1');\n return `linear(${out.join(', ')})`;\n}\n\n/**\n * Animate `el` between keyframes with spring timing (WAAPI). Under reduced\n * motion the final frame is applied immediately. Returns the Animation (or\n * `null` without WAAPI / under reduced motion).\n */\nexport function spring(el: Element, keyframes: Keyframe[], input?: SpringInput, options: KeyframeAnimationOptions = {}): Animation | null {\n const target = el as HTMLElement;\n if (prefersReducedMotion() || typeof target.animate !== 'function') {\n applyFrame(target, keyframes[keyframes.length - 1]);\n return null;\n }\n const { easing, duration } = springEasing(input);\n return target.animate(keyframes, { duration: duration * motionScale(), easing, fill: 'both', ...options });\n}\n\n/* ------------------------------------------------------------------ */\n/* Interactive springs */\n/* ------------------------------------------------------------------ */\n\nexport interface SpringValueOptions {\n /** Start value (default 0). */\n value?: number;\n /** Spring config or preset (default `'default'`). */\n spring?: SpringInput;\n /** Called with the value every frame (and on `jump()`). */\n onUpdate?: (value: number, velocity: number) => void;\n /** Called when the value comes to rest at its target. */\n onRest?: (value: number) => void;\n}\n\nexport interface SpringValue {\n readonly value: number;\n /** Units per second. */\n readonly velocity: number;\n readonly target: number;\n readonly animating: boolean;\n /** Animate to `target`, optionally with a new initial velocity (units/s). */\n set(target: number, velocity?: number): void;\n /** Jump to `value` with no animation. */\n jump(value: number): void;\n /** Stop where it is. */\n stop(): void;\n /** Change the spring config. */\n configure(spring: SpringInput): void;\n}\n\n/**\n * An interruptible spring-animated number: call `set()` as often as you like,\n * the motion keeps its velocity (like iOS / Framer springs). Reduced motion\n * jumps straight to the target.\n */\nexport function createSpring(opts: SpringValueOptions = {}): SpringValue {\n let cfg = resolveSpring(opts.spring);\n let x = opts.value ?? 0;\n let v = 0;\n let to = x;\n let id = 0;\n let last = 0;\n let running = false;\n const stop = () => {\n if (running) caf(id);\n running = false;\n };\n const loop = () => {\n const t = now();\n let dt = Math.min(64, Math.max(1, t - last));\n last = t;\n while (dt > 0) {\n const s = Math.min(dt, 4);\n [x, v] = stepSpring(cfg, x, v, to, s / 1000);\n dt -= s;\n }\n const scale = Math.max(1, Math.abs(to) * 0.0005);\n if (Math.abs(to - x) < cfg.precision * scale * 10 && Math.abs(v) < cfg.precision * scale * 100) {\n x = to;\n v = 0;\n running = false;\n opts.onUpdate?.(x, 0);\n opts.onRest?.(x);\n return;\n }\n opts.onUpdate?.(x, v);\n id = raf(loop);\n };\n const api: SpringValue = {\n get value() {\n return x;\n },\n get velocity() {\n return v;\n },\n get target() {\n return to;\n },\n get animating() {\n return running;\n },\n set(target, velocity) {\n to = target;\n if (velocity !== undefined && Number.isFinite(velocity)) v = velocity;\n if (prefersReducedMotion()) {\n api.jump(target);\n opts.onRest?.(target);\n return;\n }\n if (!running) {\n running = true;\n last = now();\n id = raf(loop);\n }\n },\n jump(value) {\n stop();\n x = to = value;\n v = 0;\n opts.onUpdate?.(x, 0);\n },\n stop() {\n stop();\n v = 0;\n to = x;\n },\n configure(input) {\n cfg = resolveSpring(input);\n },\n };\n return api;\n}\n\n/* ------------------------------------------------------------------ */\n/* Inertia + snapping */\n/* ------------------------------------------------------------------ */\n\n/**\n * Where a flick at `velocity` (units/s) comes to rest with exponential\n * decay: `value + velocity · timeConstant` (default 0.325 s, iOS-like).\n */\nexport function projectInertia(value: number, velocity: number, timeConstant = 0.325): number {\n return value + velocity * timeConstant;\n}\n\n/** Snap to a grid (`number`) or the nearest of a list of points. */\nexport function snapTo(value: number, to: number | number[] | null | undefined): number {\n if (Array.isArray(to)) {\n if (!to.length) return value;\n return to.reduce((best, p) => (Math.abs(p - value) < Math.abs(best - value) ? p : best), to[0]);\n }\n if (typeof to === 'number' && to > 0) return Math.round(value / to) * to;\n return value;\n}\n\n/** iOS-style rubber-band resistance: how far content moves when pulled `distance` past an edge. */\nexport function rubberBand(distance: number, dimension: number, constant = 0.55): number {\n if (dimension <= 0) return 0;\n const sign = distance < 0 ? -1 : 1;\n const d = Math.abs(distance);\n return sign * (1 - 1 / ((d * constant) / dimension + 1)) * dimension;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { x as adoptStyles } from './base-2-yYc93C.js';
|
|
2
2
|
|
|
3
3
|
var css = ":root{--usa-accent:#7c5cff;--usa-accent-text:#fff;--usa-surface:#1b1e27;--usa-text:inherit;--usa-radius:14px;--usa-border:1px solid rgb(127 127 127 / 0.25);--usa-shadow:0 10px 30px -12px rgb(0 0 0 / 0.45);--usa-blur:0px;--usa-font:inherit}:where([variant=\"minimal\"],[data-usa-variant=\"minimal\"]){--usa-accent:currentColor;--usa-accent-text:Canvas;--usa-surface:transparent;--usa-radius:6px;--usa-border:1px solid color-mix(in srgb,currentColor 22%,transparent);--usa-shadow:none;--usa-blur:0px}:where([variant=\"neon\"],[data-usa-variant=\"neon\"]){--usa-accent:#00f0ff;--usa-accent-text:#04121a;--usa-surface:#0a0b14;--usa-text:#e6fbff;--usa-radius:10px;--usa-border:1px solid #00f0ff;--usa-shadow:0 0 6px #00f0ff,0 0 22px rgb(0 240 255 / 0.45);--usa-blur:0px}:where([variant=\"glass\"],[data-usa-variant=\"glass\"]){--usa-accent:#a78bfa;--usa-accent-text:#fff;--usa-surface:rgb(255 255 255 / 0.12);--usa-radius:18px;--usa-border:1px solid rgb(255 255 255 / 0.28);--usa-shadow:0 12px 40px -12px rgb(0 0 0 / 0.35);--usa-blur:16px}:where([variant=\"brutalist\"],[data-usa-variant=\"brutalist\"]){--usa-accent:#ff3d00;--usa-accent-text:#000;--usa-surface:#fff;--usa-text:#000;--usa-radius:0px;--usa-border:3px solid #000;--usa-shadow:5px 5px 0 #000;--usa-blur:0px;--usa-font:ui-monospace,\"SFMono-Regular\",Menlo,monospace}:where([variant=\"fluent\"],[data-usa-variant=\"fluent\"]){--usa-accent:#0067c0;--usa-accent-text:#fff;--usa-surface:rgb(249 249 249 / 0.82);--usa-text:#1a1a1a;--usa-radius:8px;--usa-border:1px solid rgb(0 0 0 / 0.08);--usa-shadow:0 2px 4px rgb(0 0 0 / 0.14),0 0 2px rgb(0 0 0 / 0.12);--usa-blur:30px;--usa-font:\"Segoe UI Variable\",\"Segoe UI\",system-ui,sans-serif}:where([variant=\"material\"],[data-usa-variant=\"material\"]){--usa-accent:#6750a4;--usa-accent-text:#fff;--usa-surface:#fffbfe;--usa-text:#1c1b1f;--usa-radius:20px;--usa-border:0 solid transparent;--usa-shadow:0 1px 3px rgb(0 0 0 / 0.3),0 4px 8px 3px rgb(0 0 0 / 0.15);--usa-blur:0px;--usa-font:Roboto,system-ui,sans-serif}@media (prefers-color-scheme:dark){:where([variant=\"fluent\"],[data-usa-variant=\"fluent\"]){--usa-accent:#4cc2ff;--usa-accent-text:#000;--usa-surface:rgb(44 44 44 / 0.8);--usa-text:#fff;--usa-border:1px solid rgb(255 255 255 / 0.08)}:where([variant=\"material\"],[data-usa-variant=\"material\"]){--usa-accent:#d0bcff;--usa-accent-text:#381e72;--usa-surface:#1c1b1f;--usa-text:#e6e1e5}}.usa-surface{background:var(--usa-surface);color:var(--usa-text);border:var(--usa-border);border-radius:var(--usa-radius);box-shadow:var(--usa-shadow);font-family:var(--usa-font);-webkit-backdrop-filter:blur(var(--usa-blur));backdrop-filter:blur(var(--usa-blur))}@media (prefers-reduced-transparency:reduce){.usa-surface{-webkit-backdrop-filter:none;backdrop-filter:none}}";
|
|
4
4
|
|
|
@@ -32,4 +32,4 @@ function setVariant(variant, root = typeof document !== 'undefined' ? document.d
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
export { VARIANTS as V, adoptVariants as a, setVariant as s };
|
|
35
|
-
//# sourceMappingURL=variants-
|
|
35
|
+
//# sourceMappingURL=variants-BQ6bhzn4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variants-
|
|
1
|
+
{"version":3,"file":"variants-BQ6bhzn4.js","sources":["../../src/components/ui/variants.ts"],"sourcesContent":["import { adoptStyles } from '../base';\nimport css from './variants.css?raw';\n\n/**\n * Style variants (v2.6): `variant=\"minimal | neon | glass | brutalist |\n * fluent | material\"` on any `<usa-*>` element — or on any ancestor as\n * `data-usa-variant`, or page-wide with `setVariant()` — sets the shared\n * design tokens every component reads:\n *\n * `--usa-accent`, `--usa-accent-text`, `--usa-surface`, `--usa-text`,\n * `--usa-radius`, `--usa-border`, `--usa-shadow`, `--usa-blur`, `--usa-font`.\n *\n * (`<usa-spinner>`, `<usa-check>` and `<usa-dialog>` already use `variant`\n * for their kind; the token names never clash with those values except\n * `fluent`, which means the same thing there.)\n */\nexport const VARIANTS = ['minimal', 'neon', 'glass', 'brutalist', 'fluent', 'material'] as const;\nexport type Variant = (typeof VARIANTS)[number];\n\n/** Inject the variant token sheet (done automatically by every `ui` component). */\nexport function adoptVariants(): void {\n adoptStyles('variants', css);\n}\n\n/** Apply a variant to the whole page (or `root`); `null` removes it. */\nexport function setVariant(variant: Variant | null, root: Element | null = typeof document !== 'undefined' ? document.documentElement : null): void {\n if (!root) return;\n adoptVariants();\n if (variant) root.setAttribute('data-usa-variant', variant);\n else root.removeAttribute('data-usa-variant');\n}\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;;;AAYG;AACI,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU;AAGtF;SACgB,aAAa,GAAA;AAC3B,IAAA,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC;AAC9B;AAEA;SACgB,UAAU,CAAC,OAAuB,EAAE,IAAA,GAAuB,OAAO,QAAQ,KAAK,WAAW,GAAG,QAAQ,CAAC,eAAe,GAAG,IAAI,EAAA;AAC1I,IAAA,IAAI,CAAC,IAAI;QAAE;AACX,IAAA,aAAa,EAAE;AACf,IAAA,IAAI,OAAO;AAAE,QAAA,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,OAAO,CAAC;;AACtD,QAAA,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC;AAC/C;;;;"}
|
package/dist/components/a11y.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { d as adaptKeyframes } from '../chunks/base-
|
|
1
|
+
import { y as deprecate, i as getMotionSensitivity, a as MOTION_SENSITIVITY_LEVELS, g as configureComponents, x as adoptStyles } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
export { d as adaptKeyframes } from '../chunks/base-2-yYc93C.js';
|
|
3
3
|
import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-C04JP8g4.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { defineComponents } from '../components.js';
|
|
2
2
|
export { b as bindUsa, u as usaEventName } from '../chunks/bind-B_CTL6Qn.js';
|
|
3
3
|
import './reveal.js';
|
|
4
|
-
import '../chunks/base-
|
|
4
|
+
import '../chunks/base-2-yYc93C.js';
|
|
5
5
|
import './text.js';
|
|
6
|
-
import '../chunks/core-
|
|
6
|
+
import '../chunks/core-D5rU0CV6.js';
|
|
7
7
|
import './tokens.js';
|
|
8
8
|
import './interaction.js';
|
|
9
9
|
import './feedback.js';
|
|
10
10
|
import './background.js';
|
|
11
|
-
import '../chunks/variants-
|
|
11
|
+
import '../chunks/variants-BQ6bhzn4.js';
|
|
12
12
|
import './transitions.js';
|
|
13
13
|
import './physics.js';
|
|
14
|
-
import '../chunks/spring-
|
|
14
|
+
import '../chunks/spring-BK8DiezC.js';
|
|
15
15
|
import './cards.js';
|
|
16
16
|
import './click.js';
|
|
17
|
-
import '../chunks/fx-
|
|
17
|
+
import '../chunks/fx-CMxWNwH8.js';
|
|
18
18
|
import './ui.js';
|
|
19
19
|
import './page.js';
|
|
20
20
|
import './timeline.js';
|
|
21
21
|
import './gesture.js';
|
|
22
|
-
import '../chunks/core-
|
|
22
|
+
import '../chunks/core-DuO-AVXL.js';
|
|
23
23
|
import './svg.js';
|
|
24
24
|
import './webgl.js';
|
|
25
25
|
import './depth.js';
|
|
26
26
|
import './layout.js';
|
|
27
27
|
import './packs.js';
|
|
28
28
|
import './fx.js';
|
|
29
|
-
import '../chunks/registry-
|
|
29
|
+
import '../chunks/registry-CyKExAmE.js';
|
|
30
30
|
import './a11y.js';
|
|
31
31
|
import '../chunks/index-tags-C04JP8g4.js';
|
|
32
32
|
import './perf.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { s as setVariant } from '../chunks/variants-
|
|
1
|
+
import { u as defineElement, l as caf, r as raf, x as adoptStyles, p as prefersReducedMotion } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
import { s as setVariant } from '../chunks/variants-BQ6bhzn4.js';
|
|
3
3
|
|
|
4
4
|
var css$6 = "usa-aurora{position:relative;display:block;isolation:isolate;overflow:hidden}usa-aurora .usa-aurora-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--usa-aurora-opacity,0.7);overflow:hidden;contain:strict}usa-aurora .usa-aurora-layer i{position:absolute;display:block;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);will-change:transform;animation:usa-aurora-a var(--usa-aurora-speed,18s) ease-in-out infinite alternate}usa-aurora .usa-aurora-layer i:nth-child(1){left:-15%;top:-30%}usa-aurora .usa-aurora-layer i:nth-child(2){right:-20%;top:-10%;animation-name:usa-aurora-b;animation-duration:calc(var(--usa-aurora-speed,18s) * 1.3)}usa-aurora .usa-aurora-layer i:nth-child(3){left:10%;bottom:-45%;animation-name:usa-aurora-c;animation-duration:calc(var(--usa-aurora-speed,18s) * 0.9)}usa-aurora .usa-aurora-layer i:nth-child(4){right:0;bottom:-30%;width:50%;animation-name:usa-aurora-b;animation-direction:alternate-reverse}usa-aurora[paused] .usa-aurora-layer i,usa-aurora[data-offscreen] .usa-aurora-layer i{animation-play-state:paused}@keyframes usa-aurora-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30%,20%,0) scale(1.25)}}@keyframes usa-aurora-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-35%,25%,0) scale(0.85)}}@keyframes usa-aurora-c{from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}to{transform:translate3d(25%,-30%,0) rotate(40deg) scale(1.2)}}@media (prefers-reduced-motion:reduce){usa-aurora .usa-aurora-layer i,usa-grain .usa-grain-layer,usa-acrylic::after{animation:none !important}}";
|
|
5
5
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { g as configureComponents, a as MOTION_SENSITIVITY_LEVELS } from '../chunks/base-
|
|
1
|
+
import { g as configureComponents, a as MOTION_SENSITIVITY_LEVELS } from '../chunks/base-2-yYc93C.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* motionary/components/bridge — native shell bridges (4.7).
|
package/dist/components/cards.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { d as springEasing, c as createSpring } from '../chunks/spring-
|
|
1
|
+
import { u as defineElement, r as raf, l as caf, z as EASE_OUT, k as clamp } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
import { d as springEasing, c as createSpring } from '../chunks/spring-BK8DiezC.js';
|
|
3
3
|
|
|
4
4
|
var css$3 = "usa-card{--usa-card-radius:18px;--usa-card-bg:var(--usa-surface,#1b1e27);--usa-card-glow:var(--usa-accent,#7c5cff);--usa-card-x:50%;--usa-card-y:50%;--usa-card-nx:0;--usa-card-ny:0;position:relative;display:block;border-radius:var(--usa-card-radius);isolation:isolate;-webkit-tap-highlight-color:transparent}usa-card:focus-visible{outline:2px solid var(--usa-card-glow);outline-offset:3px}usa-card[effect~=\"lift\"]{transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.45s ease}usa-card[effect~=\"lift\"][data-hover],usa-card[effect~=\"lift\"]:focus-visible{transform:translateY(-6px) perspective(900px) rotateX(calc(var(--usa-card-ny) * -4deg)) rotateY(calc(var(--usa-card-nx) * 4deg));box-shadow:0 22px 44px -18px rgb(0 0 0 / 0.55)}usa-card[effect~=\"glass\"]{background:color-mix(in srgb,var(--usa-card-bg) 45%,transparent);border:1px solid rgb(255 255 255 / 0.16);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}usa-card[effect~=\"spotlight\"]::before,usa-card[effect~=\"border-glow\"]::after{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 0.3s ease}usa-card[effect~=\"spotlight\"]::before{z-index:-1;background:radial-gradient(260px circle at var(--usa-card-x) var(--usa-card-y),color-mix(in srgb,var(--usa-card-glow) 28%,transparent),transparent 70%)}usa-card[effect~=\"border-glow\"]::after{padding:1.5px;background:radial-gradient(180px circle at var(--usa-card-x) var(--usa-card-y),var(--usa-card-glow),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}usa-card[data-hover]::before,usa-card[data-hover]::after{opacity:1}@property --usa-card-angle{syntax:\"<angle>\";inherits:false;initial-value:0deg}usa-card[effect~=\"conic-border\"]{border:2px solid transparent;background:linear-gradient(var(--usa-card-bg),var(--usa-card-bg)) padding-box,conic-gradient(from var(--usa-card-angle),var(--usa-card-glow),#22d3ee,#f472b6,var(--usa-card-glow)) border-box;animation:usa-card-spin 4s linear infinite}@keyframes usa-card-spin{to{--usa-card-angle:360deg}}usa-card .usa-card-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}usa-card .usa-card-sheen::before{content:\"\";position:absolute;top:0;bottom:0;width:45%;left:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgb(255 255 255 / 0.35),transparent)}usa-card[effect~=\"sheen\"]:hover .usa-card-sheen::before,usa-card[effect~=\"sheen\"]:focus-visible .usa-card-sheen::before{left:130%;transition:left 0.8s cubic-bezier(0.22,1,0.36,1)}usa-card .usa-card-holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:color-dodge;opacity:0.35;background:linear-gradient(115deg,transparent 20%,#ff7ad9 35%,#7af0ff 45%,#ffe27a 55%,transparent 70%) calc(var(--usa-card-x) * 1.4 - 20%) calc(var(--usa-card-y) * 1.4 - 20%) / 220% 220%;transition:opacity 0.3s ease}usa-card[data-hover] .usa-card-holo{opacity:0.7}usa-card[effect~=\"parallax-layers\"] [data-depth]{transition:transform 0.25s ease-out;will-change:transform}usa-card[effect~=\"flip\"]{perspective:1000px;display:grid}usa-card[effect~=\"flip\"]>[data-front],usa-card[effect~=\"flip\"]>[data-back]{grid-area:1 / 1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;transition:transform 0.7s cubic-bezier(0.34,1.3,0.64,1),opacity 0.3s ease}usa-card[effect~=\"flip\"]>[data-back]{transform:rotateY(180deg)}usa-card[effect~=\"flip\"][axis=\"x\"]>[data-back]{transform:rotateX(180deg)}usa-card[effect~=\"flip\"][flipped]>[data-front],usa-card[effect~=\"flip\"]:not([trigger=\"click\"]):hover>[data-front]{transform:rotateY(-180deg)}usa-card[effect~=\"flip\"][flipped]>[data-back],usa-card[effect~=\"flip\"]:not([trigger=\"click\"]):hover>[data-back]{transform:rotateY(0deg)}usa-card[effect~=\"flip\"][axis=\"x\"][flipped]>[data-front],usa-card[effect~=\"flip\"][axis=\"x\"]:not([trigger=\"click\"]):hover>[data-front]{transform:rotateX(180deg)}usa-card[effect~=\"flip\"][axis=\"x\"][flipped]>[data-back],usa-card[effect~=\"flip\"][axis=\"x\"]:not([trigger=\"click\"]):hover>[data-back]{transform:rotateX(0deg)}usa-card[effect~=\"flip\"][trigger=\"click\"]{cursor:pointer}usa-card[effect~=\"expand\"]{cursor:zoom-in}usa-card[effect~=\"expand\"]:not([expanded]) [data-detail]{display:none}usa-card[expanded]{position:fixed;inset:6vh max(4vw,calc(50vw - 420px));z-index:1000;overflow:auto;cursor:default;background:var(--usa-card-bg);box-shadow:0 30px 80px -20px rgb(0 0 0 / 0.6)}.usa-card-backdrop{position:fixed;inset:0;z-index:999;background:rgb(0 0 0 / 0.45)}@media (prefers-reduced-motion:reduce){usa-card,usa-card *,usa-card .usa-card-sheen::before{transition-duration:0.01ms !important;animation:none !important}usa-card[effect~=\"lift\"][data-hover]{transform:none}usa-card[effect~=\"flip\"]>[data-front],usa-card[effect~=\"flip\"]>[data-back]{transform:none !important}usa-card[effect~=\"flip\"][flipped]>[data-front],usa-card[effect~=\"flip\"]:not([flipped])>[data-back]{opacity:0;visibility:hidden}usa-card[effect~=\"flip\"]:not([trigger=\"click\"]):hover>[data-front]{opacity:0;visibility:hidden}usa-card[effect~=\"flip\"]:not([trigger=\"click\"]):hover>[data-back]{opacity:1;visibility:visible}}@media (prefers-reduced-transparency:reduce),(forced-colors:active){usa-card[effect~=\"glass\"]{background:var(--usa-card-bg);-webkit-backdrop-filter:none;backdrop-filter:none}}";
|
|
5
5
|
|
package/dist/components/click.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { d as springEasing, c as createSpring } from '../chunks/spring-
|
|
3
|
-
import { b as burst, c as confetti, h as haptic, s as shake } from '../chunks/fx-
|
|
1
|
+
import { u as defineElement, z as EASE_OUT, k as clamp, l as caf, q as now, r as raf } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
import { d as springEasing, c as createSpring } from '../chunks/spring-BK8DiezC.js';
|
|
3
|
+
import { b as burst, c as confetti, h as haptic, s as shake } from '../chunks/fx-CMxWNwH8.js';
|
|
4
4
|
|
|
5
5
|
var css$6 = "usa-click{position:relative;display:inline-block;overflow:hidden;isolation:isolate;border-radius:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}usa-click[block]{display:block}usa-click .usa-click-wave{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;transform:scale(0);background:radial-gradient(circle,var(--usa-wave) 0 55%,color-mix(in srgb,var(--usa-wave) 40%,transparent) 70%,transparent 72%)}";
|
|
6
6
|
|
package/dist/components/depth.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { c as createSpring } from '../chunks/spring-
|
|
3
|
-
import { g as gesture } from '../chunks/core-
|
|
1
|
+
import { u as defineElement, k as clamp, r as raf, l as caf } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
import { c as createSpring } from '../chunks/spring-BK8DiezC.js';
|
|
3
|
+
import { g as gesture } from '../chunks/core-DuO-AVXL.js';
|
|
4
4
|
|
|
5
5
|
var css = "usa-cube{--usa-cube-size:200px;display:block;width:var(--usa-cube-size);height:var(--usa-cube-size);perspective:var(--usa-cube-perspective,900px);touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}usa-cube>[data-face]{position:absolute;inset:0;backface-visibility:hidden;transform:translateZ(calc(var(--usa-cube-size) / -2)) rotateX(var(--usa-cube-rx,0deg)) rotateY(var(--usa-cube-ry,0deg)) var(--usa-face) translateZ(calc(var(--usa-cube-size) / 2));transform-origin:50% 50%}usa-cube>[data-face=\"front\"]{--usa-face:rotateY(0deg)}usa-cube>[data-face=\"right\"]{--usa-face:rotateY(90deg)}usa-cube>[data-face=\"back\"]{--usa-face:rotateY(180deg)}usa-cube>[data-face=\"left\"]{--usa-face:rotateY(-90deg)}usa-cube>[data-face=\"top\"]{--usa-face:rotateX(90deg)}usa-cube>[data-face=\"bottom\"]{--usa-face:rotateX(-90deg)}usa-cube:focus-visible{outline:2px solid currentColor;outline-offset:6px}usa-depth{display:block;position:relative;perspective:1000px}usa-depth>*{transform:var(--usa-depth-rot,none);transform-style:preserve-3d}usa-depth [data-depth]{will-change:transform;transition:transform 0.12s linear}@media (prefers-reduced-motion:reduce){usa-depth [data-depth]{transform:none !important}}";
|
|
6
6
|
|
|
@@ -4,6 +4,7 @@ var components_fx = require('./fx.cjs');
|
|
|
4
4
|
var shared = require('../chunks/shared-jkgRH-Hx.cjs');
|
|
5
5
|
var player = require('../chunks/player-PS6_FzNw.cjs');
|
|
6
6
|
var generative = require('../chunks/generative-BHIj-NU0.cjs');
|
|
7
|
+
var audio = require('../chunks/audio-EXUoijsG.cjs');
|
|
7
8
|
var registry = require('../chunks/registry-DehBVRDV.cjs');
|
|
8
9
|
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
9
10
|
var components_tokens = require('./tokens.cjs');
|
|
@@ -575,332 +576,6 @@ const PAGE_FX = [
|
|
|
575
576
|
},
|
|
576
577
|
];
|
|
577
578
|
|
|
578
|
-
let actx = null;
|
|
579
|
-
let current = null;
|
|
580
|
-
const mediaSources = new WeakMap();
|
|
581
|
-
/** The running analyser, if `enableAudio()` was called. */
|
|
582
|
-
const getAudio = () => current;
|
|
583
|
-
function audioContext() {
|
|
584
|
-
const AC = globalThis.AudioContext || globalThis.webkitAudioContext;
|
|
585
|
-
if (!AC)
|
|
586
|
-
throw new Error('[motionary] Web Audio is not available');
|
|
587
|
-
if (!actx || actx.state === 'closed')
|
|
588
|
-
actx = new AC();
|
|
589
|
-
return actx;
|
|
590
|
-
}
|
|
591
|
-
/**
|
|
592
|
-
* Start analysing `input` and make it the source of every sound-reactive
|
|
593
|
-
* effect. Call from a user gesture. Replaces a previous source.
|
|
594
|
-
*/
|
|
595
|
-
async function enableAudio(input = 'mic', opts = {}) {
|
|
596
|
-
current?.stop();
|
|
597
|
-
const ac = audioContext();
|
|
598
|
-
if (ac.state === 'suspended')
|
|
599
|
-
await ac.resume().catch(() => undefined);
|
|
600
|
-
const analyser = ac.createAnalyser();
|
|
601
|
-
analyser.fftSize = opts.fftSize || 512;
|
|
602
|
-
analyser.smoothingTimeConstant = opts.smoothing ?? 0.8;
|
|
603
|
-
let src;
|
|
604
|
-
let release = () => { };
|
|
605
|
-
const media = typeof input === 'string' && input !== 'mic' ? document.querySelector(input) : input;
|
|
606
|
-
if (media === 'mic') {
|
|
607
|
-
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
608
|
-
src = ac.createMediaStreamSource(stream);
|
|
609
|
-
src.connect(analyser); // never to the speakers: no feedback
|
|
610
|
-
release = () => stream.getTracks().forEach((t) => t.stop());
|
|
611
|
-
}
|
|
612
|
-
else if (media && typeof media.play === 'function') {
|
|
613
|
-
const m = media;
|
|
614
|
-
let node = mediaSources.get(m);
|
|
615
|
-
if (!node)
|
|
616
|
-
mediaSources.set(m, (node = ac.createMediaElementSource(m)));
|
|
617
|
-
try {
|
|
618
|
-
node.disconnect();
|
|
619
|
-
}
|
|
620
|
-
catch {
|
|
621
|
-
/* not connected */
|
|
622
|
-
}
|
|
623
|
-
src = node;
|
|
624
|
-
src.connect(analyser);
|
|
625
|
-
analyser.connect(ac.destination);
|
|
626
|
-
release = () => {
|
|
627
|
-
try {
|
|
628
|
-
node.disconnect();
|
|
629
|
-
}
|
|
630
|
-
catch {
|
|
631
|
-
/* already */
|
|
632
|
-
}
|
|
633
|
-
node.connect(ac.destination); // keep the media audible
|
|
634
|
-
};
|
|
635
|
-
if (m.paused)
|
|
636
|
-
await m.play()?.catch?.(() => undefined);
|
|
637
|
-
}
|
|
638
|
-
else if (media && typeof media.getTracks === 'function') {
|
|
639
|
-
src = ac.createMediaStreamSource(media);
|
|
640
|
-
src.connect(analyser);
|
|
641
|
-
}
|
|
642
|
-
else
|
|
643
|
-
throw new Error(`[motionary] enableAudio: no audio source for ${String(input)}`);
|
|
644
|
-
const freq = new Uint8Array(analyser.frequencyBinCount);
|
|
645
|
-
const wave = new Uint8Array(analyser.fftSize);
|
|
646
|
-
const self = {
|
|
647
|
-
context: ac,
|
|
648
|
-
analyser,
|
|
649
|
-
sample: () => {
|
|
650
|
-
analyser.getByteFrequencyData(freq);
|
|
651
|
-
analyser.getByteTimeDomainData(wave);
|
|
652
|
-
let sq = 0;
|
|
653
|
-
for (let i = 0; i < wave.length; i++)
|
|
654
|
-
sq += ((wave[i] - 128) / 128) ** 2;
|
|
655
|
-
const n = Math.max(1, Math.round(freq.length * 0.08));
|
|
656
|
-
let b = 0;
|
|
657
|
-
for (let i = 0; i < n; i++)
|
|
658
|
-
b += freq[i];
|
|
659
|
-
return { level: Math.min(1, Math.sqrt(sq / wave.length) * 2), bass: b / n / 255, freq, wave };
|
|
660
|
-
},
|
|
661
|
-
stop: () => {
|
|
662
|
-
if (current === self) {
|
|
663
|
-
current = null;
|
|
664
|
-
if (raf && typeof cancelAnimationFrame === 'function')
|
|
665
|
-
cancelAnimationFrame(raf);
|
|
666
|
-
raf = 0;
|
|
667
|
-
}
|
|
668
|
-
try {
|
|
669
|
-
src.disconnect();
|
|
670
|
-
analyser.disconnect();
|
|
671
|
-
}
|
|
672
|
-
catch {
|
|
673
|
-
/* already */
|
|
674
|
-
}
|
|
675
|
-
release();
|
|
676
|
-
setVars(0, 0);
|
|
677
|
-
},
|
|
678
|
-
};
|
|
679
|
-
current = self;
|
|
680
|
-
kick();
|
|
681
|
-
return self;
|
|
682
|
-
}
|
|
683
|
-
/** Stop the current audio source (if any). */
|
|
684
|
-
function disableAudio() {
|
|
685
|
-
current?.stop();
|
|
686
|
-
}
|
|
687
|
-
/** A pure beat detector: feed it energy (0–1) and a timestamp per frame; it answers "beat?". */
|
|
688
|
-
function createBeatDetector(o = {}) {
|
|
689
|
-
const { threshold = 1.35, cooldown = 250, history = 43, floor = 0.08 } = o;
|
|
690
|
-
const hist = [];
|
|
691
|
-
let last = -Infinity;
|
|
692
|
-
return (energy, now) => {
|
|
693
|
-
const avg = hist.length ? hist.reduce((a, b) => a + b, 0) / hist.length : energy;
|
|
694
|
-
const ready = hist.length >= 8;
|
|
695
|
-
hist.push(energy);
|
|
696
|
-
if (hist.length > history)
|
|
697
|
-
hist.shift();
|
|
698
|
-
if (ready && energy > floor && energy > avg * threshold && now - last >= cooldown) {
|
|
699
|
-
last = now;
|
|
700
|
-
return true;
|
|
701
|
-
}
|
|
702
|
-
return false;
|
|
703
|
-
};
|
|
704
|
-
}
|
|
705
|
-
const listeners = new Set();
|
|
706
|
-
let raf = 0;
|
|
707
|
-
function setVars(level, bass) {
|
|
708
|
-
if (typeof document === 'undefined')
|
|
709
|
-
return;
|
|
710
|
-
const s = document.documentElement.style;
|
|
711
|
-
s.setProperty('--usa-audio-level', level.toFixed(3));
|
|
712
|
-
s.setProperty('--usa-audio-bass', bass.toFixed(3));
|
|
713
|
-
}
|
|
714
|
-
function loop(now) {
|
|
715
|
-
raf = 0;
|
|
716
|
-
if (!current)
|
|
717
|
-
return;
|
|
718
|
-
const { level, bass } = current.sample();
|
|
719
|
-
const reduced = base.prefersReducedMotion();
|
|
720
|
-
setVars(reduced ? 0 : level, reduced ? 0 : bass);
|
|
721
|
-
for (const l of Array.from(listeners))
|
|
722
|
-
if (l.detect(bass, now))
|
|
723
|
-
l.cb({ energy: bass, time: now });
|
|
724
|
-
kick();
|
|
725
|
-
}
|
|
726
|
-
function kick() {
|
|
727
|
-
if (!raf && current && typeof requestAnimationFrame === 'function')
|
|
728
|
-
raf = requestAnimationFrame(loop);
|
|
729
|
-
}
|
|
730
|
-
/** Call `cb` on every detected beat of the current audio source. Returns an unsubscribe. */
|
|
731
|
-
function onBeat(cb, o = {}) {
|
|
732
|
-
const l = { detect: createBeatDetector(o), cb };
|
|
733
|
-
listeners.add(l);
|
|
734
|
-
kick();
|
|
735
|
-
return () => void listeners.delete(l);
|
|
736
|
-
}
|
|
737
|
-
/** Play the registered effect `name` on `el` at every beat (not under reduced motion). Returns an unbind. */
|
|
738
|
-
function bindBeat(el, name, options = {}) {
|
|
739
|
-
const { threshold, cooldown, history, floor, ...fx } = options;
|
|
740
|
-
return onBeat(() => {
|
|
741
|
-
if (!base.prefersReducedMotion())
|
|
742
|
-
registry.playEffect(el, name, fx).catch(() => undefined);
|
|
743
|
-
}, { threshold, cooldown, history, floor });
|
|
744
|
-
}
|
|
745
|
-
// --- visual effects ----------------------------------------------------------
|
|
746
|
-
/** The current sample, or a gentle synthetic one while no audio is enabled. */
|
|
747
|
-
function read(t, bins) {
|
|
748
|
-
if (current)
|
|
749
|
-
return { ...current.sample(), idle: false };
|
|
750
|
-
const freq = new Uint8Array(bins);
|
|
751
|
-
const wave = new Uint8Array(bins * 2);
|
|
752
|
-
for (let i = 0; i < bins; i++)
|
|
753
|
-
freq[i] = 70 + 50 * Math.sin(t * 2 + i * 0.35) * Math.cos(t * 0.7 + i * 0.11) * (1 - i / bins);
|
|
754
|
-
for (let i = 0; i < wave.length; i++)
|
|
755
|
-
wave[i] = 128 + 22 * Math.sin(t * 3 + i * 0.12);
|
|
756
|
-
return { level: 0.25 + 0.1 * Math.sin(t * 2), bass: 0.35 + 0.2 * Math.sin(t * 2.4), freq, wave, idle: true };
|
|
757
|
-
}
|
|
758
|
-
const audioFx = (name, description, defaults, spec) => ({
|
|
759
|
-
name,
|
|
760
|
-
kind: 'background',
|
|
761
|
-
description,
|
|
762
|
-
reduced: 'skip',
|
|
763
|
-
defaults: { colors: shared.PALETTE, background: '#0b0d12', speed: 1, quality: 1, ...defaults },
|
|
764
|
-
run: (el, o, ctx) => generative.canvasBackground(el, ctx, spec, o),
|
|
765
|
-
});
|
|
766
|
-
const AUDIO_FX = [
|
|
767
|
-
audioFx('spectrum-bars', 'Frequency bars dance to the audio (mirror them with `mirror: true`).', { bars: 48, gap: 2, mirror: false }, {
|
|
768
|
-
draw: ({ ctx, w, h, t, o }) => {
|
|
769
|
-
ctx.fillStyle = o.background;
|
|
770
|
-
ctx.fillRect(0, 0, w, h);
|
|
771
|
-
const s = read(t, o.bars);
|
|
772
|
-
const per = Math.max(1, Math.floor((s.freq.length * 0.7) / o.bars));
|
|
773
|
-
const bw = w / o.bars;
|
|
774
|
-
for (let i = 0; i < o.bars; i++) {
|
|
775
|
-
let v = 0;
|
|
776
|
-
for (let k = 0; k < per; k++)
|
|
777
|
-
v += s.freq[Math.min(s.freq.length - 1, i * per + k)];
|
|
778
|
-
const bh = (v / per / 255) * h * (o.mirror ? 0.5 : 0.9);
|
|
779
|
-
ctx.fillStyle = o.colors[i % o.colors.length];
|
|
780
|
-
ctx.fillRect(i * bw + o.gap / 2, o.mirror ? h / 2 - bh : h - bh, Math.max(1, bw - o.gap), o.mirror ? bh * 2 : bh);
|
|
781
|
-
}
|
|
782
|
-
},
|
|
783
|
-
}),
|
|
784
|
-
audioFx('pulse-ring', 'Glowing rings pulse with the bass.', { rings: 3, color: '#7c5cff' }, {
|
|
785
|
-
draw: ({ ctx, w, h, t, o }) => {
|
|
786
|
-
ctx.fillStyle = o.background;
|
|
787
|
-
ctx.fillRect(0, 0, w, h);
|
|
788
|
-
const s = read(t, 32);
|
|
789
|
-
const [r, g, b] = generative.hexRgb(o.color);
|
|
790
|
-
const base = Math.min(w, h) * 0.18;
|
|
791
|
-
for (let i = 0; i < o.rings; i++) {
|
|
792
|
-
const rad = base * (1 + i * 0.55) * (1 + s.bass * 0.6);
|
|
793
|
-
ctx.strokeStyle = `rgba(${r},${g},${b},${(0.9 - i * 0.25) * (0.4 + s.level)})`;
|
|
794
|
-
ctx.lineWidth = 3 + s.bass * 10 - i;
|
|
795
|
-
ctx.beginPath();
|
|
796
|
-
ctx.arc(w / 2, h / 2, rad, 0, Math.PI * 2);
|
|
797
|
-
ctx.stroke();
|
|
798
|
-
}
|
|
799
|
-
},
|
|
800
|
-
}),
|
|
801
|
-
audioFx('wave-ring', 'The live waveform wrapped into a circle.', { color: '#22d3ee', amplitude: 0.35 }, {
|
|
802
|
-
draw: ({ ctx, w, h, t, o }) => {
|
|
803
|
-
ctx.fillStyle = o.background;
|
|
804
|
-
ctx.fillRect(0, 0, w, h);
|
|
805
|
-
const s = read(t, 64);
|
|
806
|
-
const n = s.wave.length;
|
|
807
|
-
const base = Math.min(w, h) * 0.28;
|
|
808
|
-
ctx.strokeStyle = o.color;
|
|
809
|
-
ctx.lineWidth = 2;
|
|
810
|
-
ctx.beginPath();
|
|
811
|
-
for (let i = 0; i <= n; i++) {
|
|
812
|
-
const a = (i / n) * Math.PI * 2;
|
|
813
|
-
const rad = base * (1 + ((s.wave[i % n] - 128) / 128) * o.amplitude * 2);
|
|
814
|
-
const x = w / 2 + Math.cos(a) * rad;
|
|
815
|
-
const y = h / 2 + Math.sin(a) * rad;
|
|
816
|
-
if (i)
|
|
817
|
-
ctx.lineTo(x, y);
|
|
818
|
-
else
|
|
819
|
-
ctx.moveTo(x, y);
|
|
820
|
-
}
|
|
821
|
-
ctx.closePath();
|
|
822
|
-
ctx.stroke();
|
|
823
|
-
},
|
|
824
|
-
}),
|
|
825
|
-
];
|
|
826
|
-
/**
|
|
827
|
-
* `<usa-audio source="#track | mic" label="…">` — a toggle button (yours, as
|
|
828
|
-
* `[data-audio-toggle]`, or one it renders) that enables the audio source on
|
|
829
|
-
* click; children with `data-usa-beat="effect"` play that effect on every
|
|
830
|
-
* beat (`data-usa-beat-options` JSON; `threshold` / `cooldown` attributes).
|
|
831
|
-
* Emits `usa-beat` and `usa-audio-error`.
|
|
832
|
-
*/
|
|
833
|
-
function defineAudio(tag = 'usa-audio') {
|
|
834
|
-
return base.defineElement(tag, (Base) => class UsaAudio extends Base {
|
|
835
|
-
constructor() {
|
|
836
|
-
super(...arguments);
|
|
837
|
-
this.active = false;
|
|
838
|
-
this.audio = null;
|
|
839
|
-
this.off = null;
|
|
840
|
-
}
|
|
841
|
-
static get observedAttributes() {
|
|
842
|
-
return ['source'];
|
|
843
|
-
}
|
|
844
|
-
button() {
|
|
845
|
-
let b = this.querySelector('[data-audio-toggle]');
|
|
846
|
-
if (!b) {
|
|
847
|
-
b = document.createElement('button');
|
|
848
|
-
b.type = 'button';
|
|
849
|
-
b.setAttribute('data-audio-toggle', '');
|
|
850
|
-
b.textContent = this.str('label', '🔊 Enable sound-reactive effects');
|
|
851
|
-
this.prepend(b);
|
|
852
|
-
this.onCleanup(() => b.remove());
|
|
853
|
-
}
|
|
854
|
-
return b;
|
|
855
|
-
}
|
|
856
|
-
async toggle() {
|
|
857
|
-
const b = this.button();
|
|
858
|
-
if (this.active)
|
|
859
|
-
return this.stop();
|
|
860
|
-
try {
|
|
861
|
-
this.audio = await enableAudio(this.str('source', 'mic'));
|
|
862
|
-
this.active = true;
|
|
863
|
-
this.removeAttribute('data-audio-error');
|
|
864
|
-
b.setAttribute('aria-pressed', 'true');
|
|
865
|
-
this.off = onBeat((d) => {
|
|
866
|
-
this.dispatchEvent(new CustomEvent('usa-beat', { detail: d, bubbles: true }));
|
|
867
|
-
if (base.prefersReducedMotion())
|
|
868
|
-
return;
|
|
869
|
-
this.querySelectorAll('[data-usa-beat]').forEach((el) => {
|
|
870
|
-
let opts = {};
|
|
871
|
-
try {
|
|
872
|
-
opts = JSON.parse(el.dataset.usaBeatOptions || '{}') || {};
|
|
873
|
-
}
|
|
874
|
-
catch {
|
|
875
|
-
/* ignore bad JSON */
|
|
876
|
-
}
|
|
877
|
-
registry.playEffect(el, el.dataset.usaBeat || 'pulse', opts).catch(() => undefined);
|
|
878
|
-
});
|
|
879
|
-
}, { threshold: this.num('threshold', 1.35), cooldown: this.num('cooldown', 250) });
|
|
880
|
-
}
|
|
881
|
-
catch (err) {
|
|
882
|
-
this.setAttribute('data-audio-error', '');
|
|
883
|
-
this.dispatchEvent(new CustomEvent('usa-audio-error', { detail: { error: err }, bubbles: true }));
|
|
884
|
-
}
|
|
885
|
-
}
|
|
886
|
-
stop() {
|
|
887
|
-
this.off?.();
|
|
888
|
-
this.off = null;
|
|
889
|
-
if (this.audio && current === this.audio)
|
|
890
|
-
this.audio.stop();
|
|
891
|
-
this.audio = null;
|
|
892
|
-
this.active = false;
|
|
893
|
-
this.querySelector('[data-audio-toggle]')?.setAttribute('aria-pressed', 'false');
|
|
894
|
-
}
|
|
895
|
-
mount() {
|
|
896
|
-
const b = this.button();
|
|
897
|
-
b.setAttribute('aria-pressed', 'false');
|
|
898
|
-
this.listen(b, 'click', () => void this.toggle());
|
|
899
|
-
this.onCleanup(() => this.stop());
|
|
900
|
-
}
|
|
901
|
-
}, { id: 'usa-audio', text: 'usa-audio{display:block}usa-audio[data-audio-error] [data-audio-toggle]{outline:2px solid #ff5c8a}' });
|
|
902
|
-
}
|
|
903
|
-
|
|
904
579
|
const touchOk = (e, o) => o.touch || e.pointerType !== 'touch';
|
|
905
580
|
/** A fixed, viewport-sized canvas in the fx layer, redrawn while `draw` returns true. */
|
|
906
581
|
function overlayCanvas(draw) {
|
|
@@ -1640,7 +1315,7 @@ const EFFECT_PACKS = {
|
|
|
1640
1315
|
physics: PHYSICS_FX,
|
|
1641
1316
|
page: PAGE_FX,
|
|
1642
1317
|
generative: generative.GENERATIVE_FX,
|
|
1643
|
-
audio: AUDIO_FX,
|
|
1318
|
+
audio: audio.AUDIO_FX,
|
|
1644
1319
|
cursor: CURSOR_FX,
|
|
1645
1320
|
micro: MICRO_FX,
|
|
1646
1321
|
themes: THEME_FX,
|
|
@@ -1677,7 +1352,7 @@ function registerMicroEffects() {
|
|
|
1677
1352
|
/** Define the 5.x elements of this entry (`<usa-story>`, …) under their default tags. */
|
|
1678
1353
|
function defineEffectElements() {
|
|
1679
1354
|
player.defineStory();
|
|
1680
|
-
defineAudio();
|
|
1355
|
+
audio.defineAudio();
|
|
1681
1356
|
defineGestureFx();
|
|
1682
1357
|
defineTheme();
|
|
1683
1358
|
player.definePlayer();
|
|
@@ -1702,7 +1377,14 @@ exports.GENERATIVE_FX = generative.GENERATIVE_FX;
|
|
|
1702
1377
|
exports.canvasBackground = generative.canvasBackground;
|
|
1703
1378
|
exports.hexRgb = generative.hexRgb;
|
|
1704
1379
|
exports.noise2 = generative.noise2;
|
|
1705
|
-
exports.AUDIO_FX = AUDIO_FX;
|
|
1380
|
+
exports.AUDIO_FX = audio.AUDIO_FX;
|
|
1381
|
+
exports.bindBeat = audio.bindBeat;
|
|
1382
|
+
exports.createBeatDetector = audio.createBeatDetector;
|
|
1383
|
+
exports.defineAudio = audio.defineAudio;
|
|
1384
|
+
exports.disableAudio = audio.disableAudio;
|
|
1385
|
+
exports.enableAudio = audio.enableAudio;
|
|
1386
|
+
exports.getAudio = audio.getAudio;
|
|
1387
|
+
exports.onBeat = audio.onBeat;
|
|
1706
1388
|
exports.CARD_FX = CARD_FX;
|
|
1707
1389
|
exports.CLICK_FX = CLICK_FX;
|
|
1708
1390
|
exports.CURSOR_FX = CURSOR_FX;
|
|
@@ -1717,20 +1399,13 @@ exports.THEME_NAMES = THEME_NAMES;
|
|
|
1717
1399
|
exports.THEME_ROLES = THEME_ROLES;
|
|
1718
1400
|
exports.angleDelta = angleDelta;
|
|
1719
1401
|
exports.applyTheme = applyTheme;
|
|
1720
|
-
exports.bindBeat = bindBeat;
|
|
1721
1402
|
exports.bindGesture = bindGesture;
|
|
1722
1403
|
exports.bounceKeyframes = bounceKeyframes;
|
|
1723
1404
|
exports.bumpCount = bumpCount;
|
|
1724
|
-
exports.createBeatDetector = createBeatDetector;
|
|
1725
|
-
exports.defineAudio = defineAudio;
|
|
1726
1405
|
exports.defineEffectElements = defineEffectElements;
|
|
1727
1406
|
exports.defineGestureFx = defineGestureFx;
|
|
1728
1407
|
exports.defineTheme = defineTheme;
|
|
1729
|
-
exports.disableAudio = disableAudio;
|
|
1730
|
-
exports.enableAudio = enableAudio;
|
|
1731
1408
|
exports.flingVelocity = flingVelocity;
|
|
1732
|
-
exports.getAudio = getAudio;
|
|
1733
|
-
exports.onBeat = onBeat;
|
|
1734
1409
|
exports.playThemeEffect = playThemeEffect;
|
|
1735
1410
|
exports.registerAllEffects = registerAllEffects;
|
|
1736
1411
|
exports.registerAudioEffects = registerAudioEffects;
|