{"$schema":"https://harrisoncn.github.io/Motionary/components.schema.json","format":"motionary/components","schemaVersion":2,"stability":"stable","package":"motionary","version":"17.0.1","homepage":"https://harrisoncn.github.io/Motionary/","llms":"https://harrisoncn.github.io/Motionary/llms.txt","cdn":{"components":"https://unpkg.com/motionary@17/dist/components.umd.js","widgets":"https://unpkg.com/motionary@17/dist/widgets.umd.js","runtime":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js"},"runtimeModules":[{"kind":"runtime","id":"core","tier":"basic","label":"motionary/runtime","title":"Runtime core","summary":"Shared ticker (one rAF loop), tween + timeline engine with easing, module registry with clear errors.","install":"npm i motionary","importPath":"motionary/runtime","import":"import { use } from 'motionary/runtime';","register":"use();","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.js","order":"Import motionary/runtime and call use() once at start-up, before any runtime-powered component mounts. CDN: the IIFE registers itself (window.MotionaryRuntime).","docs":"docs/runtime/core.md","budget":5632,"exports":["use","requireModule","hasModule","getTicker","tween","timeline","Tween","Timeline","EASES","parseEase","cubicBezier","steps","RuntimeModuleError"],"compat":[["Plain objects (numeric props)","yes","any numeric property"],["Elements: CSS lengths, %, unitless, colours, custom properties","yes","hex, rgb(), rgba(), transparent"],["Transform shorthands x y rotate scale scaleX scaleY skewX skewY","yes","composed in that order"],["Timeline positions (<, >, +=, -=, labels)","yes",""],["repeat / yoyo / reverse / seek / timeScale","yes",""],["SSR / Node import","yes","no window access at import"],["Web Workers","yes","ticker falls back to setTimeout without rAF"]],"example":"import { use, tween, timeline } from 'motionary/runtime';\nuse();\ntween('.box', { to: { x: 120, opacity: 1 }, duration: 500, ease: 'back-out' });\ntimeline().to('.a', { to: { y: -20 } }).to('.b', { to: { scale: 1.2 } }, '<+=100');","optional":false,"stability":"stable","since":"10.1","changed":["11.0","11.4","12.2","12.5","13.0","13.7"]},{"kind":"runtime","id":"format-css","tier":"basic","label":"motionary/runtime/format-css","title":"CSS @keyframes & WAAPI keyframes loader","summary":"Import CSS @keyframes text or live CSSKeyframesRule objects and Web Animations API keyframes (array or property-indexed) into a runtime timeline.","install":"npm i motionary","importPath":"motionary/runtime/format-css","import":"import { use } from 'motionary/runtime';\nimport { formatCss } from 'motionary/runtime/format-css';","register":"use(formatCss);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-css.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-css.js","order":"Register the core first, then the module: use(formatCss) also registers the core. CDN: load runtime.iife.js, then runtime/format-css.iife.js (it registers itself).","docs":"docs/runtime/format-css.md","budget":2560,"exports":["formatCss","parseKeyframes","fromCssRule","fromWaapi","toWaapi","playKeyframes"],"compat":[["@keyframes from / to / percentages / selector lists","yes","duplicate offsets merged, later wins"],["-webkit- / -moz- prefixed @keyframes","yes",""],["animation-timing-function per keyframe","yes","names, cubic-bezier(), steps()"],["transform lists (translate / rotate / scale / skew)","yes","tweened as shorthands"],["matrix() / 3D transforms","partial","switch discretely at the segment midpoint"],["WAAPI array + property-indexed keyframes, offsets, easing","yes","offsets distributed like the WAAPI"],["composite: add / accumulate","no","ignored (replace)"],["@property typed interpolation","no","non-numeric values switch discretely"]],"example":"import { use } from 'motionary/runtime';\nimport { formatCss, parseKeyframes, playKeyframes } from 'motionary/runtime/format-css';\nuse(formatCss);\nconst [pulse] = parseKeyframes('@keyframes pulse { from { opacity: .4 } 50% { opacity: 1; transform: scale(1.1) } to { opacity: .4 } }');\nplayKeyframes(document.querySelector('.dot'), pulse, { duration: 1200, repeat: -1 });","optional":false,"stability":"stable","since":"10.1","changed":[]},{"kind":"runtime","id":"format-motion","tier":"basic","label":"motionary/runtime/format-motion","title":"Motion / Framer keyframe JSON loader","summary":"Play Motion / Framer-style { initial, animate, transition } JSON (arrays as keyframes, times, repeatType, springs) with the runtime.","install":"npm i motionary","importPath":"motionary/runtime/format-motion","import":"import { use } from 'motionary/runtime';\nimport { formatMotion } from 'motionary/runtime/format-motion';","register":"use(formatMotion);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-motion.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-motion.js","order":"Register the core first, then the module: use(formatMotion) also registers the core. CDN: load runtime.iife.js, then runtime/format-motion.iife.js (it registers itself).","docs":"docs/runtime/format-motion.md","budget":2560,"exports":["formatMotion","fromMotion","playMotion","springEase","motionEase"],"compat":[["initial / animate, arrays as keyframes, times","yes",""],["transition duration / delay (s), ease names + cubic arrays","yes","easeIn/Out/InOut, circ*, back*, anticipate≈back-in-out"],["repeat (Infinity), repeatType loop / reverse / mirror","yes","mirror = reverse"],["per-property transitions","yes",""],["type: \"spring\" (stiffness, damping, mass, bounce + duration)","yes","simulated into an easing curve"],["variants, gestures (whileHover…), layout animations","no","out of scope"]],"example":"import { use } from 'motionary/runtime';\nimport { formatMotion, playMotion } from 'motionary/runtime/format-motion';\nuse(formatMotion);\nplayMotion(document.querySelector('.card'), { initial: { opacity: 0, y: 40 }, animate: { opacity: 1, y: 0 }, transition: { type: 'spring', stiffness: 180, damping: 14 } });","optional":false,"stability":"stable","since":"10.1","changed":[]},{"kind":"runtime","id":"scroll","tier":"basic","label":"motionary/runtime/scroll","title":"Scroll scenes","summary":"Scroll-linked scenes: start / end rules, scrub (direct or smoothed), pin, markers, enter / leave callbacks and per-edge actions for a runtime tween or timeline.","install":"npm i motionary","importPath":"motionary/runtime/scroll","import":"import { use } from 'motionary/runtime';\nimport { scroll } from 'motionary/runtime/scroll';","register":"use(scroll);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/scroll.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/scroll.js","order":"Register the core first, then the module: use(scroll) also registers the core. CDN: load runtime.iife.js, then runtime/scroll.iife.js (it registers itself).","docs":"docs/runtime/scroll.md","budget":4608,"exports":["scroll","scrollScene","ScrollScene","refreshScenes","killScenes","allScenes","parseEdge","resolveRule"],"compat":[["start / end rules (\"top 80%\", \"center center\", \"top top+=80\", end \"+=600\")","yes","keywords, %, px, +=/-= offsets"],["scrub: direct (true) or smoothed (ms)","yes","drives any runtime tween / timeline"],["pin (fixed in the window, transform inside a scroll container)","yes","spacer keeps the layout"],["markers","yes","start / end + viewport lines"],["onEnter / onLeave / onEnterBack / onLeaveBack / onUpdate / onToggle","yes",""],["actions per edge (play pause resume reverse restart reset complete none)","yes","default \"play none none reverse\""],["horizontal scenes, custom scroll containers","yes",""],["snap, nested pins, pinned scroll containers","no","planned with the smooth module (10.4)"],["SSR","yes","safe to import; scenes need a window"],["Web Workers","no","needs the DOM"]],"example":"import { use, timeline } from 'motionary/runtime';\nimport { scroll, scrollScene } from 'motionary/runtime/scroll';\nuse(scroll);\nconst tl = timeline({ paused: true }).to('.card', { to: { x: 200, rotate: 8 } });\nscrollScene({ trigger: '.section', start: 'top 80%', end: 'bottom 20%', scrub: 120, pin: true, markers: true, animation: tl });","optional":false,"stability":"stable","since":"10.2","changed":[]},{"kind":"runtime","id":"format-svg","tier":"standard","label":"motionary/runtime/format-svg","title":"SVG loader: SMIL playback + path morphing","summary":"Replay SVG SMIL animations (animate, set, animateTransform, animateMotion) on the runtime timeline, morph between any two paths, and measure paths without the DOM.","install":"npm i motionary","importPath":"motionary/runtime/format-svg","import":"import { use } from 'motionary/runtime';\nimport { formatSvg } from 'motionary/runtime/format-svg';","register":"use(formatSvg);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-svg.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-svg.js","order":"Register the core first, then the module: use(formatSvg) also registers the core. CDN: load runtime.iife.js, then runtime/format-svg.iife.js (it registers itself).","docs":"docs/runtime/format-svg.md","budget":5120,"exports":["formatSvg","playSmil","readSmil","morphPath","parsePath","flattenPath","pathLength","pointAtLength","samplePath","smilTime"],"compat":[["<animate> from / to / by / values, keyTimes, calcMode linear / discrete / spline + keySplines","yes",""],["<set>","yes",""],["<animateTransform> translate / scale / rotate / skewX / skewY","yes",""],["<animateMotion> path / <mpath>, rotate auto / auto-reverse / angle","yes","paced along the path"],["dur, numeric begin offsets, repeatCount (incl. indefinite), repeatDur, fill freeze","yes",""],["path morphing between any two paths (d attribute or morphPath())","yes","resampled to N points, start points aligned"],["path parsing incl. relative commands, S/T reflections, arcs","yes","no DOM needed (SSR / workers)"],["event / syncbase begin (click, a.end), accumulate, additive=\"sum\"","no","documented gap"],["CSS-animated SVG","yes","via motionary/runtime/format-css"]],"example":"import { use } from 'motionary/runtime';\nimport { formatSvg, playSmil, morphPath } from 'motionary/runtime/format-svg';\nuse(formatSvg);\nconst player = playSmil(document.querySelector('svg'));\nplayer.timeline.timeScale = 0.5;   // scrub / slow down / reverse like any runtime timeline\nconst f = morphPath('M0 0 L100 0 L50 80 Z', 'M50 0 A40 40 0 1 1 49.9 0 Z');\npath.setAttribute('d', f(0.5));","optional":false,"stability":"stable","since":"10.2","changed":[]},{"kind":"runtime","id":"text","tier":"basic","label":"motionary/runtime/text","title":"Text splitting","summary":"Split text into characters (grapheme-aware), words and lines for animation while keeping it accessible (aria-label with the full text, pieces hidden from assistive tech).","install":"npm i motionary","importPath":"motionary/runtime/text","import":"import { use } from 'motionary/runtime';\nimport { text } from 'motionary/runtime/text';","register":"use(text);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/text.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/text.js","order":"Register the core first, then the module: use(text) also registers the core. CDN: load runtime.iife.js, then runtime/text.iife.js (it registers itself).","docs":"docs/runtime/text.md","budget":2560,"exports":["text","splitText","segment"],"compat":[["chars (grapheme clusters: emoji, combining marks, CJK)","yes","Intl.Segmenter when available, code points otherwise"],["words, whitespace preserved","yes",""],["lines (grouped by rendered position)","yes","wrapped in line spans for flat text; data-line on words inside nested markup"],["nested inline markup (a, em, strong…) kept","yes",""],["accessibility: aria-label + aria-hidden pieces, revert()","yes",""],["--i index custom property for CSS staggers","yes",""],["SSR / workers","partial","segment() is pure; splitText() needs a DOM"],["right-to-left line detection","partial","lines by vertical position (works for RTL; bidi runs not reordered)"]],"example":"import { use, tween } from 'motionary/runtime';\nimport { text, splitText } from 'motionary/runtime/text';\nuse(text);\nconst { chars } = splitText(document.querySelector('h1'), { type: 'chars,words' });\ntween(chars, { from: { y: '1em', opacity: 0 }, to: { y: '0em', opacity: 1 }, stagger: 30 });","optional":false,"stability":"stable","since":"10.3","changed":[]},{"kind":"runtime","id":"format-sprite","tier":"standard","label":"motionary/runtime/format-sprite","title":"Sprite sheets & image sequences","summary":"Play TexturePacker / Aseprite sprite sheets and numbered image sequences on a canvas or an element background, as runtime timelines (scrubbable).","install":"npm i motionary","importPath":"motionary/runtime/format-sprite","import":"import { use } from 'motionary/runtime';\nimport { formatSprite } from 'motionary/runtime/format-sprite';","register":"use(formatSprite);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-sprite.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-sprite.js","order":"Register the core first, then the module: use(formatSprite) also registers the core. CDN: load runtime.iife.js, then runtime/format-sprite.iife.js (it registers itself).","docs":"docs/runtime/format-sprite.md","budget":3072,"exports":["formatSprite","parseSpriteSheet","gridSheet","frameOrder","drawFrame","spritePlayer","imageSequence","preloadImages","sequencePlayer"],"compat":[["TexturePacker JSON (hash + array)","yes","trimmed (spriteSourceSize / sourceSize) and rotated frames"],["Aseprite JSON (hash + array), per-frame duration","yes",""],["Aseprite frameTags: forward / reverse / pingpong / pingpong_reverse","yes",""],["plain grid sheets","yes","gridSheet(cols, rows, w, h)"],["image sequences (frame_{0001}.webp)","yes","preloading, cover-fit drawing, scrub via progress"],["multipack (several atlas images)","no","load each sheet separately"],["Aseprite slices / layers","no","frames only"],["SSR / workers","partial","parsing is pure; players need a canvas (OffscreenCanvas works)"]],"example":"import { use } from 'motionary/runtime';\nimport { formatSprite, parseSpriteSheet, spritePlayer } from 'motionary/runtime/format-sprite';\nuse(formatSprite);\nconst sheet = parseSpriteSheet(await (await fetch('/slime.json')).json());\nconst img = new Image(); img.src = '/slime.png'; await img.decode();\nspritePlayer(document.querySelector('canvas'), sheet, img, { tag: 'bounce' });","optional":false,"stability":"stable","since":"10.3","changed":[]},{"kind":"runtime","id":"smooth","tier":"standard","label":"motionary/runtime/smooth","title":"Smooth scrolling","summary":"Smooth, inertial wheel scrolling (lerp or fixed-duration glide) for the window or any scroll container, anchor links that glide, off under prefers-reduced-motion; real scroll events keep scroll scenes and observers working.","install":"npm i motionary","importPath":"motionary/runtime/smooth","import":"import { use } from 'motionary/runtime';\nimport { smooth } from 'motionary/runtime/smooth';","register":"use(smooth);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/smooth.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/smooth.js","order":"Register the core first, then the module: use(smooth) also registers the core. CDN: load runtime.iife.js, then runtime/smooth.iife.js (it registers itself).","docs":"docs/runtime/smooth.md","budget":3584,"exports":["smooth","smoothScroll","SmoothScroll","allSmooth"],"compat":[["wheel / trackpad smoothing (lerp, or duration + ease)","yes","frame-rate independent"],["window and scroll containers (wrapper), vertical / horizontal","yes",""],["keyboard, scrollbar, find-in-page, assistive tech","yes","stay native; the smoothed target follows them"],["touch","partial","native momentum by default; touch: true smooths it"],["anchor links (#id) with offset, focus moved, URL hash kept","yes",""],["nested scrollables, [data-smooth-ignore], ctrl+wheel zoom","yes","left native"],["prefers-reduced-motion","yes","disabled while it matches (re-enabled live)"],["scroll scenes / IntersectionObserver / CSS scroll timelines","yes","real scroll events still fire"],["SSR / workers","partial","import is safe; smoothScroll() needs a browser"]],"example":"import { use } from 'motionary/runtime';\nimport { smooth, smoothScroll } from 'motionary/runtime/smooth';\nuse(smooth);\nconst s = smoothScroll({ lerp: 0.1, anchors: { offset: -64 } });\ns.scrollTo('#pricing');","optional":false,"stability":"stable","since":"10.4","changed":[]},{"kind":"runtime","id":"format-gif","tier":"standard","label":"motionary/runtime/format-gif","title":"GIF decoder","summary":"Decode animated GIFs (own LZW decoder, no DOM) into composited RGBA frames and play / scrub / reverse them on a canvas as a runtime timeline.","install":"npm i motionary","importPath":"motionary/runtime/format-gif","import":"import { use } from 'motionary/runtime';\nimport { formatGif } from 'motionary/runtime/format-gif';","register":"use(formatGif);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-gif.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-gif.js","order":"Register the core first, then the module: use(formatGif) also registers the core. CDN: load runtime.iife.js, then runtime/format-gif.iife.js (it registers itself).","docs":"docs/runtime/format-gif.md","budget":3072,"exports":["formatGif","decodeGif","loadGif","lzwDecode","animatedImagePlayer"],"compat":[["GIF87a / GIF89a","yes",""],["global + local palettes, transparency","yes",""],["interlaced frames","yes","4-pass row order"],["disposal 0–3 (none / keep / background / previous)","yes","background clears to transparent, like browsers"],["frame delays, NETSCAPE2.0 / ANIMEXTS loop count","yes","delays ≤ 10 ms play at 100 ms, like browsers"],["truncated files","partial","decodes what is there"],["plain-text extension","no","ignored (browsers ignore it too)"],["SSR / workers","yes","decoding is pure; the player needs a (Offscreen)Canvas"]],"example":"import { use } from 'motionary/runtime';\nimport { formatGif, loadGif, animatedImagePlayer } from 'motionary/runtime/format-gif';\nuse(formatGif);\nconst gif = await loadGif('/loader.gif');\nconst player = animatedImagePlayer(document.querySelector('canvas'), gif);\nplayer.pause(); player.progress = 0.5; // scrub","optional":false,"stability":"stable","since":"10.4","changed":[]},{"kind":"runtime","id":"format-apng","tier":"standard","label":"motionary/runtime/format-apng","title":"APNG loader","summary":"Split animated PNGs into standalone frame PNGs (decoded by the browser), composite them (dispose / blend) and play them on a canvas as a runtime timeline.","install":"npm i motionary","importPath":"motionary/runtime/format-apng","import":"import { use } from 'motionary/runtime';\nimport { formatApng } from 'motionary/runtime/format-apng';","register":"use(formatApng);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-apng.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-apng.js","order":"Register the core first, then the module: use(formatApng) also registers the core. CDN: load runtime.iife.js, then runtime/format-apng.iife.js (it registers itself).","docs":"docs/runtime/format-apng.md","budget":3072,"exports":["formatApng","parseApng","apngFramePngs","decodeApng","loadApng","animatedImagePlayer"],"compat":[["acTL / fcTL / fdAT, frame offsets and delays","yes",""],["dispose_op none / background / previous","yes","first-frame previous → background (spec)"],["blend_op source / over","yes",""],["hidden default image (IDAT not part of the animation)","yes",""],["palette / tRNS / gAMA / iCCP / sRGB / sBIT copied into frames","yes",""],["plain (non-animated) PNG","yes","one frame"],["decoding","yes","the browser's PNG decoder (createImageBitmap), or your own { decode }"],["SSR / workers","partial","parsing is pure; decoding needs createImageBitmap (workers OK) or { decode }"]],"example":"import { use } from 'motionary/runtime';\nimport { formatApng, loadApng, animatedImagePlayer } from 'motionary/runtime/format-apng';\nuse(formatApng);\nconst anim = await loadApng('/sticker.png');\nanimatedImagePlayer(document.querySelector('canvas'), anim);","optional":false,"stability":"stable","since":"10.4","changed":[]},{"kind":"runtime","id":"format-webp","tier":"standard","label":"motionary/runtime/format-webp","title":"Animated WebP loader","summary":"Split animated WebP files (ANIM / ANMF) into standalone frames (decoded by the browser), composite them (blend / dispose) and play them on a canvas as a runtime timeline.","install":"npm i motionary","importPath":"motionary/runtime/format-webp","import":"import { use } from 'motionary/runtime';\nimport { formatWebp } from 'motionary/runtime/format-webp';","register":"use(formatWebp);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-webp.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-webp.js","order":"Register the core first, then the module: use(formatWebp) also registers the core. CDN: load runtime.iife.js, then runtime/format-webp.iife.js (it registers itself).","docs":"docs/runtime/format-webp.md","budget":3072,"exports":["formatWebp","parseWebp","webpFrameFiles","decodeWebp","loadWebp","animatedImagePlayer"],"compat":[["VP8X + ANIM + ANMF frames, offsets, durations, loop count","yes",""],["lossy (VP8) with alpha (ALPH) and lossless (VP8L) frames","yes","lossy + alpha frames get their own VP8X header"],["blending on / off, dispose none / background","yes","composited on transparent, like browsers"],["still WebP (simple and extended)","yes","one frame"],["ICC / EXIF / XMP metadata","no","ignored"],["browsers without WebP decoding","no","fall back to <img>"],["SSR / workers","partial","parsing is pure; decoding needs createImageBitmap (workers OK) or { decode }"]],"example":"import { use } from 'motionary/runtime';\nimport { formatWebp, loadWebp, animatedImagePlayer } from 'motionary/runtime/format-webp';\nuse(formatWebp);\nconst anim = await loadWebp('/hero.webp');\nconst p = animatedImagePlayer(document.querySelector('canvas'), anim, { speed: 0.5 });","optional":false,"stability":"stable","since":"10.4","changed":[]},{"kind":"runtime","id":"gl","tier":"advanced","label":"motionary/runtime/gl","title":"WebGL2 scene renderer","summary":"A small WebGL2 renderer with its own API: scene graph, camera, lights, box / plane / sphere / torus, PBR-style materials, shader materials, image and video textures, orbit controls — not a Three.js clone.","install":"npm i motionary","importPath":"motionary/runtime/gl","import":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';","register":"use(gl);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gl.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gl.js","order":"Register the core first, then the module: use(gl) also registers the core. CDN: load runtime.iife.js, then runtime/gl.iife.js (it registers itself).","docs":"docs/runtime/gl.md","budget":9216,"exports":["gl","createRenderer","Scene","Camera","GlNode","box","plane","sphere","torus","standardMaterial","unlitMaterial","shaderMaterial","texture","orbitControls","frameNode","bounds","scrubVideo","mat4","quatFromEuler","quatSlerp"],"compat":[["scene graph: nodes, TRS / matrix, hierarchy, bounds, frameNode()","yes",""],["perspective camera, orbit controls (drag / wheel / pinch / arrow keys)","yes","auto-rotate off under reduced motion"],["ambient + up to 4 directional / point lights","yes",""],["standard material (metallic-roughness approximation), unlit, shader","yes","sRGB in/out, Reinhard tone mapping"],["image / canvas / ImageBitmap / raw RGBA textures, mipmaps (power of two)","yes",""],["video textures (MP4 / WebM), scroll-scrubbed video (scrubVideo)","yes","requestVideoFrameCallback; codecs depend on the browser"],["shadows, normal / occlusion / metallic-roughness maps, IBL","no","planned work beyond 11.0"],["WebGL1 / no WebGL2","no","createRenderer() throws a clear error"],["SSR / workers","partial","math / geometry / scene graph are pure; rendering needs WebGL2 (OffscreenCanvas works)"]],"example":"import { use } from 'motionary/runtime';\nimport { gl, createRenderer, Scene, Camera, GlNode, torus, standardMaterial } from 'motionary/runtime/gl';\nuse(gl);\nconst r = createRenderer(canvas);\nconst scene = new Scene();\nscene.add(new GlNode('donut', { geometry: torus(), material: standardMaterial({ color: [0.5, 0.55, 1, 1] }) }));\nr.resize(); r.render(scene, new Camera({ position: [0, 0.5, 3] }));","optional":false,"stability":"stable","since":"10.5","changed":["10.8","10.9"]},{"kind":"runtime","id":"format-gltf","tier":"advanced","label":"motionary/runtime/format-gltf","title":"glTF 2.0 / GLB loader","summary":"Load glTF 2.0 (.gltf with external or data: buffers, .glb) into motionary/runtime/gl nodes: node hierarchy, meshes, PBR metallic-roughness materials, embedded / external images.","install":"npm i motionary","importPath":"motionary/runtime/format-gltf","import":"import { use } from 'motionary/runtime';\nimport { formatGltf } from 'motionary/runtime/format-gltf';","register":"use(formatGltf);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-gltf.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-gltf.js","order":"Register the core first, then the module: use(formatGltf) also registers the core. CDN: load runtime.iife.js, then runtime/format-gltf.iife.js (it registers itself).","docs":"docs/runtime/format-gltf.md","budget":6144,"exports":["formatGltf","loadGltf","parseGlb","gltfToNode","readAccessor","SUPPORTED_EXTENSIONS"],"compat":[[".gltf (external + data: URI buffers / images) and .glb","yes",""],["scenes, node hierarchy, TRS and matrix transforms","yes",""],["POSITION / NORMAL / TEXCOORD_0, indices, all component types, normalised ints, byteStride","yes","missing normals computed (flat)"],["primitive modes points / lines / triangles / strips / fans","yes","strips and fans converted to triangles"],["PBR metallic-roughness factors, base colour texture, emissive, alpha blend, double-sided","yes","KHR_materials_emissive_strength, KHR_materials_unlit"],["skins, morph targets, animations","yes","data kept on the nodes / geometry; played by motionary/runtime/gltf-anim (10.8)"],["sparse accessors","yes","10.8"],["Draco / KTX2 (Basis) compression","yes","10.9: through the official decoders (draco3d, Basis Universal transcoder) — motionary/runtime/gltf-decoders + <usa-gl-model>"],["meshopt compression (EXT_meshopt_compression)","no","files that require it fail with a clear error"],["cameras, KHR_lights_punctual, texture transforms","no","ignored"],["SSR / workers","partial","parseGlb / gltfToNode are pure; loadGltf decodes images with createImageBitmap"]],"example":"import { use } from 'motionary/runtime';\nimport { gl, createRenderer, Scene, Camera, frameNode } from 'motionary/runtime/gl';\nimport { formatGltf, loadGltf } from 'motionary/runtime/format-gltf';\nuse(gl, formatGltf);\nconst model = await loadGltf('/models/chair.glb');\nconst scene = new Scene().add(model), cam = new Camera();\nframeNode(cam, model);\nconst r = createRenderer(canvas); r.resize(); r.render(scene, cam);","optional":false,"stability":"stable","since":"10.5","changed":["10.8"]},{"kind":"runtime","id":"format-obj","tier":"advanced","label":"motionary/runtime/format-obj","title":"OBJ / MTL loader","summary":"Load Wavefront OBJ (+ MTL materials and diffuse textures) into motionary/runtime/gl nodes: polygons triangulated, groups, per-material meshes.","install":"npm i motionary","importPath":"motionary/runtime/format-obj","import":"import { use } from 'motionary/runtime';\nimport { formatObj } from 'motionary/runtime/format-obj';","register":"use(formatObj);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-obj.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-obj.js","order":"Register the core first, then the module: use(formatObj) also registers the core. CDN: load runtime.iife.js, then runtime/format-obj.iife.js (it registers itself).","docs":"docs/runtime/format-obj.md","budget":3072,"exports":["formatObj","loadObj","parseObj","parseMtl","objToNode","objMaterial"],"compat":[["v / vt / vn, faces with any vertex count (fan-triangulated), negative indices","yes",""],["o / g groups, usemtl (one mesh per material), mtllib","yes",""],["MTL Kd, Ks + Ns (→ roughness), Ke, d / Tr, map_Kd (options stripped)","yes",""],["missing normals","yes","computed (flat)"],["smoothing groups (s), lines (l), free-form curves / surfaces","no","ignored"],["bump / normal / specular maps, PBR MTL extensions","no","ignored"],["SSR / workers","partial","parsing is pure; loadObj fetches files and decodes textures with createImageBitmap"]],"example":"import { use } from 'motionary/runtime';\nimport { gl, Scene } from 'motionary/runtime/gl';\nimport { formatObj, loadObj } from 'motionary/runtime/format-obj';\nuse(gl, formatObj);\nconst cube = await loadObj('/models/cube.obj'); // + cube.mtl + textures next to it\nnew Scene().add(cube);","optional":false,"stability":"stable","since":"10.5","changed":[]},{"kind":"runtime","id":"vector","tier":"standard","label":"motionary/runtime/vector","title":"Lottie + dotLottie player","summary":"Plays Lottie (bodymovin JSON) and dotLottie (.lottie) files on Canvas 2D with Motionary’s own renderer (no lottie-web code): shapes, gradients, trim paths, masks, track mattes, precomps, images; a runtime timeline you can seek, reverse and scrub.","install":"npm i motionary","importPath":"motionary/runtime/vector","import":"import { use } from 'motionary/runtime';\nimport { vector } from 'motionary/runtime/vector';","register":"use(vector);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/vector.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/vector.js","order":"Register the core first, then the module: use(vector) also registers the core. CDN: load runtime.iife.js, then runtime/vector.iife.js (it registers itself).","docs":"docs/runtime/vector.md","budget":12288,"exports":["vector","evalExpression","loadLottie","parseDotLottie","unzipEntries","lottiePlayer","renderLottieFrame","inspectLottie","propValue","transformAt","trimContours","loadLottieImages"],"compat":[["shape, solid, null, image and precomp layers; parenting; in / out points","yes","precomp time stretch + time remap"],["transforms: anchor, position (split X / Y, spatial bezier), scale, rotation, skew, opacity","yes",""],["paths, rectangles (rounded), ellipses, stars / polygons, groups","yes",""],["fills (non-zero / even-odd), strokes (caps, joins, dashes)","yes",""],["linear + radial gradient fills / strokes","yes","highlight length / angle ignored"],["trim paths (individually / simultaneously)","yes",""],["masks: add, subtract, intersect, inverted, opacity","yes",""],["track mattes: alpha, alpha inverted","yes","luma mattes approximated by alpha"],["keyframes: per-dimension bezier easing, hold keyframes, v4 + v5 files","yes",""],["dotLottie (.lottie): stored + deflate entries, manifest v1 / v2, several animations, embedded images","yes","deflate needs the native DecompressionStream"],["dotLottie themes + state machines","yes","10.9: motionary/runtime/lottie-state + <usa-dotlottie> (subset)"],["markers → named segments","yes",""],["text layers: fonts by family + style, justification, tracking, line height, fill / stroke, box text (wrapping), source-text keyframes","yes","10.8; system / page fonts (glyph outlines in chars are not used); text animators not supported"],["expressions: time, value, wiggle, loopOut / loopIn (cycle, pingpong, offset, continue), linear / ease, valueAtTime, Math, arithmetic, var / $bm_rt","yes","10.8 subset, own interpreter (no eval; CSP-safe); other expressions keep the keyframed value and are listed by inspectLottie()"],["3D layers, layer effects, merge paths, repeaters","no","listed by inspectLottie() / el.unsupported"],["dotLottie themes / state machines","no","planned for 10.9 (subset)"],["SSR / workers","partial","parsing + unzip are pure; rendering needs a 2D canvas (OffscreenCanvas works)"]],"example":"import { use } from 'motionary/runtime';\nimport { vector, loadLottie, lottiePlayer } from 'motionary/runtime/vector';\nuse(vector);\nconst { animation } = await loadLottie('/anim/hero.lottie');\nconst player = lottiePlayer(canvas, animation, { loop: true });\nplayer.play();","optional":false,"stability":"stable","since":"10.6","changed":["10.8","10.9","11.0"]},{"tier":"standard","kind":"peer","id":"rive","label":"@rive-app/canvas","title":"Official Rive runtime","summary":"The official MIT-licensed Rive runtime, used by <usa-rive> to play .riv files (artboards, animations, state machines with inputs). Optional peer dependency: lazy-loaded on first use, never bundled into Motionary.","install":"npm i @rive-app/canvas","importPath":"@rive-app/canvas","import":"import { provideRiveRuntime } from 'motionary/components/widgets';","register":"provideRiveRuntime(() => import('@rive-app/canvas')); // lazy: fetched when the first <usa-rive> mounts","cdn":"<script src=\"https://unpkg.com/@rive-app/canvas@2.44.1/rive.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/@rive-app/canvas@2.44.1/+esm","order":"Install the official runtime next to motionary, then hand <usa-rive> a lazy loader with provideRiveRuntime(() => import('@rive-app/canvas')) before the element mounts — your bundler splits the runtime into its own chunk, fetched only when the first <usa-rive> appears. Without a bundler: load the official rive.js from a CDN before the component bundles (window.rive), use an import map, or set runtime-src on the element. Missing → a clear message in place + usa:runtime-missing.","why":".riv is Rive’s proprietary binary format with a state-machine runtime; the official runtime is the only faithful player, so Motionary does not reimplement it","docs":"docs/runtime/rive.md","budget":0,"exports":["provideRiveRuntime","loadRiveRuntime","RIVE_PEER","RIVE_CDN"],"compat":[[".riv files: artboards, linear animations","yes","played by the official runtime"],["state machines + inputs (boolean, number, trigger)","yes","el.input(name)"],["fit: contain, cover, fill, fitWidth, fitHeight, none","yes",""],["lazy loading, clear error when the runtime is missing","yes","usa:runtime-missing"],["reduced motion","yes","no autoplay (first frame)"],["WebGL2 renderer (@rive-app/webgl2)","partial","pass its URL as runtime-src or provideRiveRuntime(() => import('@rive-app/webgl2'))"],["SSR","yes","nothing loads until the element mounts in a browser"]],"example":"// npm i @rive-app/canvas\nimport { defineRive } from 'motionary/components/widgets';\ndefineRive();\n// <usa-rive src=\"/anim/icon.riv\" state-machine=\"State Machine 1\" autoplay></usa-rive>","optional":true,"stability":"stable","since":"10.6","changed":["10.7","13.7"]},{"kind":"runtime","id":"physics","tier":"advanced","label":"motionary/runtime/physics","title":"2D rigid-body physics","summary":"A small 2D rigid-body engine written for Motionary (own implementation and API — no Matter.js / Box2D code): circles, boxes and convex polygons, mass from density, restitution, friction, sensors, collision groups, sleeping, distance / spring / pin constraints, pointer drag, a fixed time step on the shared ticker.","install":"npm i motionary","importPath":"motionary/runtime/physics","import":"import { use } from 'motionary/runtime';\nimport { physics } from 'motionary/runtime/physics';","register":"use(physics);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/physics.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/physics.js","order":"Register the core first, then the module: use(physics) also registers the core. CDN: load runtime.iife.js, then runtime/physics.iife.js (it registers itself).","docs":"docs/runtime/physics.md","budget":10240,"exports":["physics","createWorld","World","Body","Constraint","collide","dragConstraint"],"compat":[["bodies: circle, box, convex polygon (any winding, made convex)","yes","concave shapes: split them into convex parts"],["static, dynamic and kinematic bodies; density / mass, inertia, fixed rotation","yes",""],["collisions: sort-and-sweep broad phase, SAT narrow phase, up to 2 contact points","yes","no continuous collision detection: very fast small bodies can tunnel"],["restitution, Coulomb friction, warm-started accumulated impulses","yes",""],["constraints: distance (rigid or spring with stiffness / damping), pin, pointer drag","yes","no revolute motors / joint limits"],["sensors, collision categories / masks, collision events, sleeping","yes",""],["fixed time step + accumulator (same result at any frame rate)","yes",""],["SSR / workers","yes","pure maths; world.run() needs the runtime ticker"]],"example":"import { use } from 'motionary/runtime';\nimport { physics, createWorld } from 'motionary/runtime/physics';\nuse(physics);\nconst world = createWorld({ gravity: [0, 980] });\nworld.bounds(600, 400);\nconst ball = world.body({ shape: 'circle', x: 300, y: 40, radius: 20, restitution: 0.7 });\nworld.run(); // steps on the shared ticker","optional":false,"stability":"stable","since":"10.7","changed":[]},{"kind":"runtime","id":"format-scene","tier":"advanced","label":"motionary/runtime/format-scene","title":"Scene JSON (motionary-scene@1)","summary":"The versioned motionary-scene@1 format: a JSON description of a 2D physics scene (world, named materials, bodies, constraints, per-body style) — validate, migrate older drafts, load into a physics world and save one back.","install":"npm i motionary","importPath":"motionary/runtime/format-scene","import":"import { use } from 'motionary/runtime';\nimport { formatScene } from 'motionary/runtime/format-scene';","register":"use(formatScene);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-scene.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-scene.js","order":"Register the core first, then the module: use(formatScene) also registers the core. CDN: load runtime.iife.js, then runtime/format-scene.iife.js (it registers itself).","docs":"docs/runtime/format-scene.md","budget":3072,"exports":["formatScene","SCENE_FORMAT","migrateScene","validateScene","parseScene","sceneToWorld","worldToScene"],"compat":[["world: size, gravity, walls (with or without a top), solver iterations","yes",""],["named materials (restitution, friction, density), per-body overrides","yes",""],["bodies: circle / box / polygon, static / kinematic, velocity, angle, sensor, style","yes",""],["constraints: distance / spring / pin between bodies or to a world point","yes",""],["validation (lists every problem, never throws) + parseScene (throws one error)","yes",""],["migration: unversioned scenes and the motionary-scene@0 draft → @1, with a change list","yes",""],["save: worldToScene() (walls made by bounds() are left out)","yes",""]],"example":"import { use } from 'motionary/runtime';\nimport { physics } from 'motionary/runtime/physics';\nimport { formatScene, sceneToWorld } from 'motionary/runtime/format-scene';\nuse(physics, formatScene);\nconst { world, bodies } = sceneToWorld(await (await fetch('/scenes/stack.json')).json());\nworld.run();","optional":false,"stability":"stable","since":"10.7","changed":["14.9"]},{"kind":"runtime","id":"drag-snap","tier":"standard","label":"motionary/runtime/drag-snap","title":"Drag, inertia and snap points","summary":"Pointer drag along one axis with velocity tracking, inertial throws, rubber-band edges and spring-animated snap points on the shared ticker — the engine of <usa-snap-carousel>, usable for sheets, sliders and pickers (own implementation).","install":"npm i motionary","importPath":"motionary/runtime/drag-snap","import":"import { use } from 'motionary/runtime';\nimport { dragSnap } from 'motionary/runtime/drag-snap';","register":"use(dragSnap);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/drag-snap.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/drag-snap.js","order":"Register the core first, then the module: use(dragSnap) also registers the core. CDN: load runtime.iife.js, then runtime/drag-snap.iife.js (it registers itself).","docs":"docs/runtime/drag-snap.md","budget":4096,"exports":["dragSnap","createDragSnap","projectThrow","nearestSnap","rubberband","springStep","velocityTracker"],"compat":[["pointer, touch and pen (Pointer Events), drag threshold, pointer capture, touch-action for the other axis","yes","one axis per controller (x or y)"],["velocity from the last 100 ms, inertial throw with constant deceleration","yes","off under reduced motion"],["snap points: nearest to the projected throw, a fast flick moves at least one point","yes",""],["critically damped spring to the snap point (shared ticker)","yes","instant under reduced motion"],["bounds with rubber-band resistance","yes",""],["clicks inside are kept; the click that ends a drag is swallowed","yes",""],["free 2D dragging, scroll-linked snapping (CSS scroll-snap)","no","use two controllers / native scroll-snap"],["SSR / workers","partial","the maths (projectThrow, nearestSnap, rubberband, springStep, velocityTracker) is pure"]],"example":"import { use } from 'motionary/runtime';\nimport { dragSnap, createDragSnap } from 'motionary/runtime/drag-snap';\nuse(dragSnap);\nconst track = document.querySelector('.track');\nconst ds = createDragSnap(track, { axis: 'x', snap: [0, -320, -640], onUpdate: (x) => (track.style.transform = `translateX(${x}px)`) });\nds.snapTo(1);","optional":false,"stability":"stable","since":"10.8","changed":["12.4"]},{"kind":"runtime","id":"gltf-anim","tier":"advanced","label":"motionary/runtime/gltf-anim","title":"glTF animation, skinning and morph targets","summary":"Plays glTF 2.0 animations on models loaded by motionary/runtime/format-gltf: translation / rotation / scale / weights channels with LINEAR, STEP and CUBICSPLINE samplers, skins (4 joints per vertex) and morph targets, deformed on the CPU and re-uploaded to motionary/runtime/gl (own implementation).","install":"npm i motionary","importPath":"motionary/runtime/gltf-anim","import":"import { use } from 'motionary/runtime';\nimport { gltfAnim } from 'motionary/runtime/gltf-anim';","register":"use(gltfAnim);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gltf-anim.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gltf-anim.js","order":"Register the core first, then the module: use(gltfAnim) also registers the core. CDN: load runtime.iife.js, then runtime/gltf-anim.iife.js (it registers itself).","docs":"docs/runtime/gltf-anim.md","budget":4608,"exports":["gltfAnim","gltfAnimator","gltfClips","sampleChannel","applyClip","deformModel","deformGeometry"],"compat":[["animation channels: translation, rotation, scale, weights","yes","KHR_animation_pointer is ignored"],["samplers: LINEAR (quaternions slerped), STEP, CUBICSPLINE (Hermite, in / out tangents)","yes",""],["skins: joint hierarchy, inverse bind matrices, JOINTS_0 / WEIGHTS_0 (4 influences)","yes","CPU skinning; JOINTS_1 / WEIGHTS_1 (8 influences) not used"],["morph targets: POSITION + NORMAL deltas, mesh / node default weights, animated weights","yes","TANGENT / TEXCOORD / COLOR targets ignored"],["sparse accessors (common for morph targets)","yes","read by format-gltf"],["clip player: by name or index, loop, speed, seek, update(dt) or the shared ticker","yes","one clip at a time (no blending)"],["GPU skinning, animation blending / cross-fades, a mesh shared by several skinned nodes","no","planned work beyond 11.0"],["SSR / workers","yes","sampling and deformation are pure; play() needs the runtime ticker"]],"example":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';\nimport { formatGltf, loadGltf } from 'motionary/runtime/format-gltf';\nimport { gltfAnim, gltfAnimator } from 'motionary/runtime/gltf-anim';\nuse(gl, formatGltf, gltfAnim);\nconst model = await loadGltf('/models/robot.glb');\nconst anim = gltfAnimator(model, { clip: 'walk' });\nanim.play(); // or anim.update(dt) in your own loop","optional":false,"stability":"stable","since":"10.8","changed":[]},{"kind":"runtime","id":"lottie-state","tier":"standard","label":"motionary/runtime/lottie-state","title":"dotLottie themes + state machines","summary":"Resolves Lottie slots with dotLottie themes (Color / Scalar / Vector / Text rules, static or keyframed) and runs a subset of dotLottie state machines (playback states, Event / Numeric / String / Boolean guards, pointer + completion interactions, input / theme / frame actions) for motionary/runtime/vector — own implementation, used by <usa-dotlottie>.","install":"npm i motionary","importPath":"motionary/runtime/lottie-state","import":"import { use } from 'motionary/runtime';\nimport { lottieState } from 'motionary/runtime/lottie-state';","register":"use(lottieState);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/lottie-state.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/lottie-state.js","order":"Register the core first, then the module: use(lottieState) also registers the core. CDN: load runtime.iife.js, then runtime/lottie-state.iife.js (it registers itself).","docs":"docs/runtime/lottie-state.md","budget":3584,"exports":["lottieState","applyTheme","ruleProp","createStateMachine","inspectStateMachine","compare"],"compat":[["themes: slots (\"sid\") + the animation’s default slot values","yes",""],["theme rules: Color, Scalar, Vector / Position, Text; static value or keyframes; per-animation rules","yes","Image rules are ignored"],["state machines: initial state, PlaybackState (animation, autoplay, loop, speed, mode, marker segment), GlobalState transitions","yes","subset"],["guards: Numeric / String / Boolean (Equal, NotEqual, GreaterThan(OrEqual), LessThan(OrEqual)), Event","yes",""],["interactions: PointerDown / Up / Enter / Exit, Click, OnComplete (+ keyboard Enter / Space in <usa-dotlottie>)","yes","layerName hit-testing is not done: layer-bound interactions fire for the whole canvas"],["actions: Fire, Set*, Toggle, Increment, Decrement, Reset, SetTheme, SetFrame, SetProgress, FireCustomEvent","yes",""],["OpenUrl, blend / tweened transitions, pointer position inputs","no","OpenUrl is refused on purpose (a file must not navigate the page); listed by inspectStateMachine()"],["SSR / workers","yes","pure data + logic"]],"example":"import { use } from 'motionary/runtime';\nimport { vector, loadLottie } from 'motionary/runtime/vector';\nimport { lottieState, applyTheme, createStateMachine } from 'motionary/runtime/lottie-state';\nuse(vector, lottieState);\nconst { animation, dotLottie } = await loadLottie('/anim/button.lottie');\nconst themed = applyTheme(animation, dotLottie.themes.dark);\nconst sm = createStateMachine(dotLottie.stateMachines.toggle, { onState: (s) => console.log(s.name) });\nsm.fire('tap');","optional":false,"stability":"stable","since":"10.9","changed":[]},{"kind":"runtime","id":"gltf-decoders","tier":"advanced","label":"motionary/runtime/gltf-decoders","title":"glTF decoder hooks (Draco, KTX2)","summary":"Lets motionary/runtime/format-gltf load KHR_draco_mesh_compression meshes and KHR_texture_basisu (KTX2) textures through the official decoders — Google draco3d and the Basis Universal transcoder — registered as lazy loaders; Motionary does not reimplement them.","install":"npm i motionary","importPath":"motionary/runtime/gltf-decoders","import":"import { use } from 'motionary/runtime';\nimport { gltfDecoders } from 'motionary/runtime/gltf-decoders';","register":"use(gltfDecoders);","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gltf-decoders.iife.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gltf-decoders.js","order":"Register the core first, then the module: use(gltfDecoders) also registers the core. CDN: load runtime.iife.js, then runtime/gltf-decoders.iife.js (it registers itself).","docs":"docs/runtime/gltf-decoders.md","budget":3072,"exports":["gltfDecoders","provideGltfDecoder","providedDecoders","prepareGltf","decodeDraco","transcodeKtx2","DECODER_EXTENSIONS"],"compat":[["KHR_draco_mesh_compression (POSITION, NORMAL, TEXCOORD_0, JOINTS / WEIGHTS …, indices)","yes","decoded by the official draco3d decoder (optional peer)"],["KHR_texture_basisu (KTX2 / Basis Universal ETC1S + UASTC)","yes","transcoded to RGBA8 by the official Basis Universal transcoder (optional peer); GPU-compressed upload is not used"],["lazy loading: a decoder is fetched only when a file needs it","yes","provideGltfDecoder(kind, loader)"],["missing decoder","yes","clear error naming the extension, the package and the provide line"],["EXT_meshopt_compression, KHR_mesh_quantization","no","files that require them fail with a clear error"],["SSR / workers","partial","Draco decoding works in Node / workers; KTX2 images need ImageData (or the raw RGBA)"]],"example":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';\nimport { formatGltf, loadGltf } from 'motionary/runtime/format-gltf';\nimport { gltfDecoders, provideGltfDecoder, prepareGltf } from 'motionary/runtime/gltf-decoders';\nuse(gl, formatGltf, gltfDecoders);\nprovideGltfDecoder('draco', () => import('draco3d'));\nconst model = await loadGltf('/models/robot-draco.glb', { prepare: prepareGltf });","optional":false,"stability":"stable","since":"10.9","changed":[]},{"tier":"advanced","kind":"peer","id":"draco3d","label":"draco3d","title":"Official Draco decoder (Google)","summary":"Google’s official Draco geometry decoder (Apache-2.0, WASM / JS), used by motionary/runtime/gltf-decoders for KHR_draco_mesh_compression meshes. Optional peer dependency: lazy-loaded when the first Draco file is opened, never bundled into Motionary.","install":"npm i draco3d","importPath":"draco3d","import":"import { provideGltfDecoder } from 'motionary/runtime/gltf-decoders';","register":"provideGltfDecoder('draco', () => import('draco3d')); // lazy: fetched when the first Draco-compressed model loads","cdn":"<script src=\"https://www.gstatic.com/draco/versioned/decoders/1.5.7/draco_decoder.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/npm/draco3d@1.5.7/+esm","order":"Install draco3d next to motionary, then register the lazy loader with provideGltfDecoder('draco', () => import('draco3d')) before a compressed model loads. Without a bundler: load Google’s draco_decoder.js from gstatic (window.DracoDecoderModule) and provideGltfDecoder('draco', () => window.DracoDecoderModule). Missing → a clear error naming the extension and this line.","why":"Draco is a specialised geometry codec with a large reference decoder (WASM); the official decoder is the only safe, maintained implementation, so Motionary does not reimplement it","docs":"docs/runtime/draco3d.md","budget":0,"exports":["provideGltfDecoder"],"compat":[["Draco meshes in glTF (KHR_draco_mesh_compression)","yes","decoded by draco3d 1.5.x"],["point clouds","no","triangle meshes only"]],"example":"import { provideGltfDecoder } from 'motionary/runtime/gltf-decoders';\nprovideGltfDecoder('draco', () => import('draco3d'));","optional":true,"stability":"stable","since":"10.9","changed":[]},{"tier":"advanced","kind":"peer","id":"basis-transcoder","label":"basis_transcoder.js","title":"Official Basis Universal transcoder (Binomial)","summary":"Binomial’s official Basis Universal transcoder (Apache-2.0, basis_transcoder.js + .wasm from the basis_universal repository), used by motionary/runtime/gltf-decoders for KHR_texture_basisu (KTX2) textures. Optional: lazy-loaded when the first KTX2 texture is decoded, never bundled into Motionary.","install":"curl -LO https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.js -LO https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.wasm","importPath":"basis_transcoder.js","import":"import { provideGltfDecoder } from 'motionary/runtime/gltf-decoders';","register":"provideGltfDecoder('ktx2', () => import('/vendor/basis_transcoder.js').then((m) => m.default || window.BASIS)); // lazy: fetched with the first KTX2 texture","cdn":"<script src=\"https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.js\"></script>","cdnEsm":"https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.js","order":"The transcoder is not published on npm by Binomial: copy basis_transcoder.js + basis_transcoder.wasm (same folder) into your static files, then provideGltfDecoder('ktx2', …) before a KTX2 model loads; or load it from the CDN (window.BASIS) and provideGltfDecoder('ktx2', () => window.BASIS). Missing → a clear error naming the extension and this line.","why":"KTX2 / Basis Universal is a supercompressed GPU texture format with a complex reference transcoder; the official transcoder is the only safe implementation, so Motionary does not reimplement it","docs":"docs/runtime/basis-transcoder.md","budget":0,"exports":["provideGltfDecoder"],"compat":[["KTX2 textures (ETC1S / UASTC) in glTF (KHR_texture_basisu)","yes","transcoded to RGBA8"],["standalone .basis / .ktx2 files outside glTF","no","use the transcoder directly"]],"example":"import { provideGltfDecoder } from 'motionary/runtime/gltf-decoders';\nprovideGltfDecoder('ktx2', () => window.BASIS);","optional":true,"stability":"stable","since":"10.9","changed":[]}],"components":[{"id":"accordion","tag":"usa-accordion","title":"Accordion","description":"Smooth expand / collapse for native <details> — semantics, keyboard and find-in-page kept; no wrapper elements.","category":"transitions","since":"2.2","keywords":["<details>","height"],"import":{"path":"motionary/components/transitions","define":"defineAccordion","register":"defineAccordion();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["multiple","duration"],"events":["usa:toggle"],"slots":[],"methods":["toggleItem"],"example":"<usa-accordion>\n  <details><summary>Shipping</summary><p>…</p></details>\n  <details><summary>Returns</summary><p>…</p></details>\n</usa-accordion>","esm":"import { defineAccordion } from 'motionary/components/transitions';\n\ndefineAccordion(); // registers <usa-accordion>\n\n/* then use it in your HTML:\n<usa-accordion>\n  <details><summary>Shipping</summary><p>…</p></details>\n  <details><summary>Returns</summary><p>…</p></details>\n</usa-accordion>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/transitions/accordion.ts","changed":[]},{"id":"acrylic","tag":"usa-acrylic","title":"Acrylic & Mica","description":"Windows Fluent materials: frosted acrylic (backdrop blur + tint + noise) and mica. Solid fallback when transparency is reduced.","category":"background","since":"2.2","keywords":["Fluent","Windows","backdrop-filter"],"import":{"path":"motionary/components/background","define":"defineAcrylic","register":"defineAcrylic();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["tint","tint-opacity","blur","shimmer"],"events":[],"slots":[],"methods":[],"example":"<usa-acrylic shimmer=\"hover\">\n  <nav>…</nav>\n</usa-acrylic>\n<usa-acrylic kind=\"mica\">…</usa-acrylic>","esm":"import { defineAcrylic } from 'motionary/components/background';\n\ndefineAcrylic(); // registers <usa-acrylic>\n\n/* then use it in your HTML:\n<usa-acrylic shimmer=\"hover\">\n  <nav>…</nav>\n</usa-acrylic>\n<usa-acrylic kind=\"mica\">…</usa-acrylic>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/acrylic.ts","changed":["2.9","3.0"]},{"id":"add-to-cart","tag":"usa-add-to-cart","title":"Add to cart (fly-to-cart)","description":"7.3: a buy button — the product photo flies on an arc into the cart, the cart badge bumps and the button morphs into a ✓ “Added” state. Works with <usa-cart-drawer> (calls add(item)) or any [data-cart] icon.","category":"ui","since":"7.3","keywords":["cart","shop","ecommerce","fly","button"],"import":{"path":"motionary/components/widgets","define":"defineAddToCart","register":"defineAddToCart();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","added","item","cart","from","hold"],"events":["usa:add"],"slots":[],"methods":["add"],"example":"<usa-cart-drawer id=\"cart\"></usa-cart-drawer>\n<div data-product>\n  <img src=\"shoe.jpg\" alt=\"Sneaker\">\n  <usa-add-to-cart cart=\"#cart\" item='{\"name\":\"Sneaker\",\"price\":89}'></usa-add-to-cart>\n</div>","esm":"import { defineAddToCart } from 'motionary/components/widgets';\n\ndefineAddToCart(); // registers <usa-add-to-cart>\n\n/* then use it in your HTML:\n<usa-cart-drawer id=\"cart\"></usa-cart-drawer>\n<div data-product>\n  <img src=\"shoe.jpg\" alt=\"Sneaker\">\n  <usa-add-to-cart cart=\"#cart\" item='{\"name\":\"Sneaker\",\"price\":89}'></usa-add-to-cart>\n</div>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/add-to-cart","stability":"stable","deprecated":null,"source":"src/components/widgets/add-to-cart.ts","changed":["13.1"]},{"id":"ambient","tag":"usa-ambient","title":"Ambient layer","description":"A fixed page-wide layer: drifting particles, falling snow, twinkling stars, film grain or a gradient that shifts with scroll.","category":"page","since":"2.7","keywords":["snow","stars","noise","gradient"],"import":{"path":"motionary/components/page","define":"defineAmbient","register":"defineAmbient();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","density","color","opacity","speed"],"events":[],"slots":[],"methods":["mount","upd","resize","resize","draw","draw","unmount","caf"],"example":"<usa-ambient effect=\"snow\" density=\"1.2\"></usa-ambient>","esm":"import { defineAmbient } from 'motionary/components/page';\n\ndefineAmbient(); // registers <usa-ambient>\n\n/* then use it in your HTML:\n<usa-ambient effect=\"snow\" density=\"1.2\"></usa-ambient>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/ambient.ts","changed":[]},{"id":"anim-icon","tag":"usa-anim-icon","title":"Animated icons","description":"Stroke icons that move: the bell rings, the heart beats, the check draws, the gear turns. Hover, click, in view or loop; decorative unless labelled.","category":"svg","since":"3.3","keywords":["icon","bell","heart","micro-interaction"],"import":{"path":"motionary/components/svg","define":"defineAnimIcon","register":"defineAnimIcon();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["name","size","label","trigger"],"events":[],"slots":[],"methods":["play"],"example":"<usa-anim-icon name=\"bell\" label=\"Notifications\"></usa-anim-icon>\n<usa-anim-icon name=\"heart\" trigger=\"click\"></usa-anim-icon>","esm":"import { defineAnimIcon } from 'motionary/components/svg';\n\ndefineAnimIcon(); // registers <usa-anim-icon>\n\n/* then use it in your HTML:\n<usa-anim-icon name=\"bell\" label=\"Notifications\"></usa-anim-icon>\n<usa-anim-icon name=\"heart\" trigger=\"click\"></usa-anim-icon>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/svg/anim-icon.ts","changed":["11.8"]},{"id":"fx-audio-beat","tag":"usa-audio","title":"Beat-triggered effects","description":"5.6: <usa-audio> renders a toggle (a user gesture starts Web Audio), detects beats and plays any registered effect on children with data-usa-beat=\"effect\". JS: bindBeat(el, \"pop\"). Beats play nothing under reduced motion.","category":"fx","since":"5.6","keywords":["audio","beat","microphone","music","sound","reactive"],"import":{"path":"motionary/components/effects","define":"defineAudio","register":"defineAudio();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["source","label","threshold","cooldown"],"events":["usa:beat","usa:audio-error"],"slots":[],"methods":["toggle"],"example":"<audio id=\"track\" src=\"song.mp3\" controls></audio>\n<usa-audio source=\"#track\" label=\"Play with visuals\">\n  <div data-usa-beat=\"pop\">♪</div>\n</usa-audio>","esm":"import { defineAudio } from 'motionary/components/effects';\n\ndefineAudio(); // registers <usa-audio>\n\n/* then use it in your HTML:\n<audio id=\"track\" src=\"song.mp3\" controls></audio>\n<usa-audio source=\"#track\" label=\"Play with visuals\">\n  <div data-usa-beat=\"pop\">♪</div>\n</usa-audio>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/effects/audio.ts","changed":["7.1","11.8","12.0"]},{"id":"aurora","tag":"usa-aurora","title":"Aurora","description":"A slow drifting gradient mesh behind its content. Transforms only, paused off-screen, still under reduced motion.","category":"background","since":"2.2","keywords":["gradient","GPU"],"import":{"path":"motionary/components/background","define":"defineAurora","register":"defineAurora();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["colors","speed","intensity"],"events":[],"slots":[],"methods":[],"example":"<usa-aurora colors=\"#7c5cff,#22d3ee,#f472b6\">\n  <h1>Hero</h1>\n</usa-aurora>","esm":"import { defineAurora } from 'motionary/components/background';\n\ndefineAurora(); // registers <usa-aurora>\n\n/* then use it in your HTML:\n<usa-aurora colors=\"#7c5cff,#22d3ee,#f472b6\">\n  <h1>Hero</h1>\n</usa-aurora>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/aurora.ts","changed":["13.4"]},{"id":"auto-animate","tag":"usa-auto-animate","title":"Auto-animate","description":"Wrap a list or grid: items that are added fade in, removed ones fade out in place, and everything else glides to its new spot — on sort, filter or resize. Zero code at the call site.","category":"layout","since":"3.6","keywords":["auto animate","reflow","list","grid","FLIP"],"import":{"path":"motionary/components/layout","define":"defineAutoAnimate","register":"defineAutoAnimate();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["duration","no-scale"],"events":[],"slots":[],"methods":["enable","disable"],"example":"<usa-auto-animate>\n  <ul class=\"todo\"><li>Write the brief</li><li>Review</li></ul>\n</usa-auto-animate>\n\n<!-- or on any element: -->\n<ul class=\"grid\"><li>A</li><li>B</li></ul>\n<script type=\"module\">\n  import { autoAnimate } from 'motionary/components/layout';\n  autoAnimate(document.querySelector('.grid'));\n</script>","esm":"import { defineAutoAnimate } from 'motionary/components/layout';\n\ndefineAutoAnimate(); // registers <usa-auto-animate>\n\n/* then use it in your HTML:\n<usa-auto-animate>\n  <ul class=\"todo\"><li>Write the brief</li><li>Review</li></ul>\n</usa-auto-animate>\n\n<!-- or on any element: -->\n<ul class=\"grid\"><li>A</li><li>B</li></ul>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/layout/elements.ts","changed":["3.9","4.0"]},{"id":"auto-skeleton","tag":"usa-auto-skeleton","title":"Auto skeleton","description":"Set loading and every heading, paragraph, image and button inside becomes a shimmering placeholder of its own size — no extra markup.","category":"page","since":"2.7","keywords":["skeleton","loading","aria-busy"],"import":{"path":"motionary/components/page","define":"defineAutoSkeleton","register":"defineAutoSkeleton();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["loading"],"events":[],"slots":[],"methods":[],"example":"<usa-auto-skeleton loading>\n  <h3>{{ title }}</h3>\n  <p>{{ body }}</p>\n</usa-auto-skeleton>","esm":"import { defineAutoSkeleton } from 'motionary/components/page';\n\ndefineAutoSkeleton(); // registers <usa-auto-skeleton>\n\n/* then use it in your HTML:\n<usa-auto-skeleton loading>\n  <h3>{{ title }}</h3>\n  <p>{{ body }}</p>\n</usa-auto-skeleton>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/auto-skeleton.ts","changed":[]},{"id":"avatar-stack","tag":"usa-avatar-stack","title":"Avatar stack","description":"Overlapping avatars that spread apart with a spring on hover; extras collapse into “+N”.","category":"ui","since":"2.6","keywords":["avatars","group"],"import":{"path":"motionary/components/ui","define":"defineAvatarStack","register":"defineAvatarStack();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["max","size","overlap","label"],"events":[],"slots":[],"methods":["adoptVariants","mount"],"example":"<usa-avatar-stack max=\"4\">\n  <img src=\"a.jpg\" alt=\"Ana\">\n  …\n</usa-avatar-stack>","esm":"import { defineAvatarStack } from 'motionary/components/ui';\n\ndefineAvatarStack(); // registers <usa-avatar-stack>\n\n/* then use it in your HTML:\n<usa-avatar-stack max=\"4\">\n  <img src=\"a.jpg\" alt=\"Ana\">\n  …\n</usa-avatar-stack>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/avatar-stack.ts","changed":["7.4"]},{"id":"back-to-top","tag":"usa-back-to-top","title":"Back to top","description":"Appears after you scroll, shows reading progress as a ring and springs the page back up, then moves focus to the top.","category":"page","since":"2.7","keywords":["progress ring","a11y"],"import":{"path":"motionary/components/page","define":"defineBackToTop","register":"defineBackToTop();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["label","offset","focus-target"],"events":[],"slots":[],"methods":[],"example":"<usa-back-to-top offset=\"400\"></usa-back-to-top>","esm":"import { defineBackToTop } from 'motionary/components/page';\n\ndefineBackToTop(); // registers <usa-back-to-top>\n\n/* then use it in your HTML:\n<usa-back-to-top offset=\"400\"></usa-back-to-top>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/back-to-top.ts","changed":["13.1"]},{"id":"badge","tag":"usa-badge","title":"Badge","description":"Count or dot badge that bumps with a spring when its value changes; 99+ capping, optional pulse.","category":"ui","since":"2.6","keywords":["count","pulse","role=status"],"import":{"path":"motionary/components/ui","define":"defineBadge","register":"defineBadge();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["value","max","dot","label","show-zero"],"events":[],"slots":[],"methods":[],"example":"<usa-badge value=\"3\">\n  <button>Inbox</button>\n</usa-badge>","esm":"import { defineBadge } from 'motionary/components/ui';\n\ndefineBadge(); // registers <usa-badge>\n\n/* then use it in your HTML:\n<usa-badge value=\"3\">\n  <button>Inbox</button>\n</usa-badge>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/badge.ts","changed":[]},{"id":"badge-wall","tag":"usa-badge-wall","title":"Badge wall","description":"7.5: an achievement grid — locked badges are grey with a 🔒; unlock(name) flips a badge to its colour side with a shine and the “n / m unlocked” counter updates.","category":"ui","since":"7.5","keywords":["badges","achievements","unlock","game","trophy"],"import":{"path":"motionary/components/widgets","define":"defineBadgeWall","register":"defineBadgeWall();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label"],"events":["usa:unlock"],"slots":[],"methods":["unlock"],"example":"<usa-badge-wall>\n  <li data-icon=\"🏆\">First win</li>\n  <li data-icon=\"🔥\" data-locked>7-day streak</li>\n</usa-badge-wall>\n<script>addEventListener('DOMContentLoaded', () => { const wall = document.querySelector('usa-badge-wall'); wall.unlock('7-day streak'); });</script>","esm":"import { defineBadgeWall } from 'motionary/components/widgets';\n\ndefineBadgeWall(); // registers <usa-badge-wall>\n\n/* then use it in your HTML:\n<usa-badge-wall>\n  <li data-icon=\"🏆\">First win</li>\n  <li data-icon=\"🔥\" data-locked>7-day streak</li>\n</usa-badge-wall>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/badge-wall","stability":"stable","deprecated":null,"source":"src/components/widgets/badge-wall.ts","changed":[]},{"id":"bar-chart","tag":"usa-bar-chart","title":"Animated bar chart","description":"7.2: bars grow from the baseline in a stagger on first view and new data glides every bar to its new height — bars that appear grow in, bars that leave shrink away. Data from values/labels, <data> children or the data property.","category":"ui","since":"7.2","keywords":["chart","bar","data","dashboard","stagger"],"import":{"path":"motionary/components/widgets","define":"defineBarChart","register":"defineBarChart();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["horizontal","unit","max","values","labels","label"],"events":[],"slots":[],"methods":[],"example":"<usa-bar-chart values=\"12,19,8,15,22\" labels=\"Mon,Tue,Wed,Thu,Fri\" unit=\"k\"></usa-bar-chart>\n<script>addEventListener('DOMContentLoaded', () => { document.querySelector('usa-bar-chart').data = [{ label: 'Mon', value: 18 }, { label: 'Tue', value: 12 }, { label: 'Wed', value: 21 }]; });</script>","esm":"import { defineBarChart } from 'motionary/components/widgets';\n\ndefineBarChart(); // registers <usa-bar-chart>\n\n/* then use it in your HTML:\n<usa-bar-chart values=\"12,19,8,15,22\" labels=\"Mon,Tue,Wed,Thu,Fri\" unit=\"k\"></usa-bar-chart>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/bar-chart","stability":"stable","deprecated":null,"source":"src/components/widgets/bar-chart.ts","changed":[]},{"id":"bg-generator","tag":"usa-bg-generator","title":"Background generator","description":"9.3: a background generator — pick a palette and a style (mesh gradient, grain, stripes, dots), shuffle the seed and copy the CSS.","category":"ui","since":"9.3","keywords":["background","generator","mesh gradient","css","palette"],"import":{"path":"motionary/components/widgets","define":"defineBgGenerator","register":"defineBgGenerator();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","palette","style","seed"],"events":["usa:change"],"slots":[],"methods":["shuffle","copy"],"example":"<usa-bg-generator palette=\"candy\" style=\"mesh\"></usa-bg-generator>","esm":"import { defineBgGenerator } from 'motionary/components/widgets';\n\ndefineBgGenerator(); // registers <usa-bg-generator>\n\n/* then use it in your HTML:\n<usa-bg-generator palette=\"candy\" style=\"mesh\"></usa-bg-generator>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/bg-generator","stability":"stable","deprecated":null,"source":"src/components/widgets/bg-generator.ts","changed":[]},{"id":"blobs","tag":"usa-blobs","title":"Fluid blobs","description":"Soft colour blobs that slowly morph and drift — a fluid gradient backdrop.","category":"background","since":"2.8","keywords":["blobs","gradient","blur"],"import":{"path":"motionary/components/background","define":"defineBlobs","register":"defineBlobs();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["colors","speed","blur"],"events":[],"slots":[],"methods":["mount"],"example":"<usa-blobs colors=\"#7c5cff,#22d3ee,#f472b6\">…</usa-blobs>","esm":"import { defineBlobs } from 'motionary/components/background';\n\ndefineBlobs(); // registers <usa-blobs>\n\n/* then use it in your HTML:\n<usa-blobs colors=\"#7c5cff,#22d3ee,#f472b6\">…</usa-blobs>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/bg-fx.ts","changed":[]},{"id":"bottom-sheet","tag":"usa-bottom-sheet","title":"Bottom sheet","description":"A draggable sheet with snap points, inertia and drag-down-to-dismiss — the iOS / Android pattern for web and Windows web-view apps.","category":"ui","since":"2.6","keywords":["snap points","inertia","drag"],"import":{"path":"motionary/components/ui","define":"defineBottomSheet","register":"defineBottomSheet();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["open","snap","start"],"events":[],"slots":[],"methods":["show","close"],"example":"<usa-bottom-sheet snap=\"0.4,0.9\" label=\"Filters\">…</usa-bottom-sheet>","esm":"import { defineBottomSheet } from 'motionary/components/ui';\n\ndefineBottomSheet(); // registers <usa-bottom-sheet>\n\n/* then use it in your HTML:\n<usa-bottom-sheet snap=\"0.4,0.9\" label=\"Filters\">…</usa-bottom-sheet>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/sheet.ts","changed":["13.1","13.3"]},{"id":"button-deform","tag":"usa-button","title":"Button deformation","description":"Spring-driven button click deformation: squash & stretch, elastic border-radius wobble, gooey liquid droplets, and a dent toward the pressed point. Combine them with deform=\"squash wobble\".","category":"click","since":"2.5","keywords":["squash","wobble","gooey","dent","spring"],"import":{"path":"motionary/components/click","define":"defineButton","register":"defineButton();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["deform","state","shape","disabled","morph","haptic","reset"],"events":["usa:submit","usa:state"],"slots":[],"methods":["morphTo"],"example":"<usa-button deform=\"squash\">\n  <button>Squash</button>\n</usa-button>\n<usa-button deform=\"gooey\"><button>Gooey</button></usa-button>\n<usa-button deform=\"dent\"><button>Dent</button></usa-button>","esm":"import { defineButton } from 'motionary/components/click';\n\ndefineButton(); // registers <usa-button>\n\n/* then use it in your HTML:\n<usa-button deform=\"squash\">\n  <button>Squash</button>\n</usa-button>\n<usa-button deform=\"gooey\"><button>Gooey</button></usa-button>\n<usa-button deform=\"dent\"><button>Dent</button></usa-button>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/button.ts","variants":[{"id":"button-deform","title":"Button deformation","description":"Spring-driven button click deformation: squash & stretch, elastic border-radius wobble, gooey liquid droplets, and a dent toward the pressed point. Combine them with deform=\"squash wobble\".","example":"<usa-button deform=\"squash\">\n  <button>Squash</button>\n</usa-button>\n<usa-button deform=\"gooey\"><button>Gooey</button></usa-button>\n<usa-button deform=\"dent\"><button>Dent</button></usa-button>"},{"id":"button-shape","title":"Shape morph","description":"The button morphs between pill, circle and icon-only with a spring — label and icon cross-fade. Click to cycle.","example":"<usa-button shape=\"pill\">\n  <button><span data-icon>＋</span> <span data-label>New file</span></button>\n</usa-button>\n<script>btn.morphTo('icon');</script>"},{"id":"button-submit","title":"Submit → loading → success","description":"morph=\"submit\": click shrinks the button into a spinner (aria-busy), then a drawn check (or a shake + cross on error) and back. Call event.detail.done(ok) from usa:submit.","example":"<usa-button morph=\"submit\" deform=\"squash\">\n  <button>Pay $20</button>\n</usa-button>\n<script>\n  btn.addEventListener('usa:submit', async (e) => e.detail.done(await pay()));\n</script>"}],"changed":[]},{"id":"card","tag":"usa-card","title":"Card","description":"Ten card effects you can combine (effect=\"lift sheen\"): flip (hover or click, x/y axis), holo, glass, border-glow, conic-border, lift, spotlight, sheen, parallax-layers and expand (card → detail with FLIP + spring).","category":"cards","since":"2.4","keywords":["flip","holo","glass","expand","combinable"],"import":{"path":"motionary/components/cards","define":"defineCard","register":"defineCard();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","trigger","disabled","color","depth"],"events":["usa:flip","usa:expand","usa:collapse"],"slots":[],"methods":["flip","expand","collapse"],"example":"<usa-card effect=\"lift sheen\">\n  <h3>Pro plan</h3>\n</usa-card>\n<usa-card effect=\"flip\" trigger=\"click\">\n  <div data-front>Front</div>\n  <div data-back>Back</div>\n</usa-card>\n<usa-card effect=\"expand\">\n  <h3>Title</h3>\n  <div data-detail>Long text… <button data-close>Close</button></div>\n</usa-card>","esm":"import { defineCard } from 'motionary/components/cards';\n\ndefineCard(); // registers <usa-card>\n\n/* then use it in your HTML:\n<usa-card effect=\"lift sheen\">\n  <h3>Pro plan</h3>\n</usa-card>\n<usa-card effect=\"flip\" trigger=\"click\">\n  <div data-front>Front</div>\n  <div data-back>Back</div>\n</usa-card>\n<usa-card effect=\"expand\">\n  <h3>Title</h3>\n  <div data-detail>Long text… <button data-close>Close</button></div>\n</usa-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/cards/card.ts","variants":[{"id":"card","title":"Card","description":"Ten card effects you can combine (effect=\"lift sheen\"): flip (hover or click, x/y axis), holo, glass, border-glow, conic-border, lift, spotlight, sheen, parallax-layers and expand (card → detail with FLIP + spring).","example":"<usa-card effect=\"lift sheen\">\n  <h3>Pro plan</h3>\n</usa-card>\n<usa-card effect=\"flip\" trigger=\"click\">\n  <div data-front>Front</div>\n  <div data-back>Back</div>\n</usa-card>\n<usa-card effect=\"expand\">\n  <h3>Title</h3>\n  <div data-detail>Long text… <button data-close>Close</button></div>\n</usa-card>"},{"id":"card-flip","title":"Flip card","description":"Front and back faces ([data-front] / [data-back]) flip in 3D on hover, or on click / Enter with trigger=\"click\". axis=\"x\" flips vertically. Reduced motion cross-fades.","example":"<usa-card effect=\"flip\" trigger=\"click\" axis=\"y\">\n  <div data-front>Front</div>\n  <div data-back>Back</div>\n</usa-card>"},{"id":"card-expand","title":"Expand to detail","description":"Click a card and it grows into a full detail view with a spring (FLIP); [data-detail] content appears. Esc, the backdrop or [data-close] collapses it back into place.","example":"<usa-card effect=\"expand\">\n  <h3>Title</h3>\n  <div data-detail>…<button data-close>Close</button></div>\n</usa-card>"}],"changed":[]},{"id":"card-stack","tag":"usa-card-stack","title":"Swipe stack","description":"A deck where the top card swipes away left or right (pointer, touch, arrow keys) and the next springs forward. loop sends cards to the back.","category":"cards","since":"2.4","keywords":["swipe","tinder","spring"],"import":{"path":"motionary/components/cards","define":"defineCardStack","register":"defineCardStack();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["visible","offset","disabled","threshold","loop"],"events":["usa:swipe","usa:empty"],"slots":[],"methods":["swipe"],"example":"<usa-card-stack loop>\n  <article>1</article>\n  <article>2</article>\n  <article>3</article>\n</usa-card-stack>","esm":"import { defineCardStack } from 'motionary/components/cards';\n\ndefineCardStack(); // registers <usa-card-stack>\n\n/* then use it in your HTML:\n<usa-card-stack loop>\n  <article>1</article>\n  <article>2</article>\n  <article>3</article>\n</usa-card-stack>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/cards/card-stack.ts","changed":[]},{"id":"carousel","tag":"usa-carousel","title":"Carousel / slider","description":"6.2: swipe, drag, arrow keys, dots and autoplay (pauses on hover, focus, off screen). Four transitions — slide, fade, scale and a 3D \"cards\" coverflow. Reduced motion: slides switch without movement.","category":"ui","since":"6.2","keywords":["carousel","slider","swipe","coverflow","autoplay"],"import":{"path":"motionary/components/widgets","define":"defineCarousel","register":"defineCarousel();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["effect","autoplay","loop","no-controls","no-dots","label","index"],"events":["usa:change"],"slots":[],"methods":["next","prev","goTo"],"example":"<usa-carousel effect=\"cards\" loop autoplay=\"4000\" label=\"Featured\">\n  <img src=\"a.jpg\" alt=\"…\">\n  <img src=\"b.jpg\" alt=\"…\">\n  <img src=\"c.jpg\" alt=\"…\">\n</usa-carousel>","esm":"import { defineCarousel } from 'motionary/components/widgets';\n\ndefineCarousel(); // registers <usa-carousel>\n\n/* then use it in your HTML:\n<usa-carousel effect=\"cards\" loop autoplay=\"4000\" label=\"Featured\">\n  <img src=\"a.jpg\" alt=\"…\">\n  <img src=\"b.jpg\" alt=\"…\">\n  <img src=\"c.jpg\" alt=\"…\">\n</usa-carousel>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/carousel","stability":"stable","deprecated":null,"source":"src/components/widgets/carousel.ts","changed":["10.1"]},{"id":"carousel-3d","tag":"usa-carousel-3d","title":"3D carousel","description":"Items on a 3D ring, rotated by drag, arrow keys, clicks or autoplay — with spring motion. Reduced motion shows one flat item at a time.","category":"cards","since":"2.4","keywords":["3D","carousel","spring"],"import":{"path":"motionary/components/cards","define":"defineCarousel3d","register":"defineCarousel3d();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["radius","perspective","autoplay","index"],"events":["usa:change"],"slots":[],"methods":["next","prev","goTo"],"example":"<usa-carousel-3d autoplay=\"3000\">\n  <img src=\"1.jpg\" alt=\"\">\n  <img src=\"2.jpg\" alt=\"\">\n  …\n</usa-carousel-3d>","esm":"import { defineCarousel3d } from 'motionary/components/cards';\n\ndefineCarousel3d(); // registers <usa-carousel-3d>\n\n/* then use it in your HTML:\n<usa-carousel-3d autoplay=\"3000\">\n  <img src=\"1.jpg\" alt=\"\">\n  <img src=\"2.jpg\" alt=\"\">\n  …\n</usa-carousel-3d>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/cards/carousel-3d.ts","changed":["3.5","13.5"]},{"id":"cart-drawer","tag":"usa-cart-drawer","title":"Cart drawer","description":"7.3: a cart button with a count badge and a drawer that slides in from the side — lines slide in (or bump their quantity), removed lines collapse, the badge bumps and the total rolls. Esc / backdrop close; focus is managed.","category":"ui","since":"7.3","keywords":["cart","drawer","badge","checkout","ecommerce"],"import":{"path":"motionary/components/widgets","define":"defineCartDrawer","register":"defineCartDrawer();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","items","currency"],"events":["usa:open","usa:close","usa:change"],"slots":[],"methods":["add","removeItem","toggle"],"example":"<usa-cart-drawer currency=\"$\"></usa-cart-drawer>\n<script>addEventListener('DOMContentLoaded', () => { const cart = document.querySelector('usa-cart-drawer'); cart.add({ id: 'tee', name: 'T-shirt', price: 24 }); });</script>","esm":"import { defineCartDrawer } from 'motionary/components/widgets';\n\ndefineCartDrawer(); // registers <usa-cart-drawer>\n\n/* then use it in your HTML:\n<usa-cart-drawer currency=\"$\"></usa-cart-drawer>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/cart-drawer","stability":"stable","deprecated":null,"source":"src/components/widgets/cart-drawer.ts","changed":[]},{"id":"chapter-nav","tag":"usa-chapter-nav","title":"Chapter nav","description":"9.1: chapter navigation for long-form stories — one entry per chapter with a reading-progress bar that fills as you scroll, the current chapter highlighted, click to glide there.","category":"ui","since":"9.1","keywords":["chapters","story","navigation","progress","scrollytelling"],"import":{"path":"motionary/components/widgets","define":"defineChapterNav","register":"defineChapterNav();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["for","orientation","label"],"events":["usa:chapter"],"slots":[],"methods":["goTo"],"example":"<usa-chapter-nav for=\"#story\"></usa-chapter-nav>\n<article id=\"story\">\n  <section data-chapter=\"Prologue\">…</section>\n  <section data-chapter=\"The storm\">…</section>\n</article>","esm":"import { defineChapterNav } from 'motionary/components/widgets';\n\ndefineChapterNav(); // registers <usa-chapter-nav>\n\n/* then use it in your HTML:\n<usa-chapter-nav for=\"#story\"></usa-chapter-nav>\n<article id=\"story\">\n  <section data-chapter=\"Prologue\">…</section>\n  <section data-chapter=\"The storm\">…</section>\n</article>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/chapter-nav","stability":"stable","deprecated":null,"source":"src/components/widgets/chapter-nav.ts","changed":["13.1"]},{"id":"chat-composer","tag":"usa-chat-composer","title":"AI chat composer","description":"7.8: an AI chat input that grows with its text; Enter sends, the send button pops when there is text and morphs into Stop while busy, with a thinking glow running round the composer.","category":"ui","since":"7.8","keywords":["ai","chat","composer","prompt","input"],"import":{"path":"motionary/components/widgets","define":"defineChatComposer","register":"defineChatComposer();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["placeholder","label","rows","busy","value"],"events":["usa:stop","usa:send"],"slots":[],"methods":["send","clear"],"example":"<usa-chat-composer placeholder=\"Ask anything…\"></usa-chat-composer>\n<script>const composer = document.querySelector('usa-chat-composer'); composer.addEventListener('usa:send', async (e) => { composer.busy = true; await ask(e.detail.text); composer.busy = false; });</script>","esm":"import { defineChatComposer } from 'motionary/components/widgets';\n\ndefineChatComposer(); // registers <usa-chat-composer>\n\n/* then use it in your HTML:\n<usa-chat-composer placeholder=\"Ask anything…\"></usa-chat-composer>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/chat-composer","stability":"stable","deprecated":null,"source":"src/components/widgets/chat-composer.ts","changed":[]},{"id":"check","tag":"usa-check","title":"Result icon","description":"The circle draws itself, then a check, cross or exclamation strokes in with a pop. Great after a payment or upload.","category":"feedback","since":"2.2","keywords":["SVG","stroke"],"import":{"path":"motionary/components/feedback","define":"defineCheck","register":"defineCheck();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["kind","size","label","start"],"events":["usa:complete"],"slots":[],"methods":["play","reset"],"example":"<usa-check kind=\"success\" label=\"Payment complete\"></usa-check>","esm":"import { defineCheck } from 'motionary/components/feedback';\n\ndefineCheck(); // registers <usa-check>\n\n/* then use it in your HTML:\n<usa-check kind=\"success\" label=\"Payment complete\"></usa-check>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/feedback/check.ts","changed":["2.9","3.0"]},{"id":"checkbox","tag":"usa-checkbox","title":"Animated checkbox","description":"Form-associated checkbox: the box springs and the check draws itself; indeterminate state, circle shape.","category":"click","since":"2.5","keywords":["form","role=checkbox","indeterminate"],"import":{"path":"motionary/components/click","define":"defineCheckbox","register":"defineCheckbox();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["checked","indeterminate","disabled","label","value"],"events":["usa:change"],"slots":[],"methods":["toggle"],"example":"<usa-checkbox name=\"terms\">I agree</usa-checkbox>","esm":"import { defineCheckbox } from 'motionary/components/click';\n\ndefineCheckbox(); // registers <usa-checkbox>\n\n/* then use it in your HTML:\n<usa-checkbox name=\"terms\">I agree</usa-checkbox>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/checkbox.ts","changed":[]},{"id":"click","tag":"usa-click","title":"Click effects","description":"Wrap anything: ripple, burst (circle, star, heart, emoji), confetti, squish, press-spring and error shake — combinable, keyboard-friendly, optional haptics.","category":"click","since":"2.5","keywords":["ripple","burst","confetti","shake","haptics"],"import":{"path":"motionary/components/click","define":"defineClick","register":"defineClick();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","disabled","trigger","color","count","shape","haptic"],"events":["usa:click-effect"],"slots":[],"methods":["play","shake"],"example":"<usa-click effect=\"press-spring burst\" shape=\"star\">\n  <button>Celebrate</button>\n</usa-click>","esm":"import { defineClick } from 'motionary/components/click';\n\ndefineClick(); // registers <usa-click>\n\n/* then use it in your HTML:\n<usa-click effect=\"press-spring burst\" shape=\"star\">\n  <button>Celebrate</button>\n</usa-click>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/click.ts","changed":[]},{"id":"clock-control","tag":"usa-clock-control","title":"Motion clock control","description":"8.0: a pause / speed bar for the unified motion clock — pause, slow down or speed up every Motionary animation and frame loop on the page at once (motionClock in motionary/engine).","category":"ui","since":"8.0","keywords":["clock","timeline","pause","speed","engine"],"import":{"path":"motionary/components/widgets","define":"defineClockControl","register":"defineClockControl();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["speeds","label"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-clock-control speeds=\"0.25,0.5,1,2\"></usa-clock-control>\n<div class=\"box\">A</div> <div class=\"box\">B</div>\n<script type=\"module\">\nimport { motionClock, createTimeline } from 'motionary/engine';\nmotionClock.rate = 0.5;\nconst [a, b] = document.querySelectorAll('.box');\ncreateTimeline().add(a, [{ opacity: 0 }, { opacity: 1 }], 400).add(b, [{ transform: 'scale(0)' }, { transform: 'none' }], 500, '-=200').play();\n</script>","esm":"import { defineClockControl } from 'motionary/components/widgets';\n\ndefineClockControl(); // registers <usa-clock-control>\n\n/* then use it in your HTML:\n<usa-clock-control speeds=\"0.25,0.5,1,2\"></usa-clock-control>\n<div class=\"box\">A</div> <div class=\"box\">B</div>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/clock-control","stability":"stable","deprecated":null,"source":"src/components/widgets/clock-control.ts","changed":[]},{"id":"code-export","tag":"usa-code-export","title":"Code export","description":"8.9 low-code: shows copy-paste code (HTML, React, Vue or JSON) for a live, configured component next to it, follows its attribute changes and copies with one click.","category":"ui","since":"8.9","keywords":["low-code","export","code","copy","react"],"import":{"path":"motionary/components/widgets","define":"defineCodeExport","register":"defineCodeExport();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["for","formats"],"events":["usa:copy"],"slots":[],"methods":["copy"],"example":"<usa-code-export formats=\"html,react,vue\">\n  <usa-star-rating value=\"4\"></usa-star-rating>\n</usa-code-export>","esm":"import { defineCodeExport } from 'motionary/components/widgets';\n\ndefineCodeExport(); // registers <usa-code-export>\n\n/* then use it in your HTML:\n<usa-code-export formats=\"html,react,vue\">\n  <usa-star-rating value=\"4\"></usa-star-rating>\n</usa-code-export>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/code-export","stability":"stable","deprecated":null,"source":"src/components/widgets/code-export.ts","changed":["13.1"]},{"id":"color-picker","tag":"usa-color-picker","title":"Color picker","description":"6.9: a saturation / brightness square and a hue strip with spring-follow thumbs (both keyboard sliders), a preview chip that morphs to the new colour and swatches that pop.","category":"ui","since":"6.9","keywords":["color picker","colour","hue","swatches","form"],"import":{"path":"motionary/components/widgets","define":"defineColorPicker","register":"defineColorPicker();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["swatches"],"events":["usa:change","usa:input"],"slots":[],"methods":[],"example":"<usa-color-picker value=\"#7c5cff\" swatches=\"#f43f5e,#f59e0b,#22c55e,#0ea5e9\"></usa-color-picker>","esm":"import { defineColorPicker } from 'motionary/components/widgets';\n\ndefineColorPicker(); // registers <usa-color-picker>\n\n/* then use it in your HTML:\n<usa-color-picker value=\"#7c5cff\" swatches=\"#f43f5e,#f59e0b,#22c55e,#0ea5e9\"></usa-color-picker>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/color-picker","stability":"stable","deprecated":null,"source":"src/components/widgets/color-picker.ts","changed":["13.1"]},{"id":"command-palette","tag":"usa-command-palette","title":"Command palette (⌘K)","description":"7.9: a ⌘K command palette on the native <dialog> — scales in, filters as you type with fuzzy matching and highlighted letters, results stagger in and a highlight glides between rows (↑ ↓ Enter).","category":"ui","since":"7.9","keywords":["command palette","cmdk","search","keyboard","launcher"],"import":{"path":"motionary/components/widgets","define":"defineCommandPalette","register":"defineCommandPalette();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["placeholder","label","hotkey","inline"],"events":["usa:run","usa:open","usa:close"],"slots":[],"methods":["setCommands","show","close","toggle"],"example":"<usa-command-palette>\n  <option value=\"new\" data-group=\"File\" data-keys=\"mod+n\">New file</option>\n  <option value=\"theme\" data-group=\"View\">Toggle theme</option>\n</usa-command-palette>\n<script>const palette = document.querySelector('usa-command-palette'); palette.addEventListener('usa:run', (e) => run(e.detail.id));</script>","esm":"import { defineCommandPalette } from 'motionary/components/widgets';\n\ndefineCommandPalette(); // registers <usa-command-palette>\n\n/* then use it in your HTML:\n<usa-command-palette>\n  <option value=\"new\" data-group=\"File\" data-keys=\"mod+n\">New file</option>\n  <option value=\"theme\" data-group=\"View\">Toggle theme</option>\n</usa-command-palette>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/command-palette","stability":"stable","deprecated":null,"source":"src/components/widgets/command-palette.ts","changed":[]},{"id":"compare","tag":"usa-compare","title":"Before / after compare","description":"6.5: drag the handle (or hover with the hover attribute), click to jump, or use the keyboard slider; horizontal or vertical; an intro sweep plays once when it scrolls into view.","category":"interaction","since":"6.5","keywords":["compare","before after","slider","image","diff"],"import":{"path":"motionary/components/widgets","define":"defineCompare","register":"defineCompare();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["orientation","labels","label","position","hover","intro"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-compare labels=\"Before,After\" intro>\n  <img src=\"before.jpg\" alt=\"Before\">\n  <img src=\"after.jpg\" alt=\"After\">\n</usa-compare>","esm":"import { defineCompare } from 'motionary/components/widgets';\n\ndefineCompare(); // registers <usa-compare>\n\n/* then use it in your HTML:\n<usa-compare labels=\"Before,After\" intro>\n  <img src=\"before.jpg\" alt=\"Before\">\n  <img src=\"after.jpg\" alt=\"After\">\n</usa-compare>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/compare","stability":"stable","deprecated":null,"source":"src/components/widgets/compare.ts","changed":["13.1"]},{"id":"countdown","tag":"usa-countdown","title":"Flip countdown","description":"7.3: a split-flap countdown to a date (to) or for a number of seconds — every digit flips when it changes; fires usa:done at zero. The timer label updates once a minute so screen readers are not flooded.","category":"ui","since":"7.3","keywords":["countdown","timer","flip","sale","launch"],"import":{"path":"motionary/components/widgets","define":"defineCountdown","register":"defineCountdown();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["to","seconds","units","labels","label"],"events":["usa:tick","usa:done"],"slots":[],"methods":["start","stop"],"example":"<usa-countdown to=\"2026-12-24T00:00:00\" units=\"d,h,m,s\"></usa-countdown>","esm":"import { defineCountdown } from 'motionary/components/widgets';\n\ndefineCountdown(); // registers <usa-countdown>\n\n/* then use it in your HTML:\n<usa-countdown to=\"2026-12-24T00:00:00\" units=\"d,h,m,s\"></usa-countdown>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/countdown","stability":"stable","deprecated":null,"source":"src/components/widgets/countdown.ts","changed":[]},{"id":"counter","tag":"usa-counter","title":"Number counter","description":"Counts up to a number when visible, locale-formatted with tabular digits. Set .value to animate live dashboards.","category":"text","since":"2.2","keywords":["Intl.NumberFormat",".value"],"import":{"path":"motionary/components/text","define":"defineCounter","register":"defineCounter();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["to","decimals","locale","prefix","suffix","grouping","from","start","duration"],"events":["usa:complete"],"slots":[],"methods":["play","format"],"example":"<usa-counter to=\"128490\" prefix=\"$\" duration=\"2000\"></usa-counter>","esm":"import { defineCounter } from 'motionary/components/text';\n\ndefineCounter(); // registers <usa-counter>\n\n/* then use it in your HTML:\n<usa-counter to=\"128490\" prefix=\"$\" duration=\"2000\"></usa-counter>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/counter.ts","changed":["6.4"]},{"id":"cube","tag":"usa-cube","title":"3D cube","description":"Up to six children become the faces of a CSS 3D cube. Drag / swipe, arrow keys, autoplay or show(\"top\"); spring-driven, the front face is the only one exposed to screen readers.","category":"depth","since":"3.5","keywords":["cube","3d","rotate","carousel"],"import":{"path":"motionary/components/depth","define":"defineCube","register":"defineCube();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["size","autoplay","perspective"],"events":["usa:change"],"slots":[],"methods":["show","next","prev"],"example":"<usa-cube size=\"200\" autoplay=\"3000\">\n  <div>Front</div><div>Right</div><div>Back</div><div>Left</div>\n</usa-cube>","esm":"import { defineCube } from 'motionary/components/depth';\n\ndefineCube(); // registers <usa-cube>\n\n/* then use it in your HTML:\n<usa-cube size=\"200\" autoplay=\"3000\">\n  <div>Front</div><div>Right</div><div>Back</div><div>Left</div>\n</usa-cube>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/depth/cube.ts","changed":["6.5"]},{"id":"cube-gallery","tag":"usa-cube-gallery","title":"Cube gallery","description":"6.5: slides sit on adjacent faces of a 3D cube that turns between them — swipe, arrow keys, buttons or autoplay (pauses on hover / focus / off screen); turn around the Y or X axis.","category":"cards","since":"6.5","keywords":["cube","gallery","3d","carousel","slider"],"import":{"path":"motionary/components/widgets","define":"defineCubeGallery","register":"defineCubeGallery();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["axis","autoplay","label"],"events":["usa:change"],"slots":[],"methods":["next","prev","goTo"],"example":"<usa-cube-gallery autoplay=\"4000\" label=\"Products\">\n  <img src=\"a.jpg\" alt=\"…\">\n  <img src=\"b.jpg\" alt=\"…\">\n  <img src=\"c.jpg\" alt=\"…\">\n</usa-cube-gallery>","esm":"import { defineCubeGallery } from 'motionary/components/widgets';\n\ndefineCubeGallery(); // registers <usa-cube-gallery>\n\n/* then use it in your HTML:\n<usa-cube-gallery autoplay=\"4000\" label=\"Products\">\n  <img src=\"a.jpg\" alt=\"…\">\n  <img src=\"b.jpg\" alt=\"…\">\n  <img src=\"c.jpg\" alt=\"…\">\n</usa-cube-gallery>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/cube-gallery","stability":"stable","deprecated":null,"source":"src/components/widgets/cube-gallery.ts","changed":[]},{"id":"cursor","tag":"usa-cursor","title":"Custom cursor","description":"A spring-lagged ring, a magnetic ring that wraps buttons and links, or a soft glow following the pointer. Mouse / pen only. (6.0: for a comet tail use the comet-trail effect.)","category":"page","since":"2.7","keywords":["cursor","magnetic","ring","glow"],"import":{"path":"motionary/components/page","define":"defineCursor","register":"defineCursor();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["mode","size","color","hide-native","targets"],"events":[],"slots":[],"methods":[],"example":"<usa-cursor mode=\"magnetic\" hide-native></usa-cursor>","esm":"import { defineCursor } from 'motionary/components/page';\n\ndefineCursor(); // registers <usa-cursor>\n\n/* then use it in your HTML:\n<usa-cursor mode=\"magnetic\" hide-native></usa-cursor>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/cursor.ts","changed":["4.4","5.9","6.0"]},{"id":"date-picker","tag":"usa-date-picker","title":"Date picker","description":"6.9: months slide in from the direction of travel, the chosen day pops inside a spring circle, today has a ring. A real date grid: arrows, PageUp / PageDown, Home / End, min / max.","category":"ui","since":"6.9","keywords":["date picker","calendar","datepicker","form","grid"],"import":{"path":"motionary/components/widgets","define":"defineDatePicker","register":"defineDatePicker();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["min","max","first-day","locale"],"events":["usa:change"],"slots":[],"methods":["showMonth"],"example":"<usa-date-picker value=\"2026-10-08\" min=\"2026-01-01\" first-day=\"1\"></usa-date-picker>","esm":"import { defineDatePicker } from 'motionary/components/widgets';\n\ndefineDatePicker(); // registers <usa-date-picker>\n\n/* then use it in your HTML:\n<usa-date-picker value=\"2026-10-08\" min=\"2026-01-01\" first-day=\"1\"></usa-date-picker>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/date-picker","stability":"stable","deprecated":null,"source":"src/components/widgets/date-picker.ts","changed":["13.1"]},{"id":"depth","tag":"usa-depth","title":"Depth parallax","description":"Layers with data-depth (-1…1) shift and scale by depth as the pointer moves, the phone tilts (source=\"orientation\") or the page scrolls; optional whole-scene rotation.","category":"depth","since":"3.5","keywords":["parallax","depth","gyroscope","tilt","layers"],"import":{"path":"motionary/components/depth","define":"defineDepth","register":"defineDepth();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["source","strength","rotate"],"events":[],"slots":[],"methods":["requestPermission"],"example":"<usa-depth source=\"pointer orientation\" strength=\"40\" rotate=\"6\">\n  <div class=\"scene\">\n    <img data-depth=\"-0.6\" src=\"sky.png\" alt=\"\">\n    <img data-depth=\"0.2\" src=\"hills.png\" alt=\"\">\n    <h2 data-depth=\"0.8\">Title</h2>\n  </div>\n</usa-depth>","esm":"import { defineDepth } from 'motionary/components/depth';\n\ndefineDepth(); // registers <usa-depth>\n\n/* then use it in your HTML:\n<usa-depth source=\"pointer orientation\" strength=\"40\" rotate=\"6\">\n  <div class=\"scene\">\n    <img data-depth=\"-0.6\" src=\"sky.png\" alt=\"\">\n    <img data-depth=\"0.2\" src=\"hills.png\" alt=\"\">\n    <h2 data-depth=\"0.8\">Title</h2>\n  </div>\n</usa-depth>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/depth/depth-el.ts","changed":[]},{"id":"dialog","tag":"usa-dialog","title":"Modal & drawer","description":"Animated modal, side drawers and bottom sheet on the native <dialog>: top layer, focus trap, Esc, backdrop click.","category":"transitions","since":"2.2","keywords":["<dialog>","Fluent","drawer"],"import":{"path":"motionary/components/transitions","define":"defineDialog","register":"defineDialog();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["open","kind","label","no-esc","no-backdrop-close"],"events":["usa:open","usa:beforeclose","usa:close"],"slots":["default"],"methods":["show","close"],"example":"<usa-dialog id=\"dlg\" kind=\"modal\" label=\"Settings\">\n  <h2>Settings</h2>\n  <button data-close>Done</button>\n</usa-dialog>\n<button onclick=\"dlg.show()\">Open</button>","esm":"import { defineDialog } from 'motionary/components/transitions';\n\ndefineDialog(); // registers <usa-dialog>\n\n/* then use it in your HTML:\n<usa-dialog id=\"dlg\" kind=\"modal\" label=\"Settings\">\n  <h2>Settings</h2>\n  <button data-close>Done</button>\n</usa-dialog>\n<button onclick=\"dlg.show()\">Open</button>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/transitions/dialog.ts","changed":["2.9","3.0","13.0"]},{"id":"disclosure","tag":"usa-disclosure","title":"Accordion 2.0","description":"6.2: native <details> that spring open and closed (height + fade) with an overshooting chevron; one open at a time unless multiple. Find-in-page and keyboard keep working.","category":"transitions","since":"6.2","keywords":["accordion","details","collapse","faq","spring"],"import":{"path":"motionary/components/widgets","define":"defineDisclosure","register":"defineDisclosure();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["multiple","spring"],"events":["usa:toggle"],"slots":[],"methods":["toggle","openAll","closeAll"],"example":"<usa-disclosure variant=\"cards\">\n  <details><summary>Shipping</summary><p>…</p></details>\n  <details><summary>Returns</summary><p>…</p></details>\n</usa-disclosure>","esm":"import { defineDisclosure } from 'motionary/components/widgets';\n\ndefineDisclosure(); // registers <usa-disclosure>\n\n/* then use it in your HTML:\n<usa-disclosure variant=\"cards\">\n  <details><summary>Shipping</summary><p>…</p></details>\n  <details><summary>Returns</summary><p>…</p></details>\n</usa-disclosure>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/disclosure","stability":"stable","deprecated":null,"source":"src/components/widgets/disclosure.ts","changed":[]},{"id":"distort","tag":"usa-distort","title":"Hover distortion","description":"The image bulges and splits into RGB around the pointer. Without WebGL (or a cross-origin image without CORS) it falls back to a gentle CSS zoom.","category":"webgl","since":"3.4","keywords":["hover","distortion","rgb split","image"],"import":{"path":"motionary/components/webgl","define":"defineDistort","register":"defineDistort();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":[],"events":[],"slots":[],"methods":[],"example":"<usa-distort>\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-distort>","esm":"import { defineDistort } from 'motionary/components/webgl';\n\ndefineDistort(); // registers <usa-distort>\n\n/* then use it in your HTML:\n<usa-distort>\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-distort>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/webgl/elements.ts","changed":["4.0","13.1"]},{"id":"dock","tag":"usa-dock","title":"macOS-style dock","description":"6.6: items magnify with a smooth cosine falloff as the pointer moves along the dock, neighbours make room, labels pop above the hovered item and a click bounces it. Keyboard focus magnifies too.","category":"ui","since":"6.6","keywords":["dock","macos","magnify","toolbar","icons"],"import":{"path":"motionary/components/widgets","define":"defineDock","register":"defineDock();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["orientation","magnify","range","label","bounce"],"events":[],"slots":[],"methods":[],"example":"<usa-dock magnify=\"1.9\" bounce label=\"Apps\">\n  <button data-label=\"Finder\" aria-label=\"Finder\">🗂</button>\n  <button data-label=\"Music\" aria-label=\"Music\">🎵</button>\n  <a href=\"/mail\" data-label=\"Mail\" aria-label=\"Mail\">✉️</a>\n</usa-dock>","esm":"import { defineDock } from 'motionary/components/widgets';\n\ndefineDock(); // registers <usa-dock>\n\n/* then use it in your HTML:\n<usa-dock magnify=\"1.9\" bounce label=\"Apps\">\n  <button data-label=\"Finder\" aria-label=\"Finder\">🗂</button>\n  <button data-label=\"Music\" aria-label=\"Music\">🎵</button>\n  <a href=\"/mail\" data-label=\"Mail\" aria-label=\"Mail\">✉️</a>\n</usa-dock>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/dock","stability":"stable","deprecated":null,"source":"src/components/widgets/dock.ts","changed":[]},{"id":"dot-network","tag":"usa-dot-network","title":"Dot network","description":"A dot grid that swells and links up with lines around the pointer.","category":"background","since":"2.8","keywords":["canvas","dots","network"],"import":{"path":"motionary/components/background","define":"defineDotNetwork","register":"defineDotNetwork();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["gap","radius","color"],"events":[],"slots":[],"methods":["mount"],"example":"<usa-dot-network gap=\"28\">…</usa-dot-network>","esm":"import { defineDotNetwork } from 'motionary/components/background';\n\ndefineDotNetwork(); // registers <usa-dot-network>\n\n/* then use it in your HTML:\n<usa-dot-network gap=\"28\">…</usa-dot-network>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/bg-fx.ts","changed":[]},{"id":"dotlottie","tag":"usa-dotlottie","title":"Interactive dotLottie (themes + state machine)","description":"10.9: plays .lottie files with their themes (slots recoloured by a theme from the file) and state machines — playback states, event / numeric / boolean guards, pointer and completion interactions, input and theme actions (OpenUrl is refused). Tap the dot: it starts pulsing, three taps switch it to the dark theme. Requires motionary/runtime/vector + motionary/runtime/lottie-state — npm i motionary, then use(vector, lottieState). Its own entry point: motionary/components/dotlottie.","category":"ui","since":"10.9","keywords":["lottie","dotlottie","state machine","theme","interactive","runtime"],"import":{"path":"motionary/components/dotlottie","define":"defineDotLottie","register":"defineDotLottie();"},"cdn":"https://unpkg.com/motionary@17/dist/components/dotlottie.js","attributes":["theme","state-machine"],"events":["usa:error","usa:state","usa:custom","usa:runtime-missing"],"slots":[],"methods":["fire","setInput","setTheme"],"example":"<usa-dotlottie src=\"/anim/button.lottie\" state-machine=\"toggle\" theme=\"dark\" label=\"Like button\"></usa-dotlottie>","esm":"import { use } from 'motionary/runtime';\nimport { vector } from 'motionary/runtime/vector';\nimport { lottieState } from 'motionary/runtime/lottie-state';\n\nuse(vector, lottieState);\nimport { defineDotLottie } from 'motionary/components/dotlottie';\n\ndefineDotLottie(); // registers <usa-dotlottie>\n\n/* then use it in your HTML:\n<usa-dotlottie src=\"/anim/button.lottie\" state-machine=\"toggle\" theme=\"dark\" label=\"Like button\"></usa-dotlottie>\n*/","requires":["vector","lottie-state"],"tier":"standard","prerequisites":{"badge":"Requires: motionary/runtime/vector + motionary/runtime/lottie-state","modules":["motionary/runtime/vector","motionary/runtime/lottie-state"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { vector } from 'motionary/runtime/vector';\nimport { lottieState } from 'motionary/runtime/lottie-state';\nimport { defineDotLottie } from 'motionary/components/dotlottie';\n\nuse(vector, lottieState);\ndefineDotLottie(); // registers <usa-dotlottie> — after the prerequisites","order":"Register the core first, then the module: use(vector) also registers the core. CDN: load runtime.iife.js, then runtime/vector.iife.js (it registers itself). Register the core first, then the module: use(lottieState) also registers the core. CDN: load runtime.iife.js, then runtime/lottie-state.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/vector.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/lottie-state.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-dotlottie src=\"/anim/button.lottie\" state-machine=\"toggle\" theme=\"dark\" label=\"Like button\"></usa-dotlottie>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/vector.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/lottie-state.md"]},"entry":"motionary/widgets/dotlottie","stability":"stable","deprecated":null,"source":"src/components/widgets/dotlottie.ts","changed":["13.2"]},{"id":"double-tap","tag":"usa-double-tap","title":"Double tap","description":"Double tap or double click a photo to pop a heart (or any emoji) at the tap point. L for keyboard users.","category":"click","since":"2.5","keywords":["double tap","heart","touch"],"import":{"path":"motionary/components/click","define":"defineDoubleTap","register":"defineDoubleTap();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["disabled","delay","icon","color"],"events":["usa:double-tap"],"slots":[],"methods":["pop"],"example":"<usa-double-tap>\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-double-tap>","esm":"import { defineDoubleTap } from 'motionary/components/click';\n\ndefineDoubleTap(); // registers <usa-double-tap>\n\n/* then use it in your HTML:\n<usa-double-tap>\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-double-tap>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/double-tap.ts","changed":[]},{"id":"draggable","tag":"usa-draggable","title":"Draggable","description":"Drag with mouse, touch, pen or arrow keys. spring-back returns home with a wobble; inertia glides after a flick; snap to a grid or points; rubber-band bounds.","category":"physics","since":"2.3","keywords":["spring-back","inertia","snap","keyboard"],"import":{"path":"motionary/components/physics","define":"defineDraggable","register":"defineDraggable();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["axis","disabled","preset","bounds","spring-back","inertia","snap","step"],"events":["usa:settle","usa:drag-start","usa:drag","usa:drag-end"],"slots":[],"methods":["moveTo","reset"],"example":"<usa-draggable spring-back>\n  <div class=\"card\">Drag me</div>\n</usa-draggable>\n<usa-draggable inertia snap=\"80\" bounds=\"parent\">…</usa-draggable>","esm":"import { defineDraggable } from 'motionary/components/physics';\n\ndefineDraggable(); // registers <usa-draggable>\n\n/* then use it in your HTML:\n<usa-draggable spring-back>\n  <div class=\"card\">Drag me</div>\n</usa-draggable>\n<usa-draggable inertia snap=\"80\" bounds=\"parent\">…</usa-draggable>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/physics/draggable.ts","changed":["6.8"]},{"id":"draw","tag":"usa-draw","title":"Line drawing","description":"Every stroke of the SVG inside draws itself — on view, hover, click or scrubbed with scroll — staggered between shapes, optional fill afterwards. No getTotalLength() needed.","category":"svg","since":"3.3","keywords":["stroke","draw","signature","scrub"],"import":{"path":"motionary/components/svg","define":"defineDraw","register":"defineDraw();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["duration","stagger","trigger","repeat"],"events":["usa:complete"],"slots":[],"methods":["play"],"example":"<usa-draw duration=\"1800\" stagger=\"0.3\" fill>\n  <svg viewBox=\"0 0 100 40\">…</svg>\n</usa-draw>","esm":"import { defineDraw } from 'motionary/components/svg';\n\ndefineDraw(); // registers <usa-draw>\n\n/* then use it in your HTML:\n<usa-draw duration=\"1800\" stagger=\"0.3\" fill>\n  <svg viewBox=\"0 0 100 40\">…</svg>\n</usa-draw>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/svg/draw.ts","changed":["11.8"]},{"id":"drawer","tag":"usa-drawer","title":"Drawer","description":"A side panel that springs in, drags / swipes closed, traps the page behind a backdrop and returns focus on close. Left, right, top or bottom.","category":"ui","since":"2.6","keywords":["swipe","modal","Esc"],"import":{"path":"motionary/components/ui","define":"defineDrawer","register":"defineDrawer();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":[],"events":[],"slots":[],"methods":["show","close"],"example":"<button onclick=\"nav.open = true\">Menu</button>\n<usa-drawer id=\"nav\" side=\"left\" label=\"Navigation\">…</usa-drawer>","esm":"import { defineDrawer } from 'motionary/components/ui';\n\ndefineDrawer(); // registers <usa-drawer>\n\n/* then use it in your HTML:\n<button onclick=\"nav.open = true\">Menu</button>\n<usa-drawer id=\"nav\" side=\"left\" label=\"Navigation\">…</usa-drawer>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/sheet.ts","changed":["13.1","13.3"]},{"id":"equalizer","tag":"usa-equalizer","title":"Graphic equalizer","description":"7.1: one vertical slider per band with springy caps and a smooth response curve drawn through them; presets glide every band to its gain.","category":"interaction","since":"7.1","keywords":["equalizer","eq","audio","bands","sliders"],"import":{"path":"motionary/components/widgets","define":"defineEqualizer","register":"defineEqualizer();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["bands","preset","label"],"events":["usa:change"],"slots":[],"methods":["applyPreset"],"example":"<usa-equalizer preset=\"rock\" bands=\"60,150,400,1k,2.4k,6k,16k\"></usa-equalizer>\n<script>addEventListener('DOMContentLoaded', () => { const eq = document.querySelector('usa-equalizer'); eq.applyPreset('vocal'); });</script>","esm":"import { defineEqualizer } from 'motionary/components/widgets';\n\ndefineEqualizer(); // registers <usa-equalizer>\n\n/* then use it in your HTML:\n<usa-equalizer preset=\"rock\" bands=\"60,150,400,1k,2.4k,6k,16k\"></usa-equalizer>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/equalizer","stability":"stable","deprecated":null,"source":"src/components/widgets/equalizer.ts","changed":[]},{"id":"fab","tag":"usa-fab","title":"FAB speed dial","description":"A floating action button whose actions fan out with a staggered spring: up, down, left, right or radial.","category":"ui","since":"2.6","keywords":["speed dial","stagger","aria-expanded"],"import":{"path":"motionary/components/ui","define":"defineFab","register":"defineFab();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["direction","gap"],"events":["usa:toggle"],"slots":[],"methods":["toggle"],"example":"<usa-fab direction=\"up\">\n  <button aria-label=\"Create\">＋</button>\n  <button aria-label=\"Photo\">📷</button>\n  <button aria-label=\"Note\">📝</button>\n</usa-fab>","esm":"import { defineFab } from 'motionary/components/ui';\n\ndefineFab(); // registers <usa-fab>\n\n/* then use it in your HTML:\n<usa-fab direction=\"up\">\n  <button aria-label=\"Create\">＋</button>\n  <button aria-label=\"Photo\">📷</button>\n  <button aria-label=\"Note\">📝</button>\n</usa-fab>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/fab.ts","changed":[]},{"id":"festival-banner","tag":"usa-festival-banner","title":"Festival banner","description":"8.1: an announcement banner with an ambient festive scene behind the text — lunar lanterns and sparkles, Christmas lights and snow, Halloween bats and moon, or fireworks.","category":"ui","since":"8.1","keywords":["banner","festival","christmas","halloween","lunar new year"],"import":{"path":"motionary/components/widgets","define":"defineFestivalBanner","register":"defineFestivalBanner();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["theme","label","dismissible"],"events":["usa:dismiss"],"slots":[],"methods":["dismiss"],"example":"<usa-festival-banner theme=\"lunar\" dismissible>🧧 Happy Lunar New Year — 20% off all week</usa-festival-banner>","esm":"import { defineFestivalBanner } from 'motionary/components/widgets';\n\ndefineFestivalBanner(); // registers <usa-festival-banner>\n\n/* then use it in your HTML:\n<usa-festival-banner theme=\"lunar\" dismissible>🧧 Happy Lunar New Year — 20% off all week</usa-festival-banner>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/festival-banner","stability":"stable","deprecated":null,"source":"src/components/widgets/festival-banner.ts","changed":[]},{"id":"field","tag":"usa-field","title":"Animated field","description":"7.7: a text input whose label floats up on focus, with a growing underline; validates on blur — invalid shakes and slides the message in, valid draws a check. strength adds a 4-step password meter.","category":"ui","since":"7.7","keywords":["input","form","floating label","validation","password"],"import":{"path":"motionary/components/widgets","define":"defineField","register":"defineField();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","hint","error","strength"],"events":["usa:invalid","usa:valid"],"slots":[],"methods":["validate"],"example":"<usa-field label=\"Email\" type=\"email\" name=\"email\" required></usa-field>\n<usa-field label=\"Password\" type=\"password\" name=\"pw\" minlength=\"8\" strength></usa-field>","esm":"import { defineField } from 'motionary/components/widgets';\n\ndefineField(); // registers <usa-field>\n\n/* then use it in your HTML:\n<usa-field label=\"Email\" type=\"email\" name=\"email\" required></usa-field>\n<usa-field label=\"Password\" type=\"password\" name=\"pw\" minlength=\"8\" strength></usa-field>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/field","stability":"stable","deprecated":null,"source":"src/components/widgets/field.ts","changed":[]},{"id":"file-drop","tag":"usa-file-drop","title":"File drop zone","description":"6.9: dragging files over it lights marching-ants borders and lifts the icon; dropped (or browsed) files fly into a list with progress bars that end in a drawn check.","category":"feedback","since":"6.9","keywords":["upload","file drop","drag and drop","progress","form"],"import":{"path":"motionary/components/widgets","define":"defineFileDrop","register":"defineFileDrop();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","accept","multiple","simulate"],"events":["usa:files"],"slots":[],"methods":["setProgress","addFiles","clear"],"example":"<usa-file-drop multiple accept=\"image/*\" label=\"Drop images or browse\"></usa-file-drop>\n<script>\n  const drop = document.querySelector('usa-file-drop');\n  drop.addEventListener('usa:files', (e) => upload(e.detail.files, (i, p) => drop.setProgress(i, p)));\n</script>","esm":"import { defineFileDrop } from 'motionary/components/widgets';\n\ndefineFileDrop(); // registers <usa-file-drop>\n\n/* then use it in your HTML:\n<usa-file-drop multiple accept=\"image/*\" label=\"Drop images or browse\"></usa-file-drop>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/file-drop","stability":"stable","deprecated":null,"source":"src/components/widgets/file-drop.ts","changed":[]},{"id":"fullpage","tag":"usa-fullpage","title":"Full-page sections","description":"Full-screen sections that snap one at a time, with keyboard paging, dot navigation and a usa:section event.","category":"page","since":"2.7","keywords":["scroll-snap","keyboard","dots"],"import":{"path":"motionary/components/page","define":"defineFullpage","register":"defineFullpage();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["dots","axis"],"events":["usa:section"],"slots":[],"methods":["go","next","prev"],"example":"<usa-fullpage dots>\n  <section>One</section>\n  <section>Two</section>\n</usa-fullpage>","esm":"import { defineFullpage } from 'motionary/components/page';\n\ndefineFullpage(); // registers <usa-fullpage>\n\n/* then use it in your HTML:\n<usa-fullpage dots>\n  <section>One</section>\n  <section>Two</section>\n</usa-fullpage>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/fullpage.ts","changed":[]},{"id":"fx","tag":"usa-fx","title":"Attention seekers","description":"<usa-fx> plays any registered effect on its child: pulse, pop, jelly, wiggle, heartbeat, bounce, flash (≤ 2 per second), tada, shake. Click the button.","category":"fx","since":"5.0","keywords":["attention","pulse","jelly","bounce","tada"],"import":{"path":"motionary/components/fx","define":"defineFx","register":"defineFx();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","trigger","options","self","once"],"events":[],"slots":[],"methods":["play"],"example":"<usa-fx effect=\"jelly\" trigger=\"click\">\n  <button>Press me</button>\n</usa-fx>","esm":"import { defineFx } from 'motionary/components/fx';\n\ndefineFx(); // registers <usa-fx>\n\n/* then use it in your HTML:\n<usa-fx effect=\"jelly\" trigger=\"click\">\n  <button>Press me</button>\n</usa-fx>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/fx/fx-el.ts","variants":[{"id":"fx","title":"Attention seekers","description":"<usa-fx> plays any registered effect on its child: pulse, pop, jelly, wiggle, heartbeat, bounce, flash (≤ 2 per second), tada, shake. Click the button.","example":"<usa-fx effect=\"jelly\" trigger=\"click\">\n  <button>Press me</button>\n</usa-fx>"},{"id":"fx-click","title":"Click effects","description":"Registered click effects — burst, confetti and ink ripple — start at the pointer.","example":"<usa-fx effect=\"confetti\">\n  <button>Celebrate</button>\n</usa-fx>"},{"id":"fx-enter","title":"Entrances on scroll","description":"Every timeline preset is also an enter effect: trigger=\"enter\" plays it when the element scrolls into view (once).","example":"<usa-fx effect=\"fade-up\" trigger=\"enter\">\n  <h2>Hello</h2>\n</usa-fx>"},{"id":"fx-holo","title":"Holographic card","description":"5.1: a rainbow foil sheen and 3D tilt follow the pointer (trigger=\"load\" keeps it on). Under reduced motion the sheen stays static.","example":"<usa-fx effect=\"holo\" trigger=\"load\">\n  <article class=\"card\">…</article>\n</usa-fx>"},{"id":"fx-card-moves","title":"Card moves","description":"5.1: glare sweep, book-open peek, card fan (children spread like a hand of cards), topple-and-spring — hover the card.","example":"<usa-fx effect=\"glare-sweep\" trigger=\"hover\">\n  <article class=\"card\">…</article>\n</usa-fx>"},{"id":"fx-click2","title":"Click effects 2.0","description":"5.1: shockwave rings, ink splash, spinning star burst, jelly press, water ring ripple and emoji rain — all from the click point.","example":"<usa-fx effect=\"shockwave\">\n  <button>Boom</button>\n</usa-fx>"},{"id":"fx-physics","title":"Bounce & physics","description":"5.2: spring-solved bounce-in, rubber band, drop-and-bounce under gravity, damped bell swing — click the button.","example":"<usa-fx effect=\"drop-bounce\" trigger=\"enter\">\n  <img src=\"badge.svg\" alt=\"New\">\n</usa-fx>"},{"id":"fx-gravity-text","title":"Gravity text","description":"5.2: every character drops in under gravity and bounces, staggered; the text keeps an aria-label.","example":"<usa-fx effect=\"gravity-text\" trigger=\"enter\">\n  <h2>Falling letters</h2>\n</usa-fx>"},{"id":"fx-spring-hover","title":"Elastic hover & spring follow","description":"5.2: elastic-hover lifts with a springy overshoot; spring-follow chases the pointer across its parent (both persistent, trigger=\"load\").","example":"<usa-fx effect=\"spring-follow\" trigger=\"load\">\n  <span class=\"dot\"></span>\n</usa-fx>"},{"id":"fx-page-transitions","title":"Page transitions","description":"5.3: curtain, iris (closes on the click point), pixel dissolve and venetian blinds — cover the page, call onCovered() (swap your route there), then reveal. Reduced motion: a quick cross-fade.","example":"<usa-fx effect=\"iris\">\n  <a href=\"/next\">Next page</a>\n</usa-fx>\n\n<script type=\"module\">\n  playEffect(document.body, 'curtain', { onCovered: () => router.go('/next') });\n</script>"},{"id":"fx-page-scroll","title":"Velocity skew & edge glow","description":"5.3: velocity-skew leans the element with scroll speed; edge-glow lights the viewport edge you scroll toward; spotlight dims everything but a circle at the pointer (all persistent, trigger=\"load\") — scroll the page.","example":"<usa-fx effect=\"velocity-skew\" trigger=\"load\">\n  <section class=\"gallery\">…</section>\n</usa-fx>"},{"id":"fx-generative","title":"Generative backgrounds","description":"5.5: flow field, Voronoi cells, mesh gradient, starfield, metaballs and topographic contours on Canvas 2D — rendered only while visible, with adaptive quality; one static frame under reduced motion.","example":"<usa-fx effect=\"mesh-gradient\" trigger=\"load\" self class=\"hero\">\n  <h1>Hello</h1>\n</usa-fx>"},{"id":"fx-audio","title":"Sound-reactive backgrounds","description":"5.6: spectrum bars, pulse rings and a waveform ring driven by a Web Audio analyser (microphone, <audio>/<video> or a MediaStream via enableAudio()). They idle gently until audio is enabled; skipped under reduced motion.","example":"<usa-fx effect=\"spectrum-bars\" trigger=\"load\" self options='{\"mirror\":true}'>\n  <h2>Now playing</h2>\n</usa-fx>"},{"id":"fx-cursor","title":"Cursor trails","description":"5.7: comet trail, rainbow ribbon, sparkle stars, magnetic dot grid and an easing spotlight — scoped to the element, mouse / pen only by default (touch: true to opt in), off under reduced motion.","example":"<usa-fx effect=\"comet-trail\" trigger=\"load\" self>\n  <section class=\"hero\">…</section>\n</usa-fx>"},{"id":"fx-micro","title":"Micro-interactions","description":"5.8: 23 small interactions that also do the UI work — like / favourite / bookmark toggles (aria-pressed), copy to clipboard with \"Copied ✓\", password show / hide, download & submit progress (aria-busy), counters, upvote, clap, emoji reactions, refresh spin, trash, input shake (aria-invalid)…","example":"<usa-fx effect=\"like-heart\" trigger=\"click\">\n  <button aria-pressed=\"false\">♥ <span data-count=\"12\">12</span></button>\n</usa-fx>"},{"id":"fx-gpu","title":"GPU backgrounds","description":"6.2: WebGL2 shaders — fluid (swirls around the pointer), smoke, fire, ink in water and fireflies — with a Canvas 2D fallback when WebGL2 is missing or the context is lost. Renders only while visible, adapts its resolution; one still frame under reduced motion.","example":"<usa-fx effect=\"fluid\" trigger=\"load\" self class=\"hero\">\n  <h1>Hello</h1>\n</usa-fx>"},{"id":"fx-nature","title":"Sakura, leaves & splash","description":"6.2: cherry-blossom petals and autumn leaves drift down behind the content (Canvas 2D), and splash throws water droplets from the click point.","example":"<usa-fx effect=\"sakura\" trigger=\"load\" self class=\"hero\">\n  <h1>Spring</h1>\n</usa-fx>"},{"id":"fx-splash","title":"Splash click","description":"6.2: a ring plus droplets that arc out of the click point and fall with gravity.","example":"<usa-fx effect=\"splash\">\n  <button>Splash</button>\n</usa-fx>"},{"id":"fx-text","title":"Text effects 3.0","description":"6.3: flip-chars (per-character 3D flip), neon-write (a neon sign switching on letter by letter), particle-text (particles assemble into the glyphs) and glitch-text (RGB-split slices). Screen readers get the plain text.","example":"<usa-fx effect=\"flip-chars\" trigger=\"enter\">\n  <h1>Motionary</h1>\n</usa-fx>"},{"id":"fx-text-loop","title":"Liquid & breathing text","description":"6.3: liquid-text ripples the glyphs with an animated SVG displacement filter; font-breathe sends a variable-font weight wave through the text. Both are skipped under reduced motion.","example":"<usa-fx effect=\"liquid-text\" trigger=\"loop\">\n  <h1>Liquid</h1>\n</usa-fx>"},{"id":"fx-text-trail","title":"Text cursor trail","description":"6.3: the letters of a word fall off the pointer as it moves over the element (option text, color, spacing).","example":"<usa-fx effect=\"text-trail\" trigger=\"load\" options='{\"text\":\"HELLO\"}'>\n  <section class=\"hero\">…</section>\n</usa-fx>"},{"id":"fx-light","title":"Dynamic light, lens & shadow","description":"6.4: light-follow (a point light with a specular hot spot), refraction (a glass lens that bends and magnifies what is behind it) and pointer-shadow (the pointer is the light — a real-time cast shadow). Fixed lighting under reduced motion.","example":"<usa-fx effect=\"light-follow\" trigger=\"load\">\n  <div class=\"card\">…</div>\n</usa-fx>"},{"id":"fx-materials","title":"Brushed metal & pearl","description":"6.4: brushed-metal (fine lines with an anisotropic sheen that turns with the pointer) and pearlescent (a nacre / holographic film whose hues shift as you move).","example":"<usa-fx effect=\"brushed-metal\" trigger=\"load\">\n  <div class=\"card\">…</div>\n</usa-fx>"},{"id":"fx-god-rays","title":"Volumetric light (god rays)","description":"6.4: light shafts fan out from a source point and slowly sweep, drawn additively on Canvas 2D; renders only while visible, one still frame under reduced motion.","example":"<usa-fx effect=\"god-rays\" trigger=\"load\" self class=\"hero\">\n  <h1>Dawn</h1>\n</usa-fx>"},{"id":"fx-depth","title":"3D depth, product spin & orbit","description":"6.5: depth-stack (layers separate in Z and parallax as the card tilts), product-spin (drag to turn with inertia, idle turntable) and orbit-camera (the camera orbits the 3D layers while you scroll).","example":"<usa-fx effect=\"depth-stack\" trigger=\"load\">\n  <div class=\"card\">\n    <img data-depth=\"1\" src=\"bg.png\" alt=\"\">\n    <h3 data-depth=\"3\">Title</h3>\n  </div>\n</usa-fx>"},{"id":"fx-depth-flip","title":"Thick card flip","description":"6.5: card-flip-3d turns a card over to its back face (the second child) with a lift and visible thickness; the faces swap aria-hidden.","example":"<usa-fx effect=\"card-flip-3d\">\n  <div class=\"card\">\n    <div>Front</div>\n    <div>Back</div>\n  </div>\n</usa-fx>"},{"id":"fx-origami","title":"Origami unfold","description":"6.5: origami unfolds the element panel by panel like folded paper (enter effect; skipped under reduced motion).","example":"<usa-fx effect=\"origami\" trigger=\"enter\">\n  <article>…</article>\n</usa-fx>"},{"id":"fx-morph","title":"Path morph & stroke draw","description":"6.6: path-morph flows an SVG path between any shapes (resampled points, so different commands morph smoothly); stroke-draw draws every stroke of an SVG, then fades the fills in.","example":"<usa-fx effect=\"path-morph\" trigger=\"loop\" options='{\"paths\":[\"M…\",\"M…\"]}'>\n  <svg viewBox=\"0 0 100 100\"><path d=\"M…\"/></svg>\n</usa-fx>"},{"id":"fx-blob","title":"Liquid blob button","description":"6.6: blob-button puts a liquid blob behind the element that wobbles and bulges toward the pointer.","example":"<usa-fx effect=\"blob-button\" trigger=\"load\">\n  <button>Get started</button>\n</usa-fx>"},{"id":"fx-noise","title":"SVG filter reveal & icon swap","description":"6.6: noise-reveal condenses the element out of SVG turbulence (an SVG-filter transition); icon-swap cycles child icons with a gooey blur-scale-rotate morph.","example":"<usa-fx effect=\"noise-reveal\" trigger=\"enter\">\n  <img src=\"hero.jpg\" alt=\"…\">\n</usa-fx>\n<usa-fx effect=\"icon-swap\">\n  <button><span>☀️</span><span>🌙</span></button>\n</usa-fx>"},{"id":"fx-ripple-wipe","title":"Transitions 2.0: ripple dissolve & liquid wipe","description":"6.7: ripple-dissolve grows a circle from the pointer; liquid-wipe sweeps a wavy edge across. pageTransition() runs them inside the View Transitions API; crossDocumentTransitions() gives an MPA the same look.","example":"<usa-fx effect=\"ripple-dissolve\" trigger=\"click\" options='{\"mode\":\"in\"}'>\n  <section>…</section>\n</usa-fx>\n<script type=\"module\">\n  import { pageTransition } from 'motionary/components/fx-transitions';\n  pageTransition(() => render(next), 'liquid-wipe');\n</script>"},{"id":"fx-shatter","title":"Shatter & mosaic flip","description":"6.7: shatter breaks the element into triangular shards that fly together (in) or apart (out); mosaic-flip turns a grid of tiles over in a diagonal wave.","example":"<usa-fx effect=\"shatter\" trigger=\"click\" options='{\"mode\":\"in\",\"pieces\":16}'>\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-fx>"},{"id":"fx-curl","title":"Page curl & camera dolly","description":"6.7: page-curl turns the element like a book page around its left edge with a moving shade; camera-dolly moves it in from depth with a depth-of-field blur.","example":"<usa-fx effect=\"page-curl\" trigger=\"enter\">\n  <article>…</article>\n</usa-fx>"},{"id":"fx-weather","title":"Rain on glass & snowfall","description":"6.8: rain-glass — droplets grow on a window pane and run down leaving trails; snowfall — flakes drift down and pile up along the bottom edge.","example":"<usa-fx effect=\"rain-glass\" trigger=\"load\">\n  <header class=\"hero\">…</header>\n</usa-fx>"},{"id":"fx-storm","title":"Safe lightning & fog","description":"6.8: lightning — branching bolts at most once every 2.5 s or more, glow capped at 22 % and no flash at all under reduced motion (WCAG 2.3.1 safe); fog — layered banks drifting.","example":"<usa-fx effect=\"lightning\" trigger=\"load\" options='{\"interval\":4}'>\n  <section>…</section>\n</usa-fx>"},{"id":"fx-sky","title":"Aurora & day / night cycle","description":"6.8: aurora-veil — curtains of northern lights over a starry sky; day-cycle — dawn, day, dusk and night with the sun and moon on an arc (or a fixed hour).","example":"<usa-fx effect=\"day-cycle\" trigger=\"load\" options='{\"cycle\":30}'>\n  <section>…</section>\n</usa-fx>"},{"id":"fx-cloth","title":"Cloth & rope (Verlet)","description":"6.8: cloth hangs from the top edge and ripples as the pointer passes through; rope swings a weight that the pointer can push. Built on the exported VerletWorld.","example":"<usa-fx effect=\"cloth\" trigger=\"load\">\n  <div class=\"banner\">…</div>\n</usa-fx>"},{"id":"fx-jelly","title":"Soft body & magnet","description":"6.8: soft-body makes the element wobble like jelly as the pointer moves over it; magnet pulls its children toward the pointer on springs.","example":"<usa-fx effect=\"soft-body\" trigger=\"load\">\n  <button>Wobble</button>\n</usa-fx>"},{"id":"fx-pinball","title":"Pinball bumpers","description":"6.8: balls fall through glowing round bumpers that light up on a hit; click to drop another ball.","example":"<usa-fx effect=\"pinball\" trigger=\"load\">\n  <section>…</section>\n</usa-fx>"},{"id":"fx-focus","title":"Focus ring draw & marching ants","description":"6.9: focus-draw draws a rounded ring around the element and fades it; marching-ants keeps a dashed selection border marching (drop targets, selections).","example":"<usa-fx effect=\"focus-draw\" trigger=\"click\">\n  <input placeholder=\"Email\">\n</usa-fx>"},{"id":"fx-success","title":"Success check & highlight sweep","description":"6.9: success-check draws a check over the element on a soft green disc; highlight-sweep sweeps a highlighter stroke behind its text.","example":"<usa-fx effect=\"success-check\" trigger=\"click\">\n  <button>Save</button>\n</usa-fx>"},{"id":"fx-scope","title":"Oscilloscope & radial spectrum","description":"7.1: waveform-scope draws the waveform as a glowing oscilloscope line; radial-spectrum puts the spectrum around a circle that breathes with the bass. Live analyser (enableAudio / <usa-audio>) or a synthetic signal.","example":"<usa-fx effect=\"radial-spectrum\" trigger=\"load\">\n  <section class=\"now-playing\">…</section>\n</usa-fx>"},{"id":"fx-spectrum","title":"Mirrored spectrum & sound particles","description":"7.1: spectrum-mirror — mirrored bars with a floor reflection; sound-particles — particles launched by the bass, coloured by pitch.","example":"<usa-fx effect=\"spectrum-mirror\" trigger=\"load\">\n  <header>…</header>\n</usa-fx>"},{"id":"fx-vinyl","title":"Beat bounce & vinyl spin","description":"7.1: beat-bounce pumps the element with the bass; vinyl-spin turns it like a record at 33⅓ rpm, faster when the music is loud.","example":"<usa-fx effect=\"vinyl-spin\" trigger=\"load\">\n  <img class=\"cover\" src=\"album.jpg\" alt=\"…\">\n</usa-fx>"},{"id":"fx-bars","title":"Bars grow & dots pop","description":"7.2: entrances for any existing chart (SVG or HTML) — bars-grow grows [data-bar] / rect bars from the baseline in a stagger; dots-pop pops scatter / line points in.","example":"<usa-fx effect=\"bars-grow\" trigger=\"enter\">\n  <svg viewBox=\"0 0 100 50\">…<rect …/></svg>\n</usa-fx>"},{"id":"fx-line","title":"Line draw & ring sweep","description":"7.2: line-draw draws every SVG path / polyline / line then fades area fills in; ring-sweep sweeps donut arcs around from 12 o'clock.","example":"<usa-fx effect=\"line-draw\" trigger=\"enter\">\n  <svg …><polyline points=\"…\" /></svg>\n</usa-fx>"},{"id":"fx-flow","title":"Sankey flow & number roll","description":"7.2: sankey-flow runs dashes along the links to show direction and volume (static under reduced motion); number-roll counts [data-value] figures up with locale formatting.","example":"<usa-fx effect=\"sankey-flow\" trigger=\"load\">\n  <svg …><path data-flow d=\"…\" /></svg>\n</usa-fx>"},{"id":"fx-cart","title":"Fly to cart & badge pop","description":"7.3: fly-to-cart sends a ghost of the product on an arc into any [data-cart] target, which bumps when it lands; badge-pop pops a sale badge in with a wobble.","example":"<usa-fx effect=\"fly-to-cart\" trigger=\"click\" options='{\"to\":\"#cart\"}'>\n  <img src=\"shoe.jpg\" alt=\"\">\n</usa-fx>\n<span id=\"cart\">🛒</span>"},{"id":"fx-price","title":"Price flip & stock pulse","description":"7.3: price-flip flips a price like a split-flap board from data-from to its text; stock-pulse rings “only 3 left” with a soft urgency glow (static under reduced motion).","example":"<usa-fx effect=\"price-flip\" trigger=\"enter\"><span data-from=\"129.00\">$89.00</span></usa-fx>\n<usa-fx effect=\"stock-pulse\" trigger=\"load\"><b>Only 3 left</b></usa-fx>"},{"id":"fx-chat","title":"Typing dots & message in","description":"7.4: typing-dots adds the bouncing “…” to any element; message-in pops a chat bubble in from its side (data-side=\"right\" for your own).","example":"<usa-fx effect=\"typing-dots\" trigger=\"load\"><span class=\"bubble\"></span></usa-fx>\n<usa-fx effect=\"message-in\" trigger=\"enter\"><p class=\"bubble\" data-side=\"right\">On my way!</p></usa-fx>"},{"id":"fx-react","title":"Reaction burst & read receipt","description":"7.4: reaction-burst floats the emoji up in a fan on click; read-receipt draws ✓✓ and turns them blue; mention-glow sweeps a highlight behind an @mention.","example":"<usa-fx effect=\"reaction-burst\" trigger=\"click\"><button>❤️</button></usa-fx>\n<usa-fx effect=\"read-receipt\" trigger=\"enter\"><span>Seen</span></usa-fx>"},{"id":"fx-unlock","title":"Achievement unlock & level up","description":"7.5: achievement-unlock slides a toast in with a light sweep and pops its icon; level-up scales the element with a ring shockwave; xp-gain floats “+50 XP”.","example":"<usa-fx effect=\"achievement-unlock\" trigger=\"enter\"><div class=\"toast\"><span data-icon>🏆</span> First win!</div></usa-fx>\n<usa-fx effect=\"xp-gain\" trigger=\"enter\"><b data-xp=\"50\">Quest done</b></usa-fx>"},{"id":"fx-loot","title":"Chest open & coin burst","description":"7.5: chest-open flips the lid and throws sparks; coin-burst arcs coins up out of the element and lets them fall away.","example":"<usa-fx effect=\"chest-open\" trigger=\"click\"><div class=\"chest\"><span data-lid>🟫</span>📦</div></usa-fx>\n<usa-fx effect=\"coin-burst\" trigger=\"click\"><button>Claim</button></usa-fx>"},{"id":"fx-route","title":"Route draw & globe spin","description":"7.6: route-draw draws every SVG path / polyline (or [data-route]) along its length, one after another; globe-spin turns the element in like a globe coming round.","example":"<usa-fx effect=\"route-draw\" trigger=\"enter\">\n  <svg viewBox=\"0 0 200 80\"><path d=\"M10 70 C60 10 120 90 190 20\"/></svg>\n</usa-fx>"},{"id":"fx-pin","title":"Pin drop & marker pulse","description":"7.6: pin-drop lands the element on its spot with a squash and a shadow; marker-pulse sends beacon rings out of it.","example":"<usa-fx effect=\"pin-drop\" trigger=\"enter\"><span class=\"pin\">📍</span></usa-fx>\n<usa-fx effect=\"marker-pulse\" trigger=\"hover\"><span class=\"dot\"></span></usa-fx>"},{"id":"fx-field","title":"Field shake & success","description":"7.7: field-shake shakes an element with a red outline flash (the invalid cue); field-success pulses a green glow and pops a check badge on its corner.","example":"<usa-fx effect=\"field-shake\" trigger=\"click\"><input placeholder=\"Wrong!\"></usa-fx>\n<usa-fx effect=\"field-success\" trigger=\"click\"><input value=\"All good\"></usa-fx>"},{"id":"fx-form-in","title":"Form cascade & floating labels","description":"7.7: form-cascade slides a form's fields and buttons in one after another; label-float raises every label inside and settles it, like floating labels.","example":"<usa-fx effect=\"form-cascade\" trigger=\"enter\">\n  <form>…fields…</form>\n</usa-fx>"},{"id":"fx-stream","title":"Streaming text & thinking glow","description":"7.8: stream-text reveals text word by word like a streamed LLM reply with a blinking caret; thinking-glow breathes a drifting colour glow round an element while a model works.","example":"<usa-fx effect=\"stream-text\" trigger=\"enter\"><p>Here is a streamed answer…</p></usa-fx>\n<usa-fx effect=\"thinking-glow\" trigger=\"loop\"><div class=\"bubble\">Thinking…</div></usa-fx>"},{"id":"fx-voice","title":"Voice wave & generating skeleton","description":"7.8: voice-wave bounces an element's children like voice level bars; gen-skeleton covers content with a shimmering skeleton, then dissolves to reveal it.","example":"<usa-fx effect=\"voice-wave\" trigger=\"click\"><div class=\"bars\"><i></i><i></i><i></i></div></usa-fx>\n<usa-fx effect=\"gen-skeleton\" trigger=\"enter\"><img src=\"generated.png\" alt=\"\"></usa-fx>"},{"id":"fx-fireworks","title":"Fireworks & lantern rise","description":"8.1: firework-burst sends rockets of sparks out of an element in festive colours; lantern-rise floats an element up and sways it in like a Lunar New Year lantern.","example":"<usa-fx effect=\"firework-burst\" trigger=\"click\"><button>Celebrate</button></usa-fx>\n<usa-fx effect=\"lantern-rise\" trigger=\"enter\"><img src=\"lantern.png\" alt=\"\"></usa-fx>"},{"id":"fx-seasonal","title":"Christmas snow & spooky float","description":"8.1: xmas-snow drifts snowflakes down over an element in a loop; spooky-float wobbles and flickers an element like a Halloween ghost.","example":"<usa-fx effect=\"xmas-snow\" trigger=\"loop\"><div class=\"card\">Season’s greetings</div></usa-fx>\n<usa-fx effect=\"spooky-float\" trigger=\"hover\"><span>👻</span></usa-fx>"},{"id":"fx-crt","title":"CRT power-on & pixelate","description":"8.2: crt-power switches an element on like an old CRT — a bright line opens into the picture; pixelate-in resolves it from blocky pixels like an 8-bit sprite.","example":"<usa-fx effect=\"crt-power\" trigger=\"enter\"><img src=\"screen.png\" alt=\"\"></usa-fx>\n<usa-fx effect=\"pixelate-in\" trigger=\"enter\"><img src=\"sprite.png\" alt=\"\"></usa-fx>"},{"id":"fx-vhs","title":"VHS glitch & Y2K shine","description":"8.2: vhs-glitch jitters an element with VHS tracking noise and an RGB split; y2k-shine sweeps a chrome highlight across it with a little bounce.","example":"<usa-fx effect=\"vhs-glitch\" trigger=\"hover\"><h2>REWIND</h2></usa-fx>\n<usa-fx effect=\"y2k-shine\" trigger=\"click\"><button>Shiny</button></usa-fx>"},{"id":"fx-vine","title":"Vine growth & bloom","description":"8.3: vine-grow grows SVG paths along their length like a vine and pops leaves in along the way; bloom unfolds an element’s children from the centre like petals.","example":"<usa-fx effect=\"vine-grow\" trigger=\"enter\"><svg viewBox=\"0 0 200 80\"><path d=\"M5 75 C60 10 120 90 195 10\"/><circle data-leaf cx=\"70\" cy=\"40\" r=\"6\"/></svg></usa-fx>\n<usa-fx effect=\"bloom\" trigger=\"enter\"><div class=\"flower\"><i></i><i></i><i></i></div></usa-fx>"},{"id":"fx-drop","title":"Water drop & breathe","description":"8.3: water-drop dips an element like a drop hitting water and sends concentric ripples out; breathe slowly morphs its shape and scale like a living blob.","example":"<usa-fx effect=\"water-drop\" trigger=\"click\"><button>Drop</button></usa-fx>\n<usa-fx effect=\"breathe\" trigger=\"loop\"><div class=\"blob\"></div></usa-fx>"},{"id":"fx-hud","title":"HUD frame & scanline","description":"8.4: hud-frame draws corner brackets in around an element and sweeps a scan bar across it like a HUD locking on; scanline-sweep runs a bright scanline down it.","example":"<usa-fx effect=\"hud-frame\" trigger=\"enter\"><div class=\"card\">Target</div></usa-fx>\n<usa-fx effect=\"scanline-sweep\" trigger=\"click\"><button>Scan</button></usa-fx>"},{"id":"fx-hologram","title":"Hologram & data decode","description":"8.4: hologram gives an element a flickering translucent cyan look with drifting scan bands; data-decode resolves text from random glyphs to the real characters, left to right.","example":"<usa-fx effect=\"hologram\" trigger=\"loop\"><div class=\"badge\">HOLO</div></usa-fx>\n<usa-fx effect=\"data-decode\" trigger=\"enter\"><h2>ACCESS GRANTED</h2></usa-fx>"},{"id":"fx-paper","title":"Paper fold & crumple","description":"8.5: paper-unfold unfolds an element like a folded sheet of paper with a soft crease shadow; crumple scrunches it up like paper and springs it back flat.","example":"<usa-fx effect=\"paper-unfold\" trigger=\"enter\"><div class=\"letter\">Dear reader…</div></usa-fx>\n<usa-fx effect=\"crumple\" trigger=\"click\"><button>Crumple</button></usa-fx>"},{"id":"fx-sketch","title":"Pencil sketch & watercolor","description":"8.5: pencil-sketch draws the SVG strokes inside in with a slightly wobbly pencil, one after another; watercolor bleeds an element in like wet paint spreading from the middle, then dries.","example":"<usa-fx effect=\"pencil-sketch\" trigger=\"enter\"><svg viewBox=\"0 0 100 60\"><path d=\"M5 55 L50 5 L95 55 Z\"/></svg></usa-fx>\n<usa-fx effect=\"watercolor\" trigger=\"enter\"><img src=\"flower.jpg\" alt=\"\"></usa-fx>"},{"id":"fx-neon","title":"Neon ignite & pulse","description":"8.6: neon-ignite powers an element on like a neon tube — a few stuttering flickers, then a steady glow; neon-pulse keeps a slow breathing neon glow around it.","example":"<usa-fx effect=\"neon-ignite\" trigger=\"enter\" color=\"#f0abfc\"><h2>OPEN</h2></usa-fx>\n<usa-fx effect=\"neon-pulse\" trigger=\"loop\"><button>Play</button></usa-fx>"},{"id":"fx-glass","title":"Glass frost & soft press","description":"8.6: glass-frost condenses an element out of frosted glass with a shine passing over it; neu-press gives it a soft neumorphic press — the raised shadow flips inset and pops back.","example":"<usa-fx effect=\"glass-frost\" trigger=\"enter\"><div class=\"glass-card\">…</div></usa-fx>\n<usa-fx effect=\"neu-press\" trigger=\"click\"><button class=\"neu\">Press</button></usa-fx>"},{"id":"fx-gesture-hint","title":"Swipe & pinch hints","description":"8.7: swipe-hint sends a ghost fingertip across an element that nudges along, teaching “swipe me”; pinch-hint pinches two ghost fingertips out while the element zooms.","example":"<usa-fx effect=\"swipe-hint\" trigger=\"enter\" direction=\"left\"><div class=\"card\">…</div></usa-fx>\n<usa-fx effect=\"pinch-hint\" trigger=\"enter\"><img src=\"map.png\" alt=\"\"></usa-fx>"},{"id":"fx-depth-in","title":"Depth-in & tilt wobble","description":"8.7: depth-in flies an element’s children in from different depths like parallax layers settling; tilt-wobble gives it a 3D wobble as if the phone was tilted.","example":"<usa-fx effect=\"depth-in\" trigger=\"enter\"><div data-depth=\"3\">Back</div><div data-depth=\"1\">Front</div></usa-fx>\n<usa-fx effect=\"tilt-wobble\" trigger=\"click\"><button>Wobble</button></usa-fx>"},{"id":"fx-portal","title":"Portal open & orbit-in","description":"8.8: portal-open expands a ring of light and brings the content through from depth; orbit-in swings an element in around the vertical axis like a spatial window placed beside you.","example":"<usa-fx effect=\"portal-open\" trigger=\"enter\" color=\"#a78bfa\"><img src=\"world.jpg\" alt=\"\"></usa-fx>\n<usa-fx effect=\"orbit-in\" trigger=\"enter\" from=\"right\"><div class=\"panel\">…</div></usa-fx>"},{"id":"fx-spatial-float","title":"Spatial float & depth pop","description":"8.8: spatial-float keeps an element gently floating in depth with a breathing shadow; depth-pop pops it forward towards the viewer and settles it back.","example":"<usa-fx effect=\"spatial-float\" trigger=\"loop\"><div class=\"window\">…</div></usa-fx>\n<usa-fx effect=\"depth-pop\" trigger=\"click\"><button>Pop</button></usa-fx>"},{"id":"fx-dolly","title":"Dolly-in & pan reveal","description":"9.1: dolly-in pushes the camera in — the element starts large and soft and settles sharp; pan-reveal pans across it while a wipe uncovers it.","example":"<usa-fx effect=\"dolly-in\" trigger=\"enter\"><img src=\"hero.jpg\" alt=\"\"></usa-fx>\n<usa-fx effect=\"pan-reveal\" trigger=\"enter\" from=\"right\"><img src=\"city.jpg\" alt=\"\"></usa-fx>"},{"id":"fx-letterbox","title":"Letterbox & rack focus","description":"9.1: letterbox slides cinema bars in, holds, then opens up to reveal the element; rack-focus pulls focus from the first child to the others and back.","example":"<usa-fx effect=\"letterbox\" trigger=\"enter\"><img src=\"scene.jpg\" alt=\"\"></usa-fx>\n<usa-fx effect=\"rack-focus\" trigger=\"click\"><div><b>Near</b><b>Far</b></div></usa-fx>"},{"id":"fx-icon-pop","title":"Icon pop","description":"9.2: icon-pop gives an icon a sticker-like pop with a ring burst; lottie-play replays a Lottie animation on any trigger.","example":"<usa-fx effect=\"icon-pop\" trigger=\"click\" color=\"#f43f5e\"><button aria-label=\"Like\">♥</button></usa-fx>"},{"id":"fx-halftone","title":"Halftone & kaleido","description":"9.3: halftone-in prints an element in through a growing halftone dot screen; kaleido turns a kaleidoscopic overlay over it.","example":"<usa-fx effect=\"halftone-in\" trigger=\"enter\" dot=\"10\"><img src=\"poster.jpg\" alt=\"\"></usa-fx>\n<usa-fx effect=\"kaleido\" trigger=\"loop\"><div class=\"tile\">…</div></usa-fx>"},{"id":"fx-mesh","title":"Mesh drift & grain","description":"9.3: mesh-drift puts a seeded, slowly drifting mesh gradient behind an element; grain-flicker lays animated film grain over it.","example":"<usa-fx effect=\"mesh-drift\" trigger=\"loop\" seed=\"4\" palette=\"ocean\"><section class=\"hero\">…</section></usa-fx>"},{"id":"fx-film","title":"Film burn & jump cut","description":"9.4: film-burn burns a warm light leak across an element as it appears; jump-cut snaps it through two hard edits (zoom, reframe) and back.","example":"<usa-fx effect=\"film-burn\" trigger=\"enter\"><img src=\"still.jpg\" alt=\"\"></usa-fx>\n<usa-fx effect=\"jump-cut\" trigger=\"click\"><figure>…</figure></usa-fx>"},{"id":"fx-safe","title":"Motion-safe attention","description":"9.5: effects that never move anything — focus-glow pulses a focus-ring glow, color-pulse flashes a colour, safe-fade fades in, underline-sweep grows an underline — so attention cues stay safe for vestibular disorders.","example":"<usa-fx effect=\"focus-glow\" trigger=\"click\"><button>Notice me</button></usa-fx>\n<usa-fx effect=\"underline-sweep\" trigger=\"hover\"><a href=\"#\">Read more</a></usa-fx>"},{"id":"fx-gpu-lift","title":"GPU lift & idle reveal","description":"9.6: gpu-lift is a compositor-only hover lift (transform + opacity only, never layout or paint); idle-reveal waits for an idle moment before fading content in.","example":"<usa-fx effect=\"gpu-lift\" trigger=\"hover\"><article class=\"card\">…</article></usa-fx>\n<usa-fx effect=\"idle-reveal\" trigger=\"enter\"><aside>…</aside></usa-fx>"}],"changed":["5.1","5.9","6.0"]},{"id":"gauge","tag":"usa-gauge","title":"Spring gauge","description":"7.2: a semicircular gauge — the needle swings to the value on a damped spring (overshoot, settle), the arc fills in the colour of its zone and the number counts. role=\"meter\".","category":"ui","since":"7.2","keywords":["gauge","meter","needle","dashboard","spring"],"import":{"path":"motionary/components/widgets","define":"defineGauge","register":"defineGauge();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["min","max","zones","unit","label","value"],"events":[],"slots":[],"methods":[],"example":"<usa-gauge value=\"72\" unit=\"%\" label=\"CPU\" zones=\"60:#22c55e,85:#f59e0b,100:#ef4444\"></usa-gauge>","esm":"import { defineGauge } from 'motionary/components/widgets';\n\ndefineGauge(); // registers <usa-gauge>\n\n/* then use it in your HTML:\n<usa-gauge value=\"72\" unit=\"%\" label=\"CPU\" zones=\"60:#22c55e,85:#f59e0b,100:#ef4444\"></usa-gauge>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/gauge","stability":"stable","deprecated":null,"source":"src/components/widgets/gauge.ts","changed":["7.5"]},{"id":"gen-art","tag":"usa-gen-art","title":"Generative artwork","description":"9.3: seeded generative art on a canvas — flow fields, circle packing, Truchet tiles or layered waves in curated palettes; it draws itself in on screen and a tap re-seeds it.","category":"ui","since":"9.3","keywords":["generative","art","canvas","flow field","seed"],"import":{"path":"motionary/components/widgets","define":"defineGenArt","register":"defineGenArt();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["art","seed","palette","label"],"events":["usa:generate"],"slots":[],"methods":["generate","toDataURL"],"example":"<usa-gen-art art=\"flow\" seed=\"7\" palette=\"ocean\" style=\"height:240px\"></usa-gen-art>","esm":"import { defineGenArt } from 'motionary/components/widgets';\n\ndefineGenArt(); // registers <usa-gen-art>\n\n/* then use it in your HTML:\n<usa-gen-art art=\"flow\" seed=\"7\" palette=\"ocean\" style=\"height:240px\"></usa-gen-art>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/gen-art","stability":"stable","deprecated":null,"source":"src/components/widgets/gen-art.ts","changed":[]},{"id":"fx-gesture","tag":"usa-gesture-fx","title":"Gesture triggers","description":"5.7: <usa-gesture-fx> plays any registered effect on a fling (fast release), a two-finger twist or a long press that charges --usa-charge 0 → 1. JS: bindGesture(el, \"fling\", \"tada\").","category":"fx","since":"5.7","keywords":["gesture","fling","twist","rotate","long press","charge","touch"],"import":{"path":"motionary/components/effects","define":"defineGestureFx","register":"defineGestureFx();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["gesture","effect","options","self","velocity","angle","duration"],"events":[],"slots":[],"methods":[],"example":"<usa-gesture-fx gesture=\"long-press\" effect=\"tada\">\n  <button>Hold me</button>\n</usa-gesture-fx>","esm":"import { defineGestureFx } from 'motionary/components/effects';\n\ndefineGestureFx(); // registers <usa-gesture-fx>\n\n/* then use it in your HTML:\n<usa-gesture-fx gesture=\"long-press\" effect=\"tada\">\n  <button>Hold me</button>\n</usa-gesture-fx>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/effects/cursor.ts","changed":[]},{"id":"gesture-sticker","tag":"usa-gesture-sticker","title":"Multi-touch sticker","description":"8.7: a multi-touch sticker — drag with one finger, pinch with two to scale and twist to rotate, all at once, with a lifted shadow while held (wheel / Shift + wheel and keyboard on desktop).","category":"ui","since":"8.7","keywords":["multi-touch","pinch","rotate","drag","sticker"],"import":{"path":"motionary/components/widgets","define":"defineGestureSticker","register":"defineGestureSticker();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["min","max","label"],"events":["usa:transform"],"slots":[],"methods":["transformTo","reset"],"example":"<usa-gesture-sticker label=\"Star sticker\" max=\"3\">\n  <img src=\"star.png\" alt=\"Star\" width=\"120\">\n</usa-gesture-sticker>","esm":"import { defineGestureSticker } from 'motionary/components/widgets';\n\ndefineGestureSticker(); // registers <usa-gesture-sticker>\n\n/* then use it in your HTML:\n<usa-gesture-sticker label=\"Star sticker\" max=\"3\">\n  <img src=\"star.png\" alt=\"Star\" width=\"120\">\n</usa-gesture-sticker>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/gesture-sticker","stability":"stable","deprecated":null,"source":"src/components/widgets/gesture-sticker.ts","changed":[]},{"id":"gl-model","tag":"usa-gl-model","title":"Compressed 3D model (Draco / KTX2)","description":"10.9: <usa-gl-scene> for compressed glTF — Draco meshes and KTX2 (Basis Universal) textures decoded by the official decoders (Google draco3d, Binomial’s Basis Universal transcoder), lazy-loaded optional peers: only the decoder a file needs is fetched. Requires motionary/runtime/gl + format-gltf + gltf-decoders and draco3d (+ the Basis transcoder for KTX2 textures). Its own entry point: motionary/components/gl-model.","category":"ui","since":"10.9","keywords":["3d","gltf","draco","ktx2","basis","compression","webgl"],"import":{"path":"motionary/components/gl-model","define":"defineGlModel","register":"defineGlModel();"},"cdn":"https://unpkg.com/motionary@17/dist/components/gl-model.js","attributes":[],"events":["usa:runtime-missing"],"slots":[],"methods":[],"example":"<usa-gl-model src=\"/models/robot-draco.glb\" controls label=\"Robot\"></usa-gl-model>","esm":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';\nimport { formatGltf } from 'motionary/runtime/format-gltf';\nimport { gltfDecoders } from 'motionary/runtime/gltf-decoders';\nimport { provideGltfDecoder } from 'motionary/runtime/gltf-decoders';\n\nuse(gl, formatGltf, gltfDecoders);\nprovideGltfDecoder('draco', () => import('draco3d')); // lazy: fetched when the first Draco-compressed model loads\nprovideGltfDecoder('ktx2', () => import('/vendor/basis_transcoder.js').then((m) => m.default || window.BASIS)); // lazy: fetched with the first KTX2 texture\nimport { defineGlModel } from 'motionary/components/gl-model';\n\ndefineGlModel(); // registers <usa-gl-model>\n\n/* then use it in your HTML:\n<usa-gl-model src=\"/models/robot-draco.glb\" controls label=\"Robot\"></usa-gl-model>\n*/","requires":["gl","format-gltf","gltf-decoders","draco3d","basis-transcoder"],"tier":"advanced","prerequisites":{"badge":"Requires: motionary/runtime/gl + motionary/runtime/format-gltf + motionary/runtime/gltf-decoders + draco3d + basis_transcoder.js","modules":["motionary/runtime/gl","motionary/runtime/format-gltf","motionary/runtime/gltf-decoders","draco3d","basis_transcoder.js"],"install":"npm i motionary && npm i draco3d && curl -LO https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.js -LO https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.wasm","importAndRegister":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';\nimport { formatGltf } from 'motionary/runtime/format-gltf';\nimport { gltfDecoders } from 'motionary/runtime/gltf-decoders';\nimport { provideGltfDecoder } from 'motionary/runtime/gltf-decoders';\nimport { defineGlModel } from 'motionary/components/gl-model';\n\nuse(gl, formatGltf, gltfDecoders);\nprovideGltfDecoder('draco', () => import('draco3d')); // lazy: fetched when the first Draco-compressed model loads\nprovideGltfDecoder('ktx2', () => import('/vendor/basis_transcoder.js').then((m) => m.default || window.BASIS)); // lazy: fetched with the first KTX2 texture\ndefineGlModel(); // registers <usa-gl-model> — after the prerequisites","order":"Register the core first, then the module: use(gl) also registers the core. CDN: load runtime.iife.js, then runtime/gl.iife.js (it registers itself). Register the core first, then the module: use(formatGltf) also registers the core. CDN: load runtime.iife.js, then runtime/format-gltf.iife.js (it registers itself). Register the core first, then the module: use(gltfDecoders) also registers the core. CDN: load runtime.iife.js, then runtime/gltf-decoders.iife.js (it registers itself). Install draco3d next to motionary, then register the lazy loader with provideGltfDecoder('draco', () => import('draco3d')) before a compressed model loads. Without a bundler: load Google’s draco_decoder.js from gstatic (window.DracoDecoderModule) and provideGltfDecoder('draco', () => window.DracoDecoderModule). Missing → a clear error naming the extension and this line. The transcoder is not published on npm by Binomial: copy basis_transcoder.js + basis_transcoder.wasm (same folder) into your static files, then provideGltfDecoder('ktx2', …) before a KTX2 model loads; or load it from the CDN (window.BASIS) and provideGltfDecoder('ktx2', () => window.BASIS). Missing → a clear error naming the extension and this line.","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gl.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-gltf.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gltf-decoders.iife.js\"></script>\n<script src=\"https://www.gstatic.com/draco/versioned/decoders/1.5.7/draco_decoder.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/gh/BinomialLLC/basis_universal@1.16.4/webgl/transcoder/build/basis_transcoder.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-gl-model src=\"/models/robot-draco.glb\" controls label=\"Robot\"></usa-gl-model>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/gl.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/format-gltf.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/gltf-decoders.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/draco3d.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/basis-transcoder.md"]},"entry":"motionary/widgets/gl-model","stability":"stable","deprecated":null,"source":"src/components/widgets/gl-model.ts","changed":["13.1","13.2","13.3","13.8"]},{"id":"gl-scene","tag":"usa-gl-scene","title":"3D scene (glTF / OBJ)","description":"10.5: a WebGL2 3D viewer on Motionary’s own renderer — glTF 2.0 / GLB and OBJ / MTL models or built-in shapes, PBR-style materials, orbit controls (drag, wheel, pinch, arrow keys), auto-rotate and video textures. Requires motionary/runtime/gl (+ format-gltf for .gltf / .glb, format-obj for .obj, gltf-anim for glTF animation — 10.8) — npm i motionary, then use(gl, formatGltf, formatObj, gltfAnim) before it mounts.","category":"ui","since":"10.5","keywords":["3d","webgl","gltf","glb","obj","model viewer","runtime"],"import":{"path":"motionary/components/widgets","define":"defineGlScene","register":"defineGlScene();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["src","shape","color","metallic","roughness","background","exposure","controls","auto-rotate","video","video-scrub","label","animation","animation-speed"],"events":["usa:error","usa:load","usa:runtime-missing"],"slots":[],"methods":["reload"],"example":"<usa-gl-scene src=\"/models/chair.glb\" controls auto-rotate=\"20\" label=\"Chair\"></usa-gl-scene>","esm":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';\nimport { formatGltf } from 'motionary/runtime/format-gltf';\nimport { formatObj } from 'motionary/runtime/format-obj';\nimport { gltfAnim } from 'motionary/runtime/gltf-anim';\n\nuse(gl, formatGltf, formatObj, gltfAnim);\nimport { defineGlScene } from 'motionary/components/widgets';\n\ndefineGlScene(); // registers <usa-gl-scene>\n\n/* then use it in your HTML:\n<usa-gl-scene src=\"/models/chair.glb\" controls auto-rotate=\"20\" label=\"Chair\"></usa-gl-scene>\n*/","requires":["gl","format-gltf","format-obj","gltf-anim"],"tier":"advanced","prerequisites":{"badge":"Requires: motionary/runtime/gl + motionary/runtime/format-gltf + motionary/runtime/format-obj + motionary/runtime/gltf-anim","modules":["motionary/runtime/gl","motionary/runtime/format-gltf","motionary/runtime/format-obj","motionary/runtime/gltf-anim"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { gl } from 'motionary/runtime/gl';\nimport { formatGltf } from 'motionary/runtime/format-gltf';\nimport { formatObj } from 'motionary/runtime/format-obj';\nimport { gltfAnim } from 'motionary/runtime/gltf-anim';\nimport { defineGlScene } from 'motionary/components/widgets';\n\nuse(gl, formatGltf, formatObj, gltfAnim);\ndefineGlScene(); // registers <usa-gl-scene> — after the prerequisites","order":"Register the core first, then the module: use(gl) also registers the core. CDN: load runtime.iife.js, then runtime/gl.iife.js (it registers itself). Register the core first, then the module: use(formatGltf) also registers the core. CDN: load runtime.iife.js, then runtime/format-gltf.iife.js (it registers itself). Register the core first, then the module: use(formatObj) also registers the core. CDN: load runtime.iife.js, then runtime/format-obj.iife.js (it registers itself). Register the core first, then the module: use(gltfAnim) also registers the core. CDN: load runtime.iife.js, then runtime/gltf-anim.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gl.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-gltf.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-obj.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/gltf-anim.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-gl-scene src=\"/models/chair.glb\" controls auto-rotate=\"20\" label=\"Chair\"></usa-gl-scene>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/gl.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/format-gltf.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/format-obj.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/gltf-anim.md"]},"entry":"motionary/widgets/gl-scene","stability":"stable","deprecated":null,"source":"src/components/widgets/gl-scene.ts","variants":[{"id":"gl-scene","title":"3D scene (glTF / OBJ)","description":"10.5: a WebGL2 3D viewer on Motionary’s own renderer — glTF 2.0 / GLB and OBJ / MTL models or built-in shapes, PBR-style materials, orbit controls (drag, wheel, pinch, arrow keys), auto-rotate and video textures. Requires motionary/runtime/gl (+ format-gltf for .gltf / .glb, format-obj for .obj, gltf-anim for glTF animation — 10.8) — npm i motionary, then use(gl, formatGltf, formatObj, gltfAnim) before it mounts.","example":"<usa-gl-scene src=\"/models/chair.glb\" controls auto-rotate=\"20\" label=\"Chair\"></usa-gl-scene>"},{"id":"gl-skinned","title":"3D animation (glTF skin + morph)","description":"10.8: <usa-gl-scene animation> plays glTF animations — skeletal skinning (4 joints per vertex), morph targets and LINEAR / STEP / CUBICSPLINE channels — on Motionary’s own WebGL2 renderer. Pick a clip by name or index, set animation-speed; reduced motion shows the first pose. Requires motionary/runtime/gl + motionary/runtime/format-gltf + motionary/runtime/gltf-anim (+ format-obj for .obj models) — npm i motionary, then use(gl, formatGltf, formatObj, gltfAnim).","example":"<usa-gl-scene src=\"/models/robot.glb\" animation=\"walk\" controls label=\"Walking robot\"></usa-gl-scene>"}],"changed":["10.8","10.9","11.0","11.3","13.1","13.3","13.8"]},{"id":"glitch","tag":"usa-glitch","title":"Glitch text","description":"An RGB-split, sliced glitch — always on or on hover.","category":"text","since":"2.8","keywords":["glitch","cyberpunk"],"import":{"path":"motionary/components/text","define":"defineGlitch","register":"defineGlitch();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["text","intensity"],"events":[],"slots":[],"methods":["mount","splitChars"],"example":"<usa-glitch trigger=\"hover\">SYSTEM ERROR</usa-glitch>","esm":"import { defineGlitch } from 'motionary/components/text';\n\ndefineGlitch(); // registers <usa-glitch>\n\n/* then use it in your HTML:\n<usa-glitch trigger=\"hover\">SYSTEM ERROR</usa-glitch>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/text-fx.ts","changed":[]},{"id":"globe","tag":"usa-globe","title":"Spinning globe","description":"7.6: an SVG globe in orthographic projection — graticule, pulsing markers, spins while on screen, drag to turn it, flyTo(name) brings a city round to the front. No WebGL, no tiles.","category":"ui","since":"7.6","keywords":["globe","map","geo","earth","markers"],"import":{"path":"motionary/components/widgets","define":"defineGlobe","register":"defineGlobe();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["markers","speed","tilt","lon"],"events":["usa:focus"],"slots":[],"methods":["flyTo"],"example":"<usa-globe markers=\"Shanghai:31.2,121.5; London:51.5,-0.1; New York:40.7,-74\"></usa-globe>\n<script>addEventListener('DOMContentLoaded', () => { const globe = document.querySelector('usa-globe'); globe.flyTo('London'); });</script>","esm":"import { defineGlobe } from 'motionary/components/widgets';\n\ndefineGlobe(); // registers <usa-globe>\n\n/* then use it in your HTML:\n<usa-globe markers=\"Shanghai:31.2,121.5; London:51.5,-0.1; New York:40.7,-74\"></usa-globe>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/globe","stability":"stable","deprecated":null,"source":"src/components/widgets/globe.ts","changed":[]},{"id":"gpu-particles","tag":"usa-gpu-particles","title":"GPU particle canvas","description":"10.5 (WebGPU effects 2.0): tens of thousands of particles simulated by a WebGPU compute shader and drawn as instanced quads — swirl, galaxy or fountain, pointer repulsion, trails; Canvas 2D fallback where WebGPU is missing.","category":"ui","since":"10.5","keywords":["webgpu","compute shader","particles","gpu","canvas"],"import":{"path":"motionary/components/widgets","define":"defineGpuParticles","register":"defineGpuParticles();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["count","mode","colors","size","speed","trail","pointer","label"],"events":["usa:backend"],"slots":[],"methods":[],"example":"<usa-gpu-particles count=\"30000\" mode=\"galaxy\" colors=\"#818cf8,#f472b6\" pointer></usa-gpu-particles>","esm":"import { defineGpuParticles } from 'motionary/components/widgets';\n\ndefineGpuParticles(); // registers <usa-gpu-particles>\n\n/* then use it in your HTML:\n<usa-gpu-particles count=\"30000\" mode=\"galaxy\" colors=\"#818cf8,#f472b6\" pointer></usa-gpu-particles>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/gpu-particles","stability":"stable","deprecated":null,"source":"src/components/widgets/gpu-particles.ts","changed":["11.8"]},{"id":"gradient-text","tag":"usa-gradient-text","title":"Gradient flow","description":"Text filled with a multi-colour gradient that keeps flowing.","category":"text","since":"2.8","keywords":["gradient","background-clip"],"import":{"path":"motionary/components/text","define":"defineGradientText","register":"defineGradientText();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["colors","speed","angle"],"events":[],"slots":[],"methods":["mount","splitChars"],"example":"<usa-gradient-text colors=\"#7c5cff,#22d3ee,#f472b6\">Gradient</usa-gradient-text>","esm":"import { defineGradientText } from 'motionary/components/text';\n\ndefineGradientText(); // registers <usa-gradient-text>\n\n/* then use it in your HTML:\n<usa-gradient-text colors=\"#7c5cff,#22d3ee,#f472b6\">Gradient</usa-gradient-text>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/text-fx.ts","changed":[]},{"id":"grain","tag":"usa-grain","title":"Film grain","description":"An SVG-noise grain overlay — no image to ship. animated makes it jitter like film.","category":"background","since":"2.2","keywords":["noise","overlay"],"import":{"path":"motionary/components/background","define":"defineGrain","register":"defineGrain();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["opacity","blend","scale"],"events":[],"slots":[],"methods":[],"example":"<usa-grain animated opacity=\"0.15\">\n  <img src=\"hero.jpg\" alt=\"\">\n</usa-grain>","esm":"import { defineGrain } from 'motionary/components/background';\n\ndefineGrain(); // registers <usa-grain>\n\n/* then use it in your HTML:\n<usa-grain animated opacity=\"0.15\">\n  <img src=\"hero.jpg\" alt=\"\">\n</usa-grain>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/grain.ts","changed":[]},{"id":"grid-glow","tag":"usa-grid-glow","title":"Grid glow","description":"A line grid behind the content that lights up around the pointer.","category":"background","since":"2.8","keywords":["grid","pointer","mask"],"import":{"path":"motionary/components/background","define":"defineGridGlow","register":"defineGridGlow();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["size","radius","color"],"events":[],"slots":[],"methods":["mount"],"example":"<usa-grid-glow size=\"32\">\n  <h2>Hero</h2>\n</usa-grid-glow>","esm":"import { defineGridGlow } from 'motionary/components/background';\n\ndefineGridGlow(); // registers <usa-grid-glow>\n\n/* then use it in your HTML:\n<usa-grid-glow size=\"32\">\n  <h2>Hero</h2>\n</usa-grid-glow>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/bg-fx.ts","changed":[]},{"id":"gyro-card","tag":"usa-gyro-card","title":"Gyro 3D card","description":"8.7: a 3D card that tilts with the phone’s gyroscope (and with the pointer on desktop), with a moving glare and layers that float at different depths.","category":"ui","since":"8.7","keywords":["gyroscope","tilt","3d card","device orientation","parallax"],"import":{"path":"motionary/components/widgets","define":"defineGyroCard","register":"defineGyroCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["max","glare"],"events":["usa:tilt"],"slots":[],"methods":["tilt","wobble"],"example":"<usa-gyro-card max=\"15\">\n  <h3 data-depth=\"2\">Gyro</h3>\n  <p data-depth=\"1\">Tilt your phone</p>\n</usa-gyro-card>","esm":"import { defineGyroCard } from 'motionary/components/widgets';\n\ndefineGyroCard(); // registers <usa-gyro-card>\n\n/* then use it in your HTML:\n<usa-gyro-card max=\"15\">\n  <h3 data-depth=\"2\">Gyro</h3>\n  <p data-depth=\"1\">Tilt your phone</p>\n</usa-gyro-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/gyro-card","stability":"stable","deprecated":null,"source":"src/components/widgets/gyro-card.ts","changed":["11.8"]},{"id":"handwriting","tag":"usa-handwriting","title":"Handwriting draw","description":"The text draws itself stroke by stroke, then fills in — signatures, hero words.","category":"text","since":"2.8","keywords":["SVG","stroke","signature"],"import":{"path":"motionary/components/text","define":"defineHandwriting","register":"defineHandwriting();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["text","size","font","stroke","duration"],"events":["usa:complete"],"slots":[],"methods":["mount","splitChars"],"example":"<usa-handwriting text=\"Thank you\" size=\"72\"></usa-handwriting>","esm":"import { defineHandwriting } from 'motionary/components/text';\n\ndefineHandwriting(); // registers <usa-handwriting>\n\n/* then use it in your HTML:\n<usa-handwriting text=\"Thank you\" size=\"72\"></usa-handwriting>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/text-fx.ts","changed":["4.0"]},{"id":"hero-video","tag":"usa-hero-video","title":"Hero video","description":"9.4: a full-bleed hero with a background video — poster first, cross-fade to the video, a readable scrim, an always-there pause button and an optional scroll-scrubbed mode.","category":"ui","since":"9.4","keywords":["hero","video","background","scroll","banner"],"import":{"path":"motionary/components/widgets","define":"defineHeroVideo","register":"defineHeroVideo();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","scrub","poster"],"events":[],"slots":[],"methods":["toggle"],"example":"<usa-hero-video label=\"Welcome\" poster=\"poster.jpg\">\n  <video src=\"hero.mp4\" autoplay muted loop playsinline></video>\n  <h1>Motion, declared.</h1>\n</usa-hero-video>","esm":"import { defineHeroVideo } from 'motionary/components/widgets';\n\ndefineHeroVideo(); // registers <usa-hero-video>\n\n/* then use it in your HTML:\n<usa-hero-video label=\"Welcome\" poster=\"poster.jpg\">\n  <video src=\"hero.mp4\" autoplay muted loop playsinline></video>\n  <h1>Motion, declared.</h1>\n</usa-hero-video>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/hero-video","stability":"stable","deprecated":null,"source":"src/components/widgets/hero-video.ts","changed":[]},{"id":"hold","tag":"usa-hold","title":"Hold to confirm","description":"Press and hold (pointer, Space or Enter) while a ring fills; releasing early rewinds. For destructive actions.","category":"click","since":"2.5","keywords":["long-press","progress ring","confirm"],"import":{"path":"motionary/components/click","define":"defineHold","register":"defineHold();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["duration","disabled","color","label"],"events":["usa:progress","usa:confirm","usa:cancel"],"slots":[],"methods":["cancel"],"example":"<usa-hold duration=\"1200\" label=\"Delete project\">Hold to delete</usa-hold>","esm":"import { defineHold } from 'motionary/components/click';\n\ndefineHold(); // registers <usa-hold>\n\n/* then use it in your HTML:\n<usa-hold duration=\"1200\" label=\"Delete project\">Hold to delete</usa-hold>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/hold.ts","changed":[]},{"id":"hud-panel","tag":"usa-hud-panel","title":"HUD panel","description":"8.4: a sci-fi HUD panel — angled corners, a glowing frame that draws itself in when the panel scrolls into view, a header with a blinking status light, and data rows that fill in as animated bar readouts.","category":"ui","since":"8.4","keywords":["hud","sci-fi","cyber","panel","dashboard"],"import":{"path":"motionary/components/widgets","define":"defineHudPanel","register":"defineHudPanel();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["title","status","color"],"events":["usa:boot"],"slots":[],"methods":["boot"],"example":"<usa-hud-panel title=\"SHIP STATUS\" status=\"ONLINE\">\n  <p data-value=\"82\">Shields</p>\n  <p data-value=\"47\">Fuel</p>\n</usa-hud-panel>","esm":"import { defineHudPanel } from 'motionary/components/widgets';\n\ndefineHudPanel(); // registers <usa-hud-panel>\n\n/* then use it in your HTML:\n<usa-hud-panel title=\"SHIP STATUS\" status=\"ONLINE\">\n  <p data-value=\"82\">Shields</p>\n  <p data-value=\"47\">Fuel</p>\n</usa-hud-panel>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/hud-panel","stability":"stable","deprecated":null,"source":"src/components/widgets/hud-panel.ts","changed":["8.9"]},{"id":"hydrate","tag":"usa-hydrate","title":"SSR hydration animation","description":"8.0: server-rendered children animate in on hydration — hidden only while JS is on and not yet upgraded (ssrHead() in the head, 3 s CSS fallback), then staggered in on the unified clock.","category":"ui","since":"8.0","keywords":["ssr","hydration","next.js","nuxt","enter"],"import":{"path":"motionary/components/widgets","define":"defineHydrate","register":"defineHydrate();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["effect","stagger","duration"],"events":["usa:hydrated"],"slots":[],"methods":["replay"],"example":"<!-- <head> -->${ssrHead()}\n<usa-hydrate effect=\"fade-up\" stagger=\"80\">\n  <h1>Server-rendered title</h1>\n  <p>…</p>\n</usa-hydrate>\n<!-- or: <section data-usa-hydrate=\"blur\">…</section> + hydrateMotion() -->","esm":"import { defineHydrate } from 'motionary/components/widgets';\n\ndefineHydrate(); // registers <usa-hydrate>\n\n/* then use it in your HTML:\n<!-- <head> -->${ssrHead()}\n<usa-hydrate effect=\"fade-up\" stagger=\"80\">\n  <h1>Server-rendered title</h1>\n  <p>…</p>\n</usa-hydrate>\n<!-- or: <section data-usa-hydrate=\"blur\">…</section> + hydrateMotion() -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/hydrate","stability":"stable","deprecated":null,"source":"src/components/widgets/hydrate.ts","changed":[]},{"id":"icon-morph","tag":"usa-icon-morph","title":"Icon morph","description":"Icons that morph point-by-point with a spring: play ↔ pause, menu ↔ close, plus ↔ minus, check, arrow. toggle makes it a button with per-icon labels.","category":"click","since":"2.5","keywords":["play/pause","menu/close","SVG","spring"],"import":{"path":"motionary/components/click","define":"defineIconMorph","register":"defineIconMorph();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["icons","size","toggle","index","preset","labels"],"events":["usa:change"],"slots":[],"methods":["next","show"],"example":"<usa-icon-morph icons=\"play,pause\" labels=\"Play,Pause\" toggle></usa-icon-morph>\n<usa-icon-morph icons=\"menu,close\" labels=\"Open menu,Close menu\" toggle></usa-icon-morph>","esm":"import { defineIconMorph } from 'motionary/components/click';\n\ndefineIconMorph(); // registers <usa-icon-morph>\n\n/* then use it in your HTML:\n<usa-icon-morph icons=\"play,pause\" labels=\"Play,Pause\" toggle></usa-icon-morph>\n<usa-icon-morph icons=\"menu,close\" labels=\"Open menu,Close menu\" toggle></usa-icon-morph>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/icon-morph.ts","changed":["6.6"]},{"id":"install-button","tag":"usa-install-button","title":"Install button","description":"10.1: one-click install snippet with npm / pnpm / yarn / bun / CDN tabs and a copy button that confirms with a check; `cdn` sets the URL of the CDN tab.","category":"ui","since":"10.1","keywords":["install","npm","cdn","copy","snippet"],"import":{"path":"motionary/components/widgets","define":"defineInstallButton","register":"defineInstallButton();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["package","managers","cdn","dev","manager"],"events":["usa:copy"],"slots":[],"methods":["command","copy"],"example":"<usa-install-button package=\"motionary\" managers=\"npm pnpm yarn bun cdn\" cdn=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></usa-install-button>","esm":"import { defineInstallButton } from 'motionary/components/widgets';\n\ndefineInstallButton(); // registers <usa-install-button>\n\n/* then use it in your HTML:\n<usa-install-button package=\"motionary\" managers=\"npm pnpm yarn bun cdn\" cdn=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></usa-install-button>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/install-button","stability":"stable","deprecated":null,"source":"src/components/widgets/install-button.ts","changed":["13.1"]},{"id":"kanban","tag":"usa-kanban","title":"Kanban board (drag-sort)","description":"6.8: drag cards between columns — the card lifts and tilts toward the drag, a placeholder opens where it will land and the other cards glide aside (FLIP). Full keyboard support: Space picks up, arrows move, Space drops.","category":"layout","since":"6.8","keywords":["kanban","drag and drop","sortable","board","trello"],"import":{"path":"motionary/components/widgets","define":"defineKanban","register":"defineKanban();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label"],"events":["usa:move"],"slots":[],"methods":["cardsOf","move"],"example":"<usa-kanban label=\"Sprint\">\n  <section data-title=\"To do\">\n    <h3>To do</h3>\n    <div data-card>Design</div>\n    <div data-card>Write docs</div>\n  </section>\n  <section data-title=\"Done\"><h3>Done</h3></section>\n</usa-kanban>","esm":"import { defineKanban } from 'motionary/components/widgets';\n\ndefineKanban(); // registers <usa-kanban>\n\n/* then use it in your HTML:\n<usa-kanban label=\"Sprint\">\n  <section data-title=\"To do\">\n    <h3>To do</h3>\n    <div data-card>Design</div>\n    <div data-card>Write docs</div>\n  </section>\n  <section data-title=\"Done\"><h3>Done</h3></section>\n</usa-kanban>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/kanban","stability":"stable","deprecated":null,"source":"src/components/widgets/kanban.ts","changed":[]},{"id":"keyframe-editor","tag":"usa-keyframe-editor","title":"Animation editor 2.0","description":"6.9: a compact timeline for <usa-player> JSON — drag a bar to move a track, drag its edge to resize, scrub the playhead or press play; exports format use-scroll-animate/animation v1.","category":"timeline","since":"6.9","keywords":["editor","timeline","keyframes","json","player"],"import":{"path":"motionary/components/widgets","define":"defineKeyframeEditor","register":"defineKeyframeEditor();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["for"],"events":["usa:change"],"slots":[],"methods":["toJSON","play","seek"],"example":"<div id=\"hero\"><h1>Title</h1><div class=\"card\">…</div><button>Go</button></div>\n<usa-keyframe-editor for=\"hero\"></usa-keyframe-editor>\n<script>\n  const editor = document.querySelector('usa-keyframe-editor');\n  editor.addEventListener('usa:change', (e) => save(e.detail.animation));\n</script>","esm":"import { defineKeyframeEditor } from 'motionary/components/widgets';\n\ndefineKeyframeEditor(); // registers <usa-keyframe-editor>\n\n/* then use it in your HTML:\n<div id=\"hero\"><h1>Title</h1><div class=\"card\">…</div><button>Go</button></div>\n<usa-keyframe-editor for=\"hero\"></usa-keyframe-editor>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/keyframe-editor","stability":"stable","deprecated":null,"source":"src/components/widgets/keyframe-editor.ts","changed":[]},{"id":"kpi","tag":"usa-kpi","title":"KPI card","description":"7.2: the value counts up keeping prefix, suffix and decimals (\"$12.4k\", \"98.2%\"), the delta chip slides in with an arrow coloured by sign, and an optional trend draws a sparkline. Setting value rolls and flashes the card.","category":"ui","since":"7.2","keywords":["kpi","metric","counter","dashboard","stat"],"import":{"path":"motionary/components/widgets","define":"defineKpi","register":"defineKpi();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","delta","caption","trend","invert","locale"],"events":[],"slots":[],"methods":[],"example":"<usa-kpi label=\"Revenue\" value=\"$48.2k\" delta=\"+12.5%\" trend=\"4,6,5,9,8,12\" caption=\"vs last month\"></usa-kpi>","esm":"import { defineKpi } from 'motionary/components/widgets';\n\ndefineKpi(); // registers <usa-kpi>\n\n/* then use it in your HTML:\n<usa-kpi label=\"Revenue\" value=\"$48.2k\" delta=\"+12.5%\" trend=\"4,6,5,9,8,12\" caption=\"vs last month\"></usa-kpi>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/kpi","stability":"stable","deprecated":null,"source":"src/components/widgets/kpi.ts","changed":["13.1"]},{"id":"leaderboard","tag":"usa-leaderboard","title":"Leaderboard","description":"7.5: a ranked list — when scores change, rows glide to their new rank, climbers flash green with ▲n and fallers red with ▼n, scores roll and the top three get medals.","category":"ui","since":"7.5","keywords":["leaderboard","ranking","score","game","flip"],"import":{"path":"motionary/components/widgets","define":"defineLeaderboard","register":"defineLeaderboard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","limit","me"],"events":["usa:rank"],"slots":[],"methods":["setScore"],"example":"<usa-leaderboard me=\"Ada\">\n  <li data-score=\"980\">Ada</li>\n  <li data-score=\"870\">Alan</li>\n  <li data-score=\"760\">Grace</li>\n</usa-leaderboard>\n<script>addEventListener('DOMContentLoaded', () => { const board = document.querySelector('usa-leaderboard'); board.setScore('Grace', 1000); });</script>","esm":"import { defineLeaderboard } from 'motionary/components/widgets';\n\ndefineLeaderboard(); // registers <usa-leaderboard>\n\n/* then use it in your HTML:\n<usa-leaderboard me=\"Ada\">\n  <li data-score=\"980\">Ada</li>\n  <li data-score=\"870\">Alan</li>\n  <li data-score=\"760\">Grace</li>\n</usa-leaderboard>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/leaderboard","stability":"stable","deprecated":null,"source":"src/components/widgets/leaderboard.ts","changed":[]},{"id":"like","tag":"usa-like","title":"Like button","description":"A heart that pops with a spring and bursts into particles; aria-pressed, optional count.","category":"click","since":"2.5","keywords":["heart","burst","aria-pressed"],"import":{"path":"motionary/components/click","define":"defineLike","register":"defineLike();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["liked","count","label","disabled","size","color","haptic"],"events":["usa:change"],"slots":[],"methods":["toggle"],"example":"<usa-like count=\"128\"></usa-like>","esm":"import { defineLike } from 'motionary/components/click';\n\ndefineLike(); // registers <usa-like>\n\n/* then use it in your HTML:\n<usa-like count=\"128\"></usa-like>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/click/like.ts","changed":[]},{"id":"liquid","tag":"usa-liquid","title":"Liquid image","description":"Click or tap to send water ripples through the image; hover adds a gentle wobble. The plain image stays when WebGL is unavailable.","category":"webgl","since":"3.4","keywords":["ripple","liquid","water","image"],"import":{"path":"motionary/components/webgl","define":"defineLiquid","register":"defineLiquid();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":[],"events":[],"slots":[],"methods":[],"example":"<usa-liquid strength=\"1\">\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-liquid>","esm":"import { defineLiquid } from 'motionary/components/webgl';\n\ndefineLiquid(); // registers <usa-liquid>\n\n/* then use it in your HTML:\n<usa-liquid strength=\"1\">\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-liquid>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/webgl/elements.ts","changed":["4.0","13.1"]},{"id":"liquid-nav","tag":"usa-liquid-nav","title":"Liquid nav","description":"8.3: a navigation bar whose active indicator is a drop of liquid — it stretches like a droplet towards the next item and settles with a wobble (gooey SVG filter).","category":"ui","since":"8.3","keywords":["nav","liquid","gooey","tabs","indicator"],"import":{"path":"motionary/components/widgets","define":"defineLiquidNav","register":"defineLiquidNav();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","value"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-liquid-nav label=\"Main\">\n  <a href=\"/\" aria-current=\"page\">Home</a><a href=\"/shop\">Shop</a><a href=\"/about\">About</a>\n</usa-liquid-nav>","esm":"import { defineLiquidNav } from 'motionary/components/widgets';\n\ndefineLiquidNav(); // registers <usa-liquid-nav>\n\n/* then use it in your HTML:\n<usa-liquid-nav label=\"Main\">\n  <a href=\"/\" aria-current=\"page\">Home</a><a href=\"/shop\">Shop</a><a href=\"/about\">About</a>\n</usa-liquid-nav>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/liquid-nav","stability":"stable","deprecated":null,"source":"src/components/widgets/liquid-nav.ts","changed":[]},{"id":"loading-bar","tag":"usa-loading-bar","title":"Top loading bar","description":"A slim NProgress-style bar for route changes and fetches: loadingBar.start() trickles, done() completes and fades.","category":"page","since":"2.7","keywords":["loadingBar","route change","role=progressbar"],"import":{"path":"motionary/components/page","define":"defineLoadingBar","register":"defineLoadingBar();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["label","color","height"],"events":[],"slots":[],"methods":["start","set","done"],"example":"<script type=\"module\">\n  import { loadingBar } from 'motionary/components/page';\n  await loadingBar.track(new Promise((done) => setTimeout(done, 400))); // any promise, e.g. fetch('/api')\n</script>","esm":"import { defineLoadingBar } from 'motionary/components/page';\n\ndefineLoadingBar(); // registers <usa-loading-bar>\n\n/* then use it in your HTML:\n\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/loading-bar.ts","changed":[]},{"id":"location-card","tag":"usa-location-card","title":"Location card","description":"7.6: a place card with a stylised mini map — the route from the origin draws itself, the pin drops in with a bounce and a ring pulses; distance computed with haversine (km or mi).","category":"ui","since":"7.6","keywords":["location","map","pin","distance","card"],"import":{"path":"motionary/components/widgets","define":"defineLocationCard","register":"defineLocationCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["name","address","lat","lon","from-lat","from-lon","distance","href","unit"],"events":["usa:arrive"],"slots":[],"methods":["replay"],"example":"<usa-location-card name=\"Blue Bottle\" address=\"66 Mint St, San Francisco\"\n  lat=\"37.782\" lon=\"-122.407\" from-lat=\"37.776\" from-lon=\"-122.394\" href=\"https://maps.example/…\"></usa-location-card>","esm":"import { defineLocationCard } from 'motionary/components/widgets';\n\ndefineLocationCard(); // registers <usa-location-card>\n\n/* then use it in your HTML:\n<usa-location-card name=\"Blue Bottle\" address=\"66 Mint St, San Francisco\"\n  lat=\"37.782\" lon=\"-122.407\" from-lat=\"37.776\" from-lon=\"-122.394\" href=\"https://maps.example/…\"></usa-location-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/location-card","stability":"stable","deprecated":null,"source":"src/components/widgets/location-card.ts","changed":[]},{"id":"lottie","tag":"usa-lottie","title":"Lottie player","description":"9.2: plays Lottie (After Effects / bodymovin) files without lottie-web — vector layers render as SVG and their keyframes run as native animations on Motionary’s clock.","category":"ui","since":"9.2","keywords":["lottie","after effects","bodymovin","import","svg"],"import":{"path":"motionary/components/widgets","define":"defineLottie","register":"defineLottie();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["src","loop","speed","label"],"events":["usa:error","usa:load","usa:complete"],"slots":[],"methods":["play","pause","stop"],"example":"<usa-lottie src=\"confetti.json\" autoplay loop label=\"Celebration\"></usa-lottie>","esm":"import { defineLottie } from 'motionary/components/widgets';\n\ndefineLottie(); // registers <usa-lottie>\n\n/* then use it in your HTML:\n<usa-lottie src=\"confetti.json\" autoplay loop label=\"Celebration\"></usa-lottie>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/lottie","stability":"stable","deprecated":null,"source":"src/components/widgets/lottie.ts","changed":[]},{"id":"lottie-icon","tag":"usa-lottie-icon","title":"Animated icon set","description":"9.2: an animated icon set shipped as tiny Lottie files — heart beat, bell swing, check draw-in, spinner, star twinkle, bolt zap — on click, hover, enter or loop.","category":"ui","since":"9.2","keywords":["icons","lottie","animated icons","micro-interaction","svg"],"import":{"path":"motionary/components/widgets","define":"defineLottieIcon","register":"defineLottieIcon();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["name","size","color","label","trigger"],"events":[],"slots":[],"methods":["play"],"example":"<usa-lottie-icon name=\"heart\" trigger=\"click\" size=\"32\" label=\"Like\"></usa-lottie-icon>\n<usa-lottie-icon name=\"bell\" trigger=\"hover\"></usa-lottie-icon>","esm":"import { defineLottieIcon } from 'motionary/components/widgets';\n\ndefineLottieIcon(); // registers <usa-lottie-icon>\n\n/* then use it in your HTML:\n<usa-lottie-icon name=\"heart\" trigger=\"click\" size=\"32\" label=\"Like\"></usa-lottie-icon>\n<usa-lottie-icon name=\"bell\" trigger=\"hover\"></usa-lottie-icon>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/lottie-icon","stability":"stable","deprecated":null,"source":"src/components/widgets/lottie-icon.ts","changed":["11.8"]},{"id":"lottie-player","tag":"usa-lottie-player","title":"Lottie player (JSON + dotLottie)","description":"10.6: plays Lottie JSON and dotLottie (.lottie) files with Motionary’s own Canvas 2D renderer — shapes, gradients, trim paths, masks, track mattes, precomps and images; autoplay, loop, bounce, segments / markers, play on hover or scrub with scroll. Requires motionary/runtime/vector — npm i motionary, then use(vector) before it mounts.","category":"ui","since":"10.6","keywords":["lottie","dotlottie","bodymovin","vector animation","player","runtime"],"import":{"path":"motionary/components/widgets","define":"defineLottiePlayer","register":"defineLottiePlayer();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["src","animation","autoplay","loop","speed","mode","segment","hover","scrub","fit","background","label"],"events":["usa:complete","usa:load","usa:error","usa:runtime-missing"],"slots":[],"methods":["play","pause","stop","seek"],"example":"<usa-lottie-player src=\"/anim/hero.lottie\" autoplay loop label=\"Hero animation\"></usa-lottie-player>","esm":"import { use } from 'motionary/runtime';\nimport { vector } from 'motionary/runtime/vector';\n\nuse(vector);\nimport { defineLottiePlayer } from 'motionary/components/widgets';\n\ndefineLottiePlayer(); // registers <usa-lottie-player>\n\n/* then use it in your HTML:\n<usa-lottie-player src=\"/anim/hero.lottie\" autoplay loop label=\"Hero animation\"></usa-lottie-player>\n*/","requires":["vector"],"tier":"standard","prerequisites":{"badge":"Requires: motionary/runtime/vector","modules":["motionary/runtime/vector"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { vector } from 'motionary/runtime/vector';\nimport { defineLottiePlayer } from 'motionary/components/widgets';\n\nuse(vector);\ndefineLottiePlayer(); // registers <usa-lottie-player> — after the prerequisites","order":"Register the core first, then the module: use(vector) also registers the core. CDN: load runtime.iife.js, then runtime/vector.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/vector.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-lottie-player src=\"/anim/hero.lottie\" autoplay loop label=\"Hero animation\"></usa-lottie-player>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/vector.md"]},"entry":"motionary/widgets/lottie-player","stability":"stable","deprecated":null,"source":"src/components/widgets/lottie-player.ts","variants":[{"id":"lottie-player","title":"Lottie player (JSON + dotLottie)","description":"10.6: plays Lottie JSON and dotLottie (.lottie) files with Motionary’s own Canvas 2D renderer — shapes, gradients, trim paths, masks, track mattes, precomps and images; autoplay, loop, bounce, segments / markers, play on hover or scrub with scroll. Requires motionary/runtime/vector — npm i motionary, then use(vector) before it mounts.","example":"<usa-lottie-player src=\"/anim/hero.lottie\" autoplay loop label=\"Hero animation\"></usa-lottie-player>"},{"id":"lottie-text","title":"Lottie text + expressions","description":"10.8: the Lottie player now draws text layers (fonts by family and style, justification, tracking, line height, fill and stroke, wrapping box text, source-text keyframes) and runs an expression subset — time, value, wiggle, loopOut / loopIn, linear / ease, Math — with its own interpreter (no eval, CSP-safe). Requires motionary/runtime/vector — npm i motionary, then use(vector).","example":"<usa-lottie-player src=\"/anim/title.json\" autoplay loop label=\"Animated title\"></usa-lottie-player>"}],"changed":["10.9"]},{"id":"lyrics","tag":"usa-lyrics","title":"Synced karaoke lyrics","description":"7.1: LRC or [data-t] lines; the active line glows, scrolls to the centre and a highlight sweeps across it while past lines dim. Follows an <audio>, <video> or <usa-music-player> via for.","category":"text","since":"7.1","keywords":["lyrics","karaoke","lrc","music","sync"],"import":{"path":"motionary/components/widgets","define":"defineLyrics","register":"defineLyrics();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","for"],"events":["usa:seek"],"slots":[],"methods":[],"example":"<usa-lyrics for=\"player\">\n  <script type=\"text/plain\">\n[00:01.00] First line\n[00:04.50] Second line\n  </script>\n</usa-lyrics>","esm":"import { defineLyrics } from 'motionary/components/widgets';\n\ndefineLyrics(); // registers <usa-lyrics>\n\n/* then use it in your HTML:\n<usa-lyrics for=\"player\">\n  </usa-lyrics>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/lyrics","stability":"stable","deprecated":null,"source":"src/components/widgets/lyrics.ts","changed":[]},{"id":"magnetic","tag":"usa-magnetic","title":"Magnetic button","description":"Content leans toward the pointer when it comes near and springs back. Fine pointers only; off under reduced motion.","category":"interaction","since":"2.2","keywords":["pointer","spring"],"import":{"path":"motionary/components/interaction","define":"defineMagnetic","register":"defineMagnetic();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["strength","radius","disabled"],"events":[],"slots":[],"methods":[],"example":"<usa-magnetic strength=\"0.4\"><button>Hover near me</button></usa-magnetic>","esm":"import { defineMagnetic } from 'motionary/components/interaction';\n\ndefineMagnetic(); // registers <usa-magnetic>\n\n/* then use it in your HTML:\n<usa-magnetic strength=\"0.4\"><button>Hover near me</button></usa-magnetic>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/interaction/magnetic.ts","changed":[]},{"id":"marquee","tag":"usa-marquee","title":"Marquee","description":"A seamless infinite ticker with constant speed, pause on hover, soft edges and vertical mode. Clones are hidden from AT.","category":"background","since":"2.2","keywords":["infinite","logos"],"import":{"path":"motionary/components/background","define":"defineMarquee","register":"defineMarquee();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["speed","direction","gap","paused","pause-on-hover"],"events":[],"slots":[],"methods":["pause","resume"],"example":"<usa-marquee speed=\"50\" pause-on-hover fade>\n  <img src=\"logo-a.svg\" alt=\"A\">\n  <img src=\"logo-b.svg\" alt=\"B\">\n</usa-marquee>","esm":"import { defineMarquee } from 'motionary/components/background';\n\ndefineMarquee(); // registers <usa-marquee>\n\n/* then use it in your HTML:\n<usa-marquee speed=\"50\" pause-on-hover fade>\n  <img src=\"logo-a.svg\" alt=\"A\">\n  <img src=\"logo-b.svg\" alt=\"B\">\n</usa-marquee>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/marquee.ts","changed":[]},{"id":"mask-reveal","tag":"usa-mask-reveal","title":"Mask reveal","description":"Reveal images or sections through a growing mask: circle, diamond, star, iris or wipes, from any origin.","category":"svg","since":"3.3","keywords":["mask","clip-path","reveal","image"],"import":{"path":"motionary/components/svg","define":"defineMaskReveal","register":"defineMaskReveal();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["shape","at","duration","delay","trigger","repeat"],"events":["usa:complete"],"slots":[],"methods":["reveal"],"example":"<usa-mask-reveal shape=\"circle\" at=\"20% 30%\">\n  <img src=\"hero.jpg\" alt=\"…\">\n</usa-mask-reveal>","esm":"import { defineMaskReveal } from 'motionary/components/svg';\n\ndefineMaskReveal(); // registers <usa-mask-reveal>\n\n/* then use it in your HTML:\n<usa-mask-reveal shape=\"circle\" at=\"20% 30%\">\n  <img src=\"hero.jpg\" alt=\"…\">\n</usa-mask-reveal>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/svg/mask-reveal.ts","changed":["4.0","11.8"]},{"id":"masonry","tag":"usa-masonry","title":"Masonry","description":"Pinterest-style masonry: items drop into the shortest column and glide when the width, the items or their sizes change. CSS columns before JS runs.","category":"layout","since":"3.6","keywords":["masonry","pinterest","grid","gallery"],"import":{"path":"motionary/components/layout","define":"defineMasonry","register":"defineMasonry();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["columns","min","gap"],"events":[],"slots":[],"methods":["enable","disable"],"example":"<usa-masonry min=\"220\" gap=\"16\">\n  <img src=\"1.jpg\" alt=\"…\">\n  <img src=\"2.jpg\" alt=\"…\">\n</usa-masonry>","esm":"import { defineMasonry } from 'motionary/components/layout';\n\ndefineMasonry(); // registers <usa-masonry>\n\n/* then use it in your HTML:\n<usa-masonry min=\"220\" gap=\"16\">\n  <img src=\"1.jpg\" alt=\"…\">\n  <img src=\"2.jpg\" alt=\"…\">\n</usa-masonry>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/layout/elements.ts","changed":["6.5"]},{"id":"masonry-flow","tag":"usa-masonry-flow","title":"Masonry with layout animation","description":"6.5: a masonry grid whose items glide to their new places (FLIP) on resize, insert / remove, filter(), shuffle() and sort(); hidden items scale out, new ones scale in.","category":"layout","since":"6.5","keywords":["masonry","grid","flip","filter","shuffle","layout"],"import":{"path":"motionary/components/widgets","define":"defineMasonryFlow","register":"defineMasonryFlow();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["min","gap"],"events":["usa:layout"],"slots":[],"methods":["layout","filter","shuffle","sort"],"example":"<usa-masonry-flow min=\"160\" gap=\"12\">\n  <img src=\"1.jpg\" alt=\"…\">\n  <img src=\"2.jpg\" alt=\"…\">\n  …\n</usa-masonry-flow>\n<!-- grid.filter('.cats'), grid.shuffle(), grid.sort((a, b) => …) -->","esm":"import { defineMasonryFlow } from 'motionary/components/widgets';\n\ndefineMasonryFlow(); // registers <usa-masonry-flow>\n\n/* then use it in your HTML:\n<usa-masonry-flow min=\"160\" gap=\"12\">\n  <img src=\"1.jpg\" alt=\"…\">\n  <img src=\"2.jpg\" alt=\"…\">\n  …\n</usa-masonry-flow>\n<!-- grid.filter('.cats'), grid.shuffle(), grid.sort((a, b) => …) -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/masonry-flow","stability":"stable","deprecated":null,"source":"src/components/widgets/masonry-flow.ts","changed":[]},{"id":"menu","tag":"usa-menu","title":"Dropdown menu","description":"6.3: the list scales (or folds / slides) out of its button and the items cascade in. Full menu keyboard support — arrows, Home / End, Esc, Tab — and outside clicks close it.","category":"ui","since":"6.3","keywords":["menu","dropdown","context","popover","keyboard"],"import":{"path":"motionary/components/widgets","define":"defineMenu","register":"defineMenu();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["placement","effect"],"events":["usa:select","usa:open","usa:close"],"slots":[],"methods":["open","close","toggle"],"example":"<usa-menu placement=\"bottom-start\" effect=\"scale\">\n  <button>Actions ▾</button>\n  <button>Edit</button>\n  <button>Duplicate</button>\n  <hr>\n  <button>Delete</button>\n</usa-menu>","esm":"import { defineMenu } from 'motionary/components/widgets';\n\ndefineMenu(); // registers <usa-menu>\n\n/* then use it in your HTML:\n<usa-menu placement=\"bottom-start\" effect=\"scale\">\n  <button>Actions ▾</button>\n  <button>Edit</button>\n  <button>Duplicate</button>\n  <hr>\n  <button>Delete</button>\n</usa-menu>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/menu","stability":"stable","deprecated":null,"source":"src/components/widgets/menu.ts","changed":[]},{"id":"menu-toggle","tag":"usa-menu-toggle","title":"Hamburger → close","description":"6.6: the three bars morph into a cross, a back arrow, a minus or a spinning plus-to-cross; a real toggle button with aria-expanded that can open the element it controls (for).","category":"click","since":"6.6","keywords":["hamburger","menu","toggle","close","icon morph"],"import":{"path":"motionary/components/widgets","define":"defineMenuToggle","register":"defineMenuToggle();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["variant","label","for"],"events":["usa:toggle"],"slots":[],"methods":["toggle"],"example":"<usa-menu-toggle for=\"site-menu\" variant=\"cross\" label=\"Menu\"></usa-menu-toggle>\n<nav id=\"site-menu\" hidden>…</nav>","esm":"import { defineMenuToggle } from 'motionary/components/widgets';\n\ndefineMenuToggle(); // registers <usa-menu-toggle>\n\n/* then use it in your HTML:\n<usa-menu-toggle for=\"site-menu\" variant=\"cross\" label=\"Menu\"></usa-menu-toggle>\n<nav id=\"site-menu\" hidden>…</nav>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/menu-toggle","stability":"stable","deprecated":null,"source":"src/components/widgets/menu-toggle.ts","changed":[]},{"id":"message-list","tag":"usa-message-list","title":"Chat thread","description":"7.4: a chat thread — new bubbles pop in from their side, consecutive messages group, the list sticks to the bottom (or shows a “↓ New messages” pill when you scrolled up) and typing(name) shows animated typing dots.","category":"ui","since":"7.4","keywords":["chat","messages","bubbles","typing","social"],"import":{"path":"motionary/components/widgets","define":"defineMessageList","register":"defineMessageList();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label"],"events":["usa:message"],"slots":[],"methods":["push","typing"],"example":"<usa-message-list>\n  <p data-from=\"Ada\">Hi! 👋</p>\n  <p data-me>Hey Ada</p>\n</usa-message-list>\n<script>addEventListener('DOMContentLoaded', () => { const list = document.querySelector('usa-message-list'); list.typing('Ada'); list.push({ from: 'Ada', text: 'Ship it?' }); });</script>","esm":"import { defineMessageList } from 'motionary/components/widgets';\n\ndefineMessageList(); // registers <usa-message-list>\n\n/* then use it in your HTML:\n<usa-message-list>\n  <p data-from=\"Ada\">Hi! 👋</p>\n  <p data-me>Hey Ada</p>\n</usa-message-list>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/message-list","stability":"stable","deprecated":null,"source":"src/components/widgets/message-list.ts","changed":[]},{"id":"milestones","tag":"usa-milestones","title":"Scroll-drawn milestones","description":"6.5: a progress line grows down the rail as you scroll; each milestone pops its dot and slides its card in when the line reaches it. Alternating sides on wide screens, one column on phones; data-date labels.","category":"timeline","since":"6.5","keywords":["timeline","milestones","roadmap","history","scroll"],"import":{"path":"motionary/components/widgets","define":"defineMilestones","register":"defineMilestones();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["layout"],"events":["usa:reach"],"slots":[],"methods":[],"example":"<usa-milestones>\n  <div data-date=\"2024\"><h3>Idea</h3><p>…</p></div>\n  <div data-date=\"2025\"><h3>Beta</h3><p>…</p></div>\n  <div data-date=\"2026\"><h3>Launch</h3><p>…</p></div>\n</usa-milestones>","esm":"import { defineMilestones } from 'motionary/components/widgets';\n\ndefineMilestones(); // registers <usa-milestones>\n\n/* then use it in your HTML:\n<usa-milestones>\n  <div data-date=\"2024\"><h3>Idea</h3><p>…</p></div>\n  <div data-date=\"2025\"><h3>Beta</h3><p>…</p></div>\n  <div data-date=\"2026\"><h3>Launch</h3><p>…</p></div>\n</usa-milestones>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/milestones","stability":"stable","deprecated":null,"source":"src/components/widgets/milestones.ts","changed":[]},{"id":"modal","tag":"usa-modal","title":"Modal dialog","description":"6.3: native <dialog> (top layer, focus trap, Esc) with animated open / close and a blurred backdrop — scale, slide-up, flip, or origin: it grows out of the button that opened it. Focus returns to the opener.","category":"transitions","since":"6.3","keywords":["modal","dialog","popup","backdrop","focus-trap"],"import":{"path":"motionary/components/widgets","define":"defineModal","register":"defineModal();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["effect","label","persistent"],"events":["usa:open","usa:close"],"slots":[],"methods":["show","close","toggle"],"example":"<button data-usa-open=\"welcome\">Open</button>\n<usa-modal id=\"welcome\" effect=\"origin\" label=\"Welcome\">\n  <h2>Hello 👋</h2>\n  <p>…</p>\n  <button data-usa-close=\"ok\">Got it</button>\n</usa-modal>","esm":"import { defineModal } from 'motionary/components/widgets';\n\ndefineModal(); // registers <usa-modal>\n\n/* then use it in your HTML:\n<button data-usa-open=\"welcome\">Open</button>\n<usa-modal id=\"welcome\" effect=\"origin\" label=\"Welcome\">\n  <h2>Hello 👋</h2>\n  <p>…</p>\n  <button data-usa-close=\"ok\">Got it</button>\n</usa-modal>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/modal","stability":"stable","deprecated":null,"source":"src/components/widgets/overlay.ts","changed":["6.6","13.0","13.1","13.3"]},{"id":"morph","tag":"usa-morph","title":"Path morph","description":"Morph an SVG path through a list of shapes (paths=\"A | B | C\") on click, hover, in view or automatically. Same-structure paths morph point by point.","category":"svg","since":"3.3","keywords":["morph","blob","shape","path"],"import":{"path":"motionary/components/svg","define":"defineMorph","register":"defineMorph();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["paths","trigger","duration","interval"],"events":["usa:change"],"slots":[],"methods":["next"],"example":"<usa-morph trigger=\"auto\" interval=\"1800\"\n  paths=\"M50 10 C75 10 90 30 90 50 C90 75 70 90 50 90 C25 90 10 70 10 50 C10 30 25 10 50 10 Z | M50 4 C80 20 96 26 86 54 C78 84 64 96 44 86 C14 80 4 64 14 44 C20 20 30 0 50 4 Z\"></usa-morph>","esm":"import { defineMorph } from 'motionary/components/svg';\n\ndefineMorph(); // registers <usa-morph>\n\n/* then use it in your HTML:\n<usa-morph trigger=\"auto\" interval=\"1800\"\n  paths=\"M50 10 C75 10 90 30 90 50 C90 75 70 90 50 90 C25 90 10 70 10 50 C10 30 25 10 50 10 Z | M50 4 C80 20 96 26 86 54 C78 84 64 96 44 86 C14 80 4 64 14 44 C20 20 30 0 50 4 Z\"></usa-morph>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/svg/morph.ts","changed":[]},{"id":"motion","tag":"usa-motion","title":"Motion DSL","description":"9.0: the declarative motion DSL — describe motion as one readable string (“enter: fade-up 600ms stagger 80ms; hover: pop”) on <usa-motion> or any element’s data-motion, no JavaScript per element.","category":"ui","since":"9.0","keywords":["dsl","declarative","data-motion","stagger","no-code"],"import":{"path":"motionary/components/widgets","define":"defineMotion","register":"defineMotion();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["rules"],"events":["usa:motion-error"],"slots":[],"methods":[],"example":"<usa-motion rules=\"enter: fade-up 600ms ease-out stagger 80ms; hover: pop\">\n  <div class=\"card\">One</div><div class=\"card\">Two</div><div class=\"card\">Three</div>\n</usa-motion>\n\n<!-- or on any element, with applyMotion() from motionary/dsl -->\n<section data-motion=\"enter: fade-up 500ms; click: confetti count=40\">…</section>","esm":"import { defineMotion } from 'motionary/components/widgets';\n\ndefineMotion(); // registers <usa-motion>\n\n/* then use it in your HTML:\n<usa-motion rules=\"enter: fade-up 600ms ease-out stagger 80ms; hover: pop\">\n  <div class=\"card\">One</div><div class=\"card\">Two</div><div class=\"card\">Three</div>\n</usa-motion>\n\n<!-- or on any element, with applyMotion() from motionary/dsl -->\n<section data-motion=\"enter: fade-up 500ms; click: confetti count=40\">…</section>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/motion","stability":"stable","deprecated":null,"source":"src/components/widgets/motion.ts","changed":[]},{"id":"motion-inspector","tag":"usa-motion-inspector","title":"Motion inspector","description":"10.2: a live panel listing the running animations in a scope (CSS animations, transitions, element.animate(), components) with state and progress, plus the motionary/runtime ticker when present — pause / play all, 0.25× slow motion and per-row scrub.","category":"ui","since":"10.2","keywords":["devtools","debug","inspector","animations","slow motion"],"import":{"path":"motionary/components/widgets","define":"defineMotionInspector","register":"defineMotionInspector();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["scope","interval"],"events":["usa:change"],"slots":[],"methods":["refresh","pauseAll","playAll","setRate","animations"],"example":"<usa-motion-inspector scope=\"#app\" interval=\"500\"></usa-motion-inspector>","esm":"import { defineMotionInspector } from 'motionary/components/widgets';\n\ndefineMotionInspector(); // registers <usa-motion-inspector>\n\n/* then use it in your HTML:\n<usa-motion-inspector scope=\"#app\" interval=\"500\"></usa-motion-inspector>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/motion-inspector","stability":"stable","deprecated":null,"source":"src/components/widgets/motion-inspector.ts","changed":["13.1"]},{"id":"motion-prefs","tag":"usa-motion-prefs","title":"Motion preference panel","description":"9.5: a motion settings panel for your users — motion level (full, gentle, minimal, none), animation speed, pause autoplaying video, no parallax — applied instantly to every Motionary animation and remembered.","category":"ui","since":"9.5","keywords":["accessibility","reduced motion","settings","vestibular","preferences"],"import":{"path":"motionary/components/widgets","define":"defineMotionPrefs","register":"defineMotionPrefs();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label"],"events":["usa:change"],"slots":[],"methods":["reset"],"example":"<usa-motion-prefs></usa-motion-prefs>","esm":"import { defineMotionPrefs } from 'motionary/components/widgets';\n\ndefineMotionPrefs(); // registers <usa-motion-prefs>\n\n/* then use it in your HTML:\n<usa-motion-prefs></usa-motion-prefs>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/motion-prefs","stability":"stable","deprecated":null,"source":"src/components/widgets/motion-prefs.ts","changed":[]},{"id":"motion-prompt","tag":"usa-motion-prompt","title":"Motion prompt (text → motion)","description":"10.7 (AI-assisted motion): describe a motion in English or Chinese and get a live preview plus ready code — Web Animations, CSS (with a reduced-motion guard) or a Motionary component. A small deterministic parser (motionary/components/ai), no model and no network; the same parser powers suggest_motion in motionary-mcp 2.0.","category":"ui","since":"10.7","keywords":["ai","natural language","prompt","motion spec","code generator","mcp"],"import":{"path":"motionary/components/widgets","define":"defineMotionPrompt","register":"defineMotionPrompt();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["value","format","placeholder","label"],"events":["usa:suggest","usa:copy"],"slots":[],"methods":["suggest"],"example":"<usa-motion-prompt value=\"fade the cards up slowly, one after another\"></usa-motion-prompt>","esm":"import { defineMotionPrompt } from 'motionary/components/widgets';\n\ndefineMotionPrompt(); // registers <usa-motion-prompt>\n\n/* then use it in your HTML:\n<usa-motion-prompt value=\"fade the cards up slowly, one after another\"></usa-motion-prompt>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/motion-prompt","stability":"stable","deprecated":null,"source":"src/components/widgets/motion-prompt.ts","changed":["11.0","11.6"]},{"id":"motion-spec","tag":"usa-motion-spec","title":"Motion spec sheet","description":"9.7: a motion spec sheet for design hand-off — each rule of a motion string with its trigger, a duration bar on a shared timeline and the easing curve, a Play playhead and Copy CSS; pairs with the Figma plugin and Framer export of motionary/design.","category":"ui","since":"9.7","keywords":["design handoff","figma","framer","spec","easing"],"import":{"path":"motionary/components/widgets","define":"defineMotionSpec","register":"defineMotionSpec();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["rules","label"],"events":["usa:copy"],"slots":[],"methods":["play"],"example":"<usa-motion-spec label=\"Card entrance\" rules=\"enter: fade-up 600ms ease-out stagger 80ms; hover: pop 300ms spring\"></usa-motion-spec>","esm":"import { defineMotionSpec } from 'motionary/components/widgets';\n\ndefineMotionSpec(); // registers <usa-motion-spec>\n\n/* then use it in your HTML:\n<usa-motion-spec label=\"Card entrance\" rules=\"enter: fade-up 600ms ease-out stagger 80ms; hover: pop 300ms spring\"></usa-motion-spec>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/motion-spec","stability":"stable","deprecated":null,"source":"src/components/widgets/motion-spec.ts","changed":[]},{"id":"motion-switch","tag":"usa-motion-switch","title":"Motion intensity","description":"Let users pick Off · Low · Normal · High for the whole app; scales every component, persists, and Off equals reduced motion.","category":"page","since":"2.7","keywords":["motion","a11y","setMotionIntensity"],"import":{"path":"motionary/components/page","define":"defineMotionSwitch","register":"defineMotionSwitch();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["labels","label"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-motion-switch></usa-motion-switch>\n<!-- or: setMotionIntensity('low', true) -->","esm":"import { defineMotionSwitch } from 'motionary/components/page';\n\ndefineMotionSwitch(); // registers <usa-motion-switch>\n\n/* then use it in your HTML:\n<usa-motion-switch></usa-motion-switch>\n<!-- or: setMotionIntensity('low', true) -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/motion-switch.ts","changed":["4.9","5.0"]},{"id":"fx-theme","tag":"usa-motion-theme","title":"Theme packs","description":"5.8: <usa-motion-theme name> applies a theme pack — design tokens (--usa-theme-*), motion tokens and effect presets per role (enter / hover / click / attention / background). Neon, paper, glass, retro and brutalist; applyMotionTheme() for the whole page.","category":"fx","since":"8.9","keywords":["theme","tokens","neon","paper","glass","retro","brutalist","design system"],"import":{"path":"motionary/components/effects","define":"defineMotionTheme","register":"defineMotionTheme();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["name"],"events":[],"slots":[],"methods":[],"example":"<usa-motion-theme name=\"neon\">\n  <div class=\"usa-surface\">\n    <button data-theme-fx=\"click\">Tap</button>\n  </div>\n</usa-motion-theme>","esm":"import { defineMotionTheme } from 'motionary/components/effects';\n\ndefineMotionTheme(); // registers <usa-motion-theme>\n\n/* then use it in your HTML:\n<usa-motion-theme name=\"neon\">\n  <div class=\"usa-surface\">\n    <button data-theme-fx=\"click\">Tap</button>\n  </div>\n</usa-motion-theme>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/effects/themes.ts","changed":["9.0"]},{"id":"music-player","tag":"usa-music-player","title":"Music player","description":"7.1: the cover spins like a record while playing, play morphs to pause, mini equalizer bars dance and the progress bar is a scrubbable slider. Plays a child <audio> or simulates a track.","category":"ui","since":"7.1","keywords":["music","player","audio","vinyl","media"],"import":{"path":"motionary/components/widgets","define":"defineMusicPlayer","register":"defineMusicPlayer();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["title","artist","cover","src","duration"],"events":["usa:play","usa:pause","usa:seek"],"slots":[],"methods":["play","pause","toggle","seek"],"example":"<usa-music-player title=\"Night Drive\" artist=\"Motionary\" cover=\"cover.jpg\">\n  <audio src=\"track.mp3\"></audio>\n</usa-music-player>","esm":"import { defineMusicPlayer } from 'motionary/components/widgets';\n\ndefineMusicPlayer(); // registers <usa-music-player>\n\n/* then use it in your HTML:\n<usa-music-player title=\"Night Drive\" artist=\"Motionary\" cover=\"cover.jpg\">\n  <audio src=\"track.mp3\"></audio>\n</usa-music-player>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/music-player","stability":"stable","deprecated":null,"source":"src/components/widgets/music-player.ts","changed":[]},{"id":"native-preview","tag":"usa-native-preview","title":"Native preview","description":"9.8: preview web motion as it will feel on a phone — an iOS / Android device frame replays the entrance with the rule’s curve and presses with a spring — and copy the generated React Native and Flutter code.","category":"ui","since":"9.8","keywords":["react native","flutter","native","mobile","code generation"],"import":{"path":"motionary/components/widgets","define":"defineNativePreview","register":"defineNativePreview();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["rules","platform","name"],"events":["usa:replay"],"slots":[],"methods":["replay","code"],"example":"<usa-native-preview platform=\"ios\" rules=\"enter: fade-up 500ms smooth stagger 80ms; click: pop\">\n  <div class=\"row\">Inbox</div><div class=\"row\">Starred</div>\n</usa-native-preview>","esm":"import { defineNativePreview } from 'motionary/components/widgets';\n\ndefineNativePreview(); // registers <usa-native-preview>\n\n/* then use it in your HTML:\n<usa-native-preview platform=\"ios\" rules=\"enter: fade-up 500ms smooth stagger 80ms; click: pop\">\n  <div class=\"row\">Inbox</div><div class=\"row\">Starred</div>\n</usa-native-preview>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/native-preview","stability":"stable","deprecated":null,"source":"src/components/widgets/native-preview.ts","changed":["13.1"]},{"id":"nav-morph","tag":"usa-nav-morph","title":"Navbar with morphing indicator","description":"6.6: the indicator follows the hovered or focused link — stretching from the old one, leading edge first — and settles back on the current page. Underline, pill, blob or dot.","category":"ui","since":"6.6","keywords":["navbar","navigation","underline","indicator","morph"],"import":{"path":"motionary/components/widgets","define":"defineNavMorph","register":"defineNavMorph();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["indicator","label","active"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-nav-morph indicator=\"underline\" label=\"Main\">\n  <a href=\"/\" aria-current=\"page\">Home</a>\n  <a href=\"/docs\">Docs</a>\n  <a href=\"/blog\">Blog</a>\n</usa-nav-morph>","esm":"import { defineNavMorph } from 'motionary/components/widgets';\n\ndefineNavMorph(); // registers <usa-nav-morph>\n\n/* then use it in your HTML:\n<usa-nav-morph indicator=\"underline\" label=\"Main\">\n  <a href=\"/\" aria-current=\"page\">Home</a>\n  <a href=\"/docs\">Docs</a>\n  <a href=\"/blog\">Blog</a>\n</usa-nav-morph>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/nav-morph","stability":"stable","deprecated":null,"source":"src/components/widgets/nav-morph.ts","changed":[]},{"id":"navbar","tag":"usa-navbar","title":"Auto-hide navbar","description":"Hides while you scroll down, slides back on the first scroll up; shrink makes it compact once scrolled. This page’s demo scrolls an inner box.","category":"ui","since":"2.6","keywords":["sticky","scroll","shrink"],"import":{"path":"motionary/components/ui","define":"defineNavbar","register":"defineNavbar();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["target","threshold"],"events":["usa:hide","usa:show"],"slots":[],"methods":["show"],"example":"<usa-navbar shrink>\n  <header>…</header>\n</usa-navbar>","esm":"import { defineNavbar } from 'motionary/components/ui';\n\ndefineNavbar(); // registers <usa-navbar>\n\n/* then use it in your HTML:\n<usa-navbar shrink>\n  <header>…</header>\n</usa-navbar>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/navbar.ts","changed":["6.6","12.0","13.1"]},{"id":"notification-bell","tag":"usa-notification-bell","title":"Notification bell","description":"7.4: a bell with an unread badge and a dropdown — notify() swings the bell, bumps the badge and slides the notice in; “Mark all read” shrinks the badge away. Esc / outside click close it.","category":"ui","since":"7.4","keywords":["notification","bell","badge","inbox","dropdown"],"import":{"path":"motionary/components/widgets","define":"defineNotificationBell","register":"defineNotificationBell();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label"],"events":["usa:notify","usa:read"],"slots":[],"methods":["notify","markAllRead","ring"],"example":"<usa-notification-bell>\n  <li data-time=\"2m\">Ada liked your post</li>\n</usa-notification-bell>\n<script>addEventListener('DOMContentLoaded', () => { const bell = document.querySelector('usa-notification-bell'); bell.notify({ text: 'New follower', time: 'now' }); });</script>","esm":"import { defineNotificationBell } from 'motionary/components/widgets';\n\ndefineNotificationBell(); // registers <usa-notification-bell>\n\n/* then use it in your HTML:\n<usa-notification-bell>\n  <li data-time=\"2m\">Ada liked your post</li>\n</usa-notification-bell>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/notification-bell","stability":"stable","deprecated":null,"source":"src/components/widgets/notification-bell.ts","changed":[]},{"id":"odometer","tag":"usa-odometer","title":"Odometer counter","description":"6.4: rolling digit wheels — every digit spins forward to its new value, new digits slide in, locale grouping via Intl.NumberFormat, decimals, prefix / suffix. The accessible name is the formatted number.","category":"text","since":"6.4","keywords":["odometer","counter","number","digits","rolling"],"import":{"path":"motionary/components/widgets","define":"defineOdometer","register":"defineOdometer();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["value","locale","decimals","prefix","suffix","duration"],"events":[],"slots":[],"methods":[],"example":"<usa-odometer value=\"1284\" locale=\"en-US\" prefix=\"$\"></usa-odometer>\n<!-- el.value = 2048 rolls every digit -->","esm":"import { defineOdometer } from 'motionary/components/widgets';\n\ndefineOdometer(); // registers <usa-odometer>\n\n/* then use it in your HTML:\n<usa-odometer value=\"1284\" locale=\"en-US\" prefix=\"$\"></usa-odometer>\n<!-- el.value = 2048 rolls every digit -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/odometer","stability":"stable","deprecated":null,"source":"src/components/widgets/meters.ts","changed":[]},{"id":"organic-card","tag":"usa-organic-card","title":"Organic card","description":"8.3: a card with a soft, living blob shape — its outline slowly breathes on screen, morphs on hover and comes in leaf, ocean, petal and sand tints.","category":"ui","since":"8.3","keywords":["card","blob","organic","morph","shape"],"import":{"path":"motionary/components/widgets","define":"defineOrganicCard","register":"defineOrganicCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["tint","seed"],"events":[],"slots":[],"methods":["morph"],"example":"<usa-organic-card tint=\"ocean\">\n  <h3>Deep sea</h3><p>Content…</p>\n</usa-organic-card>","esm":"import { defineOrganicCard } from 'motionary/components/widgets';\n\ndefineOrganicCard(); // registers <usa-organic-card>\n\n/* then use it in your HTML:\n<usa-organic-card tint=\"ocean\">\n  <h3>Deep sea</h3><p>Content…</p>\n</usa-organic-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/organic-card","stability":"stable","deprecated":null,"source":"src/components/widgets/organic-card.ts","changed":[]},{"id":"otp","tag":"usa-otp","title":"OTP code input","description":"7.7: one-time-code boxes that auto-advance, step back on Backspace and take a pasted code; digits pop in, error() shakes the row red, success() sends a green wave across it.","category":"ui","since":"7.7","keywords":["otp","verification","code","pin","2fa"],"import":{"path":"motionary/components/widgets","define":"defineOtp","register":"defineOtp();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["length","mode","label","value"],"events":["usa:complete"],"slots":[],"methods":["fillCode","clear","error","success"],"example":"<usa-otp length=\"6\"></usa-otp>\n<script>const otp = document.querySelector('usa-otp'); otp.addEventListener('usa:complete', (e) => check(e.detail.code) ? otp.success() : otp.error());</script>","esm":"import { defineOtp } from 'motionary/components/widgets';\n\ndefineOtp(); // registers <usa-otp>\n\n/* then use it in your HTML:\n<usa-otp length=\"6\"></usa-otp>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/otp","stability":"stable","deprecated":null,"source":"src/components/widgets/otp.ts","changed":[]},{"id":"overscroll","tag":"usa-overscroll","title":"Elastic overscroll","description":"A scroll container whose edges stretch with iOS-style rubber-band resistance and spring back — touch, trackpad and wheel.","category":"physics","since":"2.3","keywords":["rubber-band","scroll","iOS"],"import":{"path":"motionary/components/physics","define":"defineOverscroll","register":"defineOverscroll();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["axis","disabled","max","preset"],"events":[],"slots":[],"methods":[],"example":"<usa-overscroll style=\"height: 240px\">\n  <ul>…</ul>\n</usa-overscroll>","esm":"import { defineOverscroll } from 'motionary/components/physics';\n\ndefineOverscroll(); // registers <usa-overscroll>\n\n/* then use it in your HTML:\n<usa-overscroll style=\"height: 240px\">\n  <ul>…</ul>\n</usa-overscroll>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/physics/overscroll.ts","changed":[]},{"id":"pack-ecommerce","tag":"usa-pack","title":"E-commerce pack","description":"Product cards reveal and lift, “Add to cart” presses and flies the product into the cart (which bumps), prices count up, badges pulse.","category":"packs","since":"3.9","keywords":["shop","cart","product","fly to cart"],"import":{"path":"motionary/components/packs","define":"definePack","register":"definePack();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["name"],"events":[],"slots":[],"methods":[],"example":"<usa-pack name=\"ecommerce\">\n  <article data-role=\"product\">\n    <img src=\"shoe.jpg\" alt=\"Runner\">\n    <span data-role=\"price\">$129</span>\n    <button data-role=\"add-to-cart\">Add to cart</button>\n  </article>\n  <a data-role=\"cart\" href=\"/cart\">Cart</a>\n</usa-pack>","esm":"import { definePack } from 'motionary/components/packs';\n\ndefinePack(); // registers <usa-pack>\n\n/* then use it in your HTML:\n<usa-pack name=\"ecommerce\">\n  <article data-role=\"product\">\n    <img src=\"shoe.jpg\" alt=\"Runner\">\n    <span data-role=\"price\">$129</span>\n    <button data-role=\"add-to-cart\">Add to cart</button>\n  </article>\n  <a data-role=\"cart\" href=\"/cart\">Cart</a>\n</usa-pack>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/packs/pack-el.ts","variants":[{"id":"pack-ecommerce","title":"E-commerce pack","description":"Product cards reveal and lift, “Add to cart” presses and flies the product into the cart (which bumps), prices count up, badges pulse.","example":"<usa-pack name=\"ecommerce\">\n  <article data-role=\"product\">\n    <img src=\"shoe.jpg\" alt=\"Runner\">\n    <span data-role=\"price\">$129</span>\n    <button data-role=\"add-to-cart\">Add to cart</button>\n  </article>\n  <a data-role=\"cart\" href=\"/cart\">Cart</a>\n</usa-pack>"},{"id":"pack-portfolio","title":"Portfolio pack","description":"Headings and projects reveal in sequence, projects lift on hover, stats count up, the contact button pulses.","example":"<usa-pack name=\"portfolio\">\n  <h2 data-role=\"heading\">Selected work</h2>\n  <a data-role=\"project\" href=\"/work/1\">…</a>\n  <b data-role=\"stat\">120</b> clients\n  <a data-role=\"contact\" href=\"mailto:…\">Say hi</a>\n</usa-pack>"},{"id":"pack-dashboard","title":"Dashboard pack","description":"KPI cards reveal, numbers count up from zero, alerts pulse, action buttons press.","example":"<usa-pack name=\"dashboard\">\n  <div data-role=\"card\">Revenue <b data-role=\"stat\">48,210</b></div>\n  <span data-role=\"alert\">3 incidents</span>\n</usa-pack>"},{"id":"pack-game","title":"Game UI pack","description":"Buttons press, the score counts up and bumps, items float, a hit shakes, rewards pulse.","example":"<usa-pack name=\"game\">\n  <b data-role=\"score\">9,800</b>\n  <img data-role=\"item\" src=\"gem.png\" alt=\"Gem\">\n  <button data-role=\"button\">Play</button>\n</usa-pack>"},{"id":"pack-landing","title":"Landing page pack","description":"Hero and features reveal in sequence, features lift, logos float gently, stats count up, the CTA pulses and presses.","example":"<usa-pack name=\"landing\">\n  <header data-role=\"hero\">…</header>\n  <section data-role=\"feature\">…</section>\n  <a data-role=\"cta\" href=\"/signup\">Start free</a>\n</usa-pack>"}],"changed":[]},{"id":"pagination","tag":"usa-pagination","title":"Pagination with sliding ink","description":"6.7: the highlight springs to the chosen page (squashing on the way) and page numbers slide in from the direction of travel when the window shifts. Prev / next, ellipses, aria-current.","category":"ui","since":"6.7","keywords":["pagination","pages","pager","ink","navigation"],"import":{"path":"motionary/components/widgets","define":"definePagination","register":"definePagination();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["total","siblings","label"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-pagination total=\"20\" page=\"1\" siblings=\"1\"></usa-pagination>","esm":"import { definePagination } from 'motionary/components/widgets';\n\ndefinePagination(); // registers <usa-pagination>\n\n/* then use it in your HTML:\n<usa-pagination total=\"20\" page=\"1\" siblings=\"1\"></usa-pagination>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/pagination","stability":"stable","deprecated":null,"source":"src/components/widgets/pagination.ts","changed":["13.3"]},{"id":"panorama","tag":"usa-panorama","title":"360° panorama viewer","description":"8.8: a 360° panorama — drag or swipe to look around with inertia, a slow auto-rotate, a compass for the heading and a “View in XR” badge when the browser offers WebXR.","category":"ui","since":"8.8","keywords":["panorama","360","webxr","vr","viewer"],"import":{"path":"motionary/components/widgets","define":"definePanorama","register":"definePanorama();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["src","autorotate","label"],"events":["usa:xr","usa:xr-request","usa:look"],"slots":[],"methods":["lookAt"],"example":"<usa-panorama src=\"pano-equirect.jpg\" label=\"Lake at dawn\" autorotate=\"6\"></usa-panorama>","esm":"import { definePanorama } from 'motionary/components/widgets';\n\ndefinePanorama(); // registers <usa-panorama>\n\n/* then use it in your HTML:\n<usa-panorama src=\"pano-equirect.jpg\" label=\"Lake at dawn\" autorotate=\"6\"></usa-panorama>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/panorama","stability":"stable","deprecated":null,"source":"src/components/widgets/panorama.ts","changed":[]},{"id":"parallax-layers","tag":"usa-parallax-layers","title":"Parallax layers","description":"10.4: a parallax container — children with data-depth move at different speeds while it crosses the viewport (native view() scroll timeline first, JS fallback), optional pointer tilt; static under reduced motion.","category":"reveal","since":"10.4","keywords":["parallax","depth","layers","view timeline","scroll-driven"],"import":{"path":"motionary/components/widgets","define":"defineParallaxLayers","register":"defineParallaxLayers();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["range","engine","horizontal","pointer","strength","preview"],"events":["usa:progress"],"slots":[],"methods":["layers"],"example":"<usa-parallax-layers range=\"120\">\n  <img data-depth=\"0.6\" src=\"mountains.webp\" alt=\"\">\n  <h2 data-depth=\"-0.3\">Above the clouds</h2>\n</usa-parallax-layers>","esm":"import { defineParallaxLayers } from 'motionary/components/widgets';\n\ndefineParallaxLayers(); // registers <usa-parallax-layers>\n\n/* then use it in your HTML:\n<usa-parallax-layers range=\"120\">\n  <img data-depth=\"0.6\" src=\"mountains.webp\" alt=\"\">\n  <h2 data-depth=\"-0.3\">Above the clouds</h2>\n</usa-parallax-layers>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/parallax-layers","stability":"stable","deprecated":null,"source":"src/components/widgets/parallax-layers.ts","changed":[]},{"id":"particles","tag":"usa-particles","title":"Particles","description":"A canvas constellation that drifts away from the pointer. Runs only while visible, DPR ≤ 2, a still frame under reduced motion.","category":"background","since":"2.2","keywords":["canvas","interactive"],"import":{"path":"motionary/components/background","define":"defineParticles","register":"defineParticles();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["count","color","size","speed","links","interactive","paused"],"events":[],"slots":[],"methods":["reset"],"example":"<usa-particles count=\"80\" links=\"120\" interactive></usa-particles>","esm":"import { defineParticles } from 'motionary/components/background';\n\ndefineParticles(); // registers <usa-particles>\n\n/* then use it in your HTML:\n<usa-particles count=\"80\" links=\"120\" interactive></usa-particles>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/particles.ts","changed":[]},{"id":"pause-all","tag":"usa-pause-all","title":"Pause all motion","description":"9.5: one button that pauses all motion on the page (WCAG 2.2.2) — Motionary’s shared clock, every CSS / Web animation and autoplaying media — and resumes it again; `scope` limits it to one area.","category":"ui","since":"9.5","keywords":["pause","accessibility","wcag","stop animation","button"],"import":{"path":"motionary/components/widgets","define":"definePauseAll","register":"definePauseAll();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","scope","resume-label"],"events":["usa:pause-all"],"slots":[],"methods":["toggle"],"example":"<usa-pause-all></usa-pause-all>","esm":"import { definePauseAll } from 'motionary/components/widgets';\n\ndefinePauseAll(); // registers <usa-pause-all>\n\n/* then use it in your HTML:\n<usa-pause-all></usa-pause-all>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/pause-all","stability":"stable","deprecated":null,"source":"src/components/widgets/pause-all.ts","changed":[]},{"id":"perf-monitor","tag":"usa-perf-monitor","title":"Perf monitor","description":"9.6: a live performance overlay for motion work — FPS with a sparkline, active Motionary animations, frame-loop callbacks, long tasks and the shared clock — flagging jank.","category":"ui","since":"9.6","keywords":["performance","fps","monitor","debug","jank"],"import":{"path":"motionary/components/widgets","define":"definePerfMonitor","register":"definePerfMonitor();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["corner","warn"],"events":["usa:jank"],"slots":[],"methods":[],"example":"<usa-perf-monitor corner=\"bottom-right\"></usa-perf-monitor>","esm":"import { definePerfMonitor } from 'motionary/components/widgets';\n\ndefinePerfMonitor(); // registers <usa-perf-monitor>\n\n/* then use it in your HTML:\n<usa-perf-monitor corner=\"bottom-right\"></usa-perf-monitor>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/perf-monitor","stability":"stable","deprecated":null,"source":"src/components/widgets/perf-monitor.ts","changed":[]},{"id":"physics-playground","tag":"usa-physics-playground","title":"Physics playground","description":"10.7: a 2D rigid-body sandbox on Motionary’s own physics engine — circles, boxes and polygons, friction, restitution, constraints, sleeping — loaded from a versioned motionary-scene@1 JSON (or a preset: balls, pyramid, pendulum, dominoes). Drag bodies, tap to spawn, arrow keys nudge. Requires motionary/runtime/physics + motionary/runtime/format-scene — npm i motionary, then use(physics, formatScene) before it mounts.","category":"ui","since":"10.7","keywords":["physics","rigid body","gravity","collision","scene json","runtime"],"import":{"path":"motionary/components/widgets","define":"definePhysicsPlayground","register":"definePhysicsPlayground();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["preset","src","gravity","spawn","label"],"events":["usa:collision","usa:load","usa:error","usa:runtime-missing"],"slots":[],"methods":["reset","play","pause","toScene"],"example":"<usa-physics-playground preset=\"pyramid\" spawn label=\"Knock the pyramid over\"></usa-physics-playground>","esm":"import { use } from 'motionary/runtime';\nimport { physics } from 'motionary/runtime/physics';\nimport { formatScene } from 'motionary/runtime/format-scene';\n\nuse(physics, formatScene);\nimport { definePhysicsPlayground } from 'motionary/components/widgets';\n\ndefinePhysicsPlayground(); // registers <usa-physics-playground>\n\n/* then use it in your HTML:\n<usa-physics-playground preset=\"pyramid\" spawn label=\"Knock the pyramid over\"></usa-physics-playground>\n*/","requires":["physics","format-scene"],"tier":"advanced","prerequisites":{"badge":"Requires: motionary/runtime/physics + motionary/runtime/format-scene","modules":["motionary/runtime/physics","motionary/runtime/format-scene"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { physics } from 'motionary/runtime/physics';\nimport { formatScene } from 'motionary/runtime/format-scene';\nimport { definePhysicsPlayground } from 'motionary/components/widgets';\n\nuse(physics, formatScene);\ndefinePhysicsPlayground(); // registers <usa-physics-playground> — after the prerequisites","order":"Register the core first, then the module: use(physics) also registers the core. CDN: load runtime.iife.js, then runtime/physics.iife.js (it registers itself). Register the core first, then the module: use(formatScene) also registers the core. CDN: load runtime.iife.js, then runtime/format-scene.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/physics.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/format-scene.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-physics-playground preset=\"pyramid\" spawn label=\"Knock the pyramid over\"></usa-physics-playground>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/physics.md","https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/format-scene.md"]},"entry":"motionary/widgets/physics-playground","stability":"stable","deprecated":null,"source":"src/components/widgets/physics-playground.ts","changed":[]},{"id":"pinch-zoom","tag":"usa-pinch-zoom","title":"Pinch zoom","description":"Pinch with two fingers or Ctrl + wheel / trackpad pinch, pan while zoomed, double-tap to toggle; scale and position spring back inside the bounds.","category":"gesture","since":"3.2","keywords":["pinch","zoom","double tap","trackpad"],"import":{"path":"motionary/components/gesture","define":"definePinchZoom","register":"definePinchZoom();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["min","max","preset","double-tap"],"events":["usa:zoom"],"slots":[],"methods":["zoomTo"],"example":"<usa-pinch-zoom max=\"4\">\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-pinch-zoom>","esm":"import { definePinchZoom } from 'motionary/components/gesture';\n\ndefinePinchZoom(); // registers <usa-pinch-zoom>\n\n/* then use it in your HTML:\n<usa-pinch-zoom max=\"4\">\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-pinch-zoom>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/gesture/pinch-zoom.ts","changed":[]},{"id":"fx-player","tag":"usa-player","title":"JSON animation player","description":"5.9: <usa-player> plays a JSON animation — timeline presets, your own keyframes and any registered effect on a shared clock; play / pause / seek / rate / loop, scroll-scrubbing (trigger=\"scroll\"). Export one from the Playground (<usa-player> JSON tab).","category":"fx","since":"5.9","keywords":["player","json","lottie","timeline","keyframes","scrub","export"],"import":{"path":"motionary/components/effects","define":"definePlayer","register":"definePlayer();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["src","trigger","loop","rate","controls"],"events":["usa:finish","usa:ready"],"slots":[],"methods":["load","play","pause","seek"],"example":"<usa-player src=\"hero.json\" trigger=\"view\">\n  <h1>Title</h1>\n  <a class=\"cta\">Start</a>\n</usa-player>","esm":"import { definePlayer } from 'motionary/components/effects';\n\ndefinePlayer(); // registers <usa-player>\n\n/* then use it in your HTML:\n<usa-player src=\"hero.json\" trigger=\"view\">\n  <h1>Title</h1>\n  <a class=\"cta\">Start</a>\n</usa-player>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/effects/player.ts","changed":["6.9","7.0","7.1","11.8","12.0","13.9","14.0"]},{"id":"plugin-card","tag":"usa-plugin-card","title":"Plugin detail card","description":"10.1: a plugin’s name, version and author with a Motionary compatibility badge (semver `engine` range), a signature badge (SHA-256 integrity checked with Web Crypto), an animated download counter and expandable details. Requires motionary/runtime — npm i motionary, then use() before the card mounts.","category":"ui","since":"10.1","keywords":["plugin","marketplace","semver","integrity","runtime"],"import":{"path":"motionary/components/widgets","define":"definePluginCard","register":"definePluginCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["name","title","version","author","engine","downloads","integrity","src"],"events":["usa:toggle","usa:verified","usa:runtime-missing"],"slots":[],"methods":["toggle","verify","compat"],"example":"<usa-plugin-card name=\"retro\" title=\"Retro\" version=\"1.2.0\" author=\"Motionary\" engine=\"^10.0.0\" downloads=\"12400\">\n  <p>Pixel, CRT, VHS and Y2K effects.</p>\n</usa-plugin-card>","esm":"import { use } from 'motionary/runtime';\n\nuse();\nimport { definePluginCard } from 'motionary/components/widgets';\n\ndefinePluginCard(); // registers <usa-plugin-card>\n\n/* then use it in your HTML:\n<usa-plugin-card name=\"retro\" title=\"Retro\" version=\"1.2.0\" author=\"Motionary\" engine=\"^10.0.0\" downloads=\"12400\">\n  <p>Pixel, CRT, VHS and Y2K effects.</p>\n</usa-plugin-card>\n*/","requires":["core"],"tier":"basic","prerequisites":{"badge":"Requires: motionary/runtime","modules":["motionary/runtime"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { definePluginCard } from 'motionary/components/widgets';\n\nuse();\ndefinePluginCard(); // registers <usa-plugin-card> — after the prerequisites","order":"Import motionary/runtime and call use() once at start-up, before any runtime-powered component mounts. CDN: the IIFE registers itself (window.MotionaryRuntime).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-plugin-card name=\"retro\" title=\"Retro\" version=\"1.2.0\" author=\"Motionary\" engine=\"^10.0.0\" downloads=\"12400\">\n  <p>Pixel, CRT, VHS and Y2K effects.</p>\n</usa-plugin-card>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/core.md"]},"entry":"motionary/widgets/plugin-card","stability":"stable","deprecated":null,"source":"src/components/widgets/plugin-card.ts","changed":["12.0"]},{"id":"plugin-store","tag":"usa-plugin-store","title":"Plugin marketplace","description":"9.0: the plugin marketplace as a component — search the catalogue of effect packs, see each plugin’s effects and install it with one click (imports and registers the pack).","category":"ui","since":"9.0","keywords":["marketplace","plugins","install","effect packs","store"],"import":{"path":"motionary/components/widgets","define":"definePluginStore","register":"definePluginStore();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["query","label"],"events":["usa:install","usa:install-error"],"slots":[],"methods":["search","install"],"example":"<usa-plugin-store query=\"neon\"></usa-plugin-store>\n<script type=\"module\">\n  const store = document.querySelector('usa-plugin-store');\n  store.loader = (entry) => import(entry); // or map to your bundler imports\n</script>","esm":"import { definePluginStore } from 'motionary/components/widgets';\n\ndefinePluginStore(); // registers <usa-plugin-store>\n\n/* then use it in your HTML:\n<usa-plugin-store query=\"neon\"></usa-plugin-store>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/plugin-store","stability":"stable","deprecated":null,"source":"src/components/widgets/plugin-store.ts","changed":[]},{"id":"popover","tag":"usa-popover","title":"Popover","description":"Click-to-open panel that springs from its trigger; Esc / outside click closes, focus returns.","category":"ui","since":"2.6","keywords":["dialog","aria-expanded"],"import":{"path":"motionary/components/ui","define":"definePopover","register":"definePopover();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["placement"],"events":[],"slots":[],"methods":["toggle"],"example":"<usa-popover>\n  <button>Share</button>\n  <div data-popover>…</div>\n</usa-popover>","esm":"import { definePopover } from 'motionary/components/ui';\n\ndefinePopover(); // registers <usa-popover>\n\n/* then use it in your HTML:\n<usa-popover>\n  <button>Share</button>\n  <div data-popover>…</div>\n</usa-popover>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/popover.ts","changed":["6.6","12.0"]},{"id":"post-fx","tag":"usa-post-fx","title":"Post-processing","description":"Chainable GPU passes over an image (4.8): vignette, grain, chromatic aberration, scanlines, CRT, bloom, pixelate, duotone and glitch, with one intensity. Without WebGL the image gets an approximate CSS filter.","category":"webgl","since":"4.8","keywords":["post-processing","vignette","crt","bloom","glitch"],"import":{"path":"motionary/components/webgl","define":"definePostFx","register":"definePostFx();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":[],"events":[],"slots":[],"methods":[],"example":"<usa-post-fx effects=\"vignette grain\" intensity=\"0.6\">\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-post-fx>","esm":"import { definePostFx } from 'motionary/components/webgl';\n\ndefinePostFx(); // registers <usa-post-fx>\n\n/* then use it in your HTML:\n<usa-post-fx effects=\"vignette grain\" intensity=\"0.6\">\n  <img src=\"photo.jpg\" alt=\"…\">\n</usa-post-fx>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/webgl/elements.ts","changed":["13.1"]},{"id":"presence","tag":"usa-presence","title":"Presence avatar","description":"7.4: an avatar with a live status dot (online, away, busy, offline) — coming online sends a ripple, speaking adds a pulsing ring and story an animated gradient ring. Initials when there is no photo.","category":"ui","since":"7.4","keywords":["avatar","presence","online","status","story"],"import":{"path":"motionary/components/widgets","define":"definePresence","register":"definePresence();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["status","speaking","name","src"],"events":[],"slots":[],"methods":[],"example":"<usa-presence name=\"Ada Lovelace\" status=\"online\"></usa-presence>\n<usa-presence name=\"Alan Turing\" status=\"away\" speaking></usa-presence>\n<usa-presence name=\"Grace Hopper\" status=\"busy\" story></usa-presence>","esm":"import { definePresence } from 'motionary/components/widgets';\n\ndefinePresence(); // registers <usa-presence>\n\n/* then use it in your HTML:\n<usa-presence name=\"Ada Lovelace\" status=\"online\"></usa-presence>\n<usa-presence name=\"Alan Turing\" status=\"away\" speaking></usa-presence>\n<usa-presence name=\"Grace Hopper\" status=\"busy\" story></usa-presence>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/presence","stability":"stable","deprecated":null,"source":"src/components/widgets/presence.ts","changed":[]},{"id":"press","tag":"usa-press","title":"Press feedback","description":"Tactile press: dips while pressed and springs back, or bounces once with bounce. Mouse, touch, pen and keyboard.","category":"interaction","since":"2.2","keywords":["spring","touch"],"import":{"path":"motionary/components/interaction","define":"definePress","register":"definePress();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["disabled","scale","bounce"],"events":[],"slots":[],"methods":[],"example":"<usa-press bounce><button>Press</button></usa-press>","esm":"import { definePress } from 'motionary/components/interaction';\n\ndefinePress(); // registers <usa-press>\n\n/* then use it in your HTML:\n<usa-press bounce><button>Press</button></usa-press>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/interaction/press.ts","changed":[]},{"id":"prize-wheel","tag":"usa-prize-wheel","title":"Prize wheel","description":"7.5: a lottery wheel — Spin whirls it and it eases out on the result (random or spin(index)), the pointer ticks and the wheel glows; usa:result reports the prize.","category":"ui","since":"7.5","keywords":["wheel","lottery","spin","prize","game"],"import":{"path":"motionary/components/widgets","define":"definePrizeWheel","register":"definePrizeWheel();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["segments","label","turns","duration"],"events":["usa:result"],"slots":[],"methods":["spin"],"example":"<usa-prize-wheel segments=\"10% off,Free ship,Try again,🎁 Gift,5% off,Jackpot\"></usa-prize-wheel>","esm":"import { definePrizeWheel } from 'motionary/components/widgets';\n\ndefinePrizeWheel(); // registers <usa-prize-wheel>\n\n/* then use it in your HTML:\n<usa-prize-wheel segments=\"10% off,Free ship,Try again,🎁 Gift,5% off,Jackpot\"></usa-prize-wheel>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/prize-wheel","stability":"stable","deprecated":null,"source":"src/components/widgets/prize-wheel.ts","changed":[]},{"id":"product-gallery","tag":"usa-product-gallery","title":"Product gallery","description":"7.3: product photos with a thumbnail strip — the stage cross-slides in the direction of travel, the selection ring glides between thumbnails, hover zooms under the pointer, swipe and ←/→ work.","category":"ui","since":"7.3","keywords":["product","gallery","zoom","thumbnails","ecommerce"],"import":{"path":"motionary/components/widgets","define":"defineProductGallery","register":"defineProductGallery();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["index","nozoom","zoom"],"events":["usa:change"],"slots":[],"methods":["go","next","prev"],"example":"<usa-product-gallery zoom=\"2\">\n  <img src=\"front.jpg\" alt=\"Front\">\n  <img src=\"side.jpg\" alt=\"Side\">\n  <img src=\"back.jpg\" alt=\"Back\">\n</usa-product-gallery>","esm":"import { defineProductGallery } from 'motionary/components/widgets';\n\ndefineProductGallery(); // registers <usa-product-gallery>\n\n/* then use it in your HTML:\n<usa-product-gallery zoom=\"2\">\n  <img src=\"front.jpg\" alt=\"Front\">\n  <img src=\"side.jpg\" alt=\"Side\">\n  <img src=\"back.jpg\" alt=\"Back\">\n</usa-product-gallery>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/product-gallery","stability":"stable","deprecated":null,"source":"src/components/widgets/product-gallery.ts","changed":[]},{"id":"progress","tag":"usa-progress","title":"Progress bar","description":"Determinate bars glide between values; without a value it shows the Fluent indeterminate animation. Paused / error states.","category":"feedback","since":"2.2","keywords":["Fluent","role=progressbar"],"import":{"path":"motionary/components/feedback","define":"defineProgress","register":"defineProgress();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["value","max","indeterminate","label"],"events":["usa:complete"],"slots":[],"methods":[],"example":"<usa-progress value=\"40\"></usa-progress>\n<usa-progress indeterminate></usa-progress>","esm":"import { defineProgress } from 'motionary/components/feedback';\n\ndefineProgress(); // registers <usa-progress>\n\n/* then use it in your HTML:\n<usa-progress value=\"40\"></usa-progress>\n<usa-progress indeterminate></usa-progress>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/feedback/progress.ts","changed":["2.6","6.4"]},{"id":"progress-ring","tag":"usa-progress-ring","title":"Progress ring / bar / gauge","description":"6.4: the arc eases to every new value with a little overshoot while the label counts up; ring, bar or semicircle gauge, gradient strokes, indeterminate spinner without a value. role=\"progressbar\", usa:complete at 100%.","category":"feedback","since":"6.4","keywords":["progress","ring","gauge","loader","percent"],"import":{"path":"motionary/components/widgets","define":"defineProgressRing","register":"defineProgressRing();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["variant","value","max","gradient","no-label","duration"],"events":["usa:complete"],"slots":[],"methods":[],"example":"<usa-progress-ring value=\"72\" gradient=\"#7c5cff,#22d3ee\"></usa-progress-ring>\n<usa-progress-ring variant=\"bar\" value=\"40\"></usa-progress-ring>\n<usa-progress-ring variant=\"semi\" value=\"88\"></usa-progress-ring>\n<!-- el.value = 90 animates to the new value -->","esm":"import { defineProgressRing } from 'motionary/components/widgets';\n\ndefineProgressRing(); // registers <usa-progress-ring>\n\n/* then use it in your HTML:\n<usa-progress-ring value=\"72\" gradient=\"#7c5cff,#22d3ee\"></usa-progress-ring>\n<usa-progress-ring variant=\"bar\" value=\"40\"></usa-progress-ring>\n<usa-progress-ring variant=\"semi\" value=\"88\"></usa-progress-ring>\n<!-- el.value = 90 animates to the new value -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/progress-ring","stability":"stable","deprecated":null,"source":"src/components/widgets/meters.ts","changed":[]},{"id":"prop-panel","tag":"usa-prop-panel","title":"Property panel","description":"8.9 low-code: a property editor for a live component — typed fields (number / range, select, color, switch, text) bound to its attributes, so the component re-renders as you edit.","category":"ui","since":"8.9","keywords":["low-code","properties","editor","playground","inspector"],"import":{"path":"motionary/components/widgets","define":"definePropPanel","register":"definePropPanel();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["for","props","label"],"events":["usa:prop"],"slots":[],"methods":["reset"],"example":"<usa-star-rating id=\"r\" value=\"3\"></usa-star-rating>\n<usa-prop-panel for=\"#r\" props=\"value:number:0:5, icon:select:star|heart, readonly:boolean\"></usa-prop-panel>","esm":"import { definePropPanel } from 'motionary/components/widgets';\n\ndefinePropPanel(); // registers <usa-prop-panel>\n\n/* then use it in your HTML:\n<usa-star-rating id=\"r\" value=\"3\"></usa-star-rating>\n<usa-prop-panel for=\"#r\" props=\"value:number:0:5, icon:select:star|heart, readonly:boolean\"></usa-prop-panel>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/prop-panel","stability":"stable","deprecated":null,"source":"src/components/widgets/prop-panel.ts","changed":[]},{"id":"pull-cord","tag":"usa-pull-cord","title":"Lamp pull-cord switch","description":"6.8: pull the cord down and let go — past the threshold the lamp switches, and the cord swings back on a damped spring. Click, Space or Enter tug it too; role=\"switch\".","category":"click","since":"6.8","keywords":["switch","lamp","cord","physics","toggle"],"import":{"path":"motionary/components/widgets","define":"definePullCord","register":"definePullCord();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","threshold"],"events":["usa:change"],"slots":[],"methods":["toggle"],"example":"<usa-pull-cord label=\"Desk lamp\"></usa-pull-cord>","esm":"import { definePullCord } from 'motionary/components/widgets';\n\ndefinePullCord(); // registers <usa-pull-cord>\n\n/* then use it in your HTML:\n<usa-pull-cord label=\"Desk lamp\"></usa-pull-cord>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/pull-cord","stability":"stable","deprecated":null,"source":"src/components/widgets/pull-cord.ts","changed":[]},{"id":"pull-refresh","tag":"usa-pull-refresh","title":"Pull to refresh","description":"Pull down at the top of a list: the spinner stretches in with rubber-band resistance; release past the threshold to refresh.","category":"ui","since":"2.6","keywords":["rubber-band","usa:refresh"],"import":{"path":"motionary/components/ui","define":"definePullRefresh","register":"definePullRefresh();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["threshold","disabled","label"],"events":[],"slots":[],"methods":["refresh"],"example":"<usa-pull-refresh style=\"height: 300px\">\n  <ul>…</ul>\n</usa-pull-refresh>\n<script>const el = document.querySelector('usa-pull-refresh'); el.addEventListener('usa:refresh', async (e) => { await load(); e.detail.done(); });</script>","esm":"import { definePullRefresh } from 'motionary/components/ui';\n\ndefinePullRefresh(); // registers <usa-pull-refresh>\n\n/* then use it in your HTML:\n<usa-pull-refresh style=\"height: 300px\">\n  <ul>…</ul>\n</usa-pull-refresh>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/pull-refresh.ts","changed":["6.8","13.0"]},{"id":"radar","tag":"usa-radar","title":"Radar scope","description":"8.4: a sci-fi radar scope — a conic beam sweeps round and each target lights up and fades as the beam passes over it.","category":"ui","since":"8.4","keywords":["radar","sci-fi","cyber","sweep","scope"],"import":{"path":"motionary/components/widgets","define":"defineRadar","register":"defineRadar();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["targets","rings","speed","label"],"events":["usa:ping"],"slots":[],"methods":["setTargets"],"example":"<usa-radar targets=\"Alpha:40,0.6; Bravo:200,0.35; Echo:300,0.8\" speed=\"4\"></usa-radar>","esm":"import { defineRadar } from 'motionary/components/widgets';\n\ndefineRadar(); // registers <usa-radar>\n\n/* then use it in your HTML:\n<usa-radar targets=\"Alpha:40,0.6; Bravo:200,0.35; Echo:300,0.8\" speed=\"4\"></usa-radar>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/radar","stability":"stable","deprecated":null,"source":"src/components/widgets/radar.ts","changed":[]},{"id":"reactions","tag":"usa-reactions","title":"Emoji reactions","description":"7.4: a reaction bar — clicking a pill toggles your reaction: the emoji pops, the count rolls and copies float up; ＋ springs open a picker. Each pill is a toggle button with a count label.","category":"ui","since":"7.4","keywords":["reactions","emoji","like","chat","social"],"import":{"path":"motionary/components/widgets","define":"defineReactions","register":"defineReactions();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["emojis","counts","picker"],"events":["usa:react"],"slots":[],"methods":["toggle"],"example":"<usa-reactions emojis=\"👍,❤️,😂,🎉\" counts=\"3,1,0,2\"></usa-reactions>","esm":"import { defineReactions } from 'motionary/components/widgets';\n\ndefineReactions(); // registers <usa-reactions>\n\n/* then use it in your HTML:\n<usa-reactions emojis=\"👍,❤️,😂,🎉\" counts=\"3,1,0,2\"></usa-reactions>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/reactions","stability":"stable","deprecated":null,"source":"src/components/widgets/reactions.ts","changed":[]},{"id":"red-envelope","tag":"usa-red-envelope","title":"Red envelope (红包)","description":"8.1: a Lunar New Year red envelope — tap and the flap swings open, the card slides out with the amount counting up and gold coins pop out.","category":"ui","since":"8.1","keywords":["red envelope","hongbao","lunar new year","festival","gift"],"import":{"path":"motionary/components/widgets","define":"defineRedEnvelope","register":"defineRedEnvelope();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["amount","currency","message","from","opened"],"events":["usa:open"],"slots":[],"methods":["open","close"],"example":"<usa-red-envelope amount=\"88.88\" from=\"Grandma\" message=\"恭喜发财\"></usa-red-envelope>","esm":"import { defineRedEnvelope } from 'motionary/components/widgets';\n\ndefineRedEnvelope(); // registers <usa-red-envelope>\n\n/* then use it in your HTML:\n<usa-red-envelope amount=\"88.88\" from=\"Grandma\" message=\"恭喜发财\"></usa-red-envelope>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/red-envelope","stability":"stable","deprecated":null,"source":"src/components/widgets/red-envelope.ts","changed":[]},{"id":"retro-button","tag":"usa-retro-button","title":"Retro buttons","description":"8.2: buttons in four eras with matching press motion — 8-bit pixel (stepped press), CRT phosphor (flicker), Y2K chrome pill (bounce) and Windows 95 bevel (sink).","category":"ui","since":"8.2","keywords":["button","retro","pixel","y2k","windows 95"],"import":{"path":"motionary/components/widgets","define":"defineRetroButton","register":"defineRetroButton();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["variant","disabled","type"],"events":[],"slots":[],"methods":[],"example":"<usa-retro-button variant=\"pixel\">Start</usa-retro-button>\n<usa-retro-button variant=\"win95\">OK</usa-retro-button>","esm":"import { defineRetroButton } from 'motionary/components/widgets';\n\ndefineRetroButton(); // registers <usa-retro-button>\n\n/* then use it in your HTML:\n<usa-retro-button variant=\"pixel\">Start</usa-retro-button>\n<usa-retro-button variant=\"win95\">OK</usa-retro-button>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/retro-button","stability":"stable","deprecated":null,"source":"src/components/widgets/retro-button.ts","changed":[]},{"id":"reveal","tag":"usa-reveal","title":"Reveal","description":"Fade, slide, zoom, blur or flip content in as it enters the viewport. 12 effects, replay on re-entry with repeat.","category":"reveal","since":"2.2","keywords":["IntersectionObserver","WAAPI","12 effects"],"import":{"path":"motionary/components/reveal","define":"defineReveal","register":"defineReveal();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","distance","repeat","threshold","root-margin","duration","delay","easing"],"events":["usa:enter","usa:leave","usa:complete"],"slots":[],"methods":["reveal","reset"],"example":"<usa-reveal effect=\"fade-up\" duration=\"700\">\n  <h2>Hello</h2>\n</usa-reveal>","esm":"import { defineReveal } from 'motionary/components/reveal';\n\ndefineReveal(); // registers <usa-reveal>\n\n/* then use it in your HTML:\n<usa-reveal effect=\"fade-up\" duration=\"700\">\n  <h2>Hello</h2>\n</usa-reveal>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/reveal/reveal.ts","changed":["6.1","13.1"]},{"id":"ripple","tag":"usa-ripple","title":"Ripple","description":"Ink ripple from the pointer — or from the centre for Space/Enter — on any button, list item or card.","category":"interaction","since":"2.2","keywords":["pointer","keyboard"],"import":{"path":"motionary/components/interaction","define":"defineRipple","register":"defineRipple();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["disabled","centered","color","opacity","duration"],"events":[],"slots":[],"methods":["ripple"],"example":"<usa-ripple><button>Click me</button></usa-ripple>","esm":"import { defineRipple } from 'motionary/components/interaction';\n\ndefineRipple(); // registers <usa-ripple>\n\n/* then use it in your HTML:\n<usa-ripple><button>Click me</button></usa-ripple>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/interaction/ripple.ts","changed":[]},{"id":"rive","tag":"usa-rive","title":"Rive player (official runtime)","description":"10.6: plays Rive (.riv) files — artboards, animations and state machines with inputs — through the official Rive runtime @rive-app/canvas, an optional peer dependency that is lazy-loaded on first use (Motionary does not reimplement the proprietary .riv format). Requires @rive-app/canvas — npm i @rive-app/canvas, or load its CDN script first; missing → a clear message in place.","category":"ui","since":"10.6","keywords":["rive","riv","state machine","interactive animation","official runtime","peer"],"import":{"path":"motionary/components/widgets","define":"defineRive","register":"defineRive();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["src","artboard","animation","state-machine","autoplay","fit","label","runtime-src"],"events":["usa:load","usa:error","usa:runtime-missing"],"slots":[],"methods":["play","pause","input"],"example":"<usa-rive src=\"/anim/icon.riv\" state-machine=\"State Machine 1\" autoplay label=\"Icon\"></usa-rive>","esm":"import { provideRiveRuntime } from 'motionary/components/widgets';\n\nprovideRiveRuntime(() => import('@rive-app/canvas')); // lazy: fetched when the first <usa-rive> mounts\nimport { defineRive } from 'motionary/components/widgets';\n\ndefineRive(); // registers <usa-rive>\n\n/* then use it in your HTML:\n<usa-rive src=\"/anim/icon.riv\" state-machine=\"State Machine 1\" autoplay label=\"Icon\"></usa-rive>\n*/","requires":["rive"],"tier":"standard","prerequisites":{"badge":"Requires: @rive-app/canvas","modules":["@rive-app/canvas"],"install":"npm i @rive-app/canvas","importAndRegister":"import { provideRiveRuntime } from 'motionary/components/widgets';\nimport { defineRive } from 'motionary/components/widgets';\n\nprovideRiveRuntime(() => import('@rive-app/canvas')); // lazy: fetched when the first <usa-rive> mounts\ndefineRive(); // registers <usa-rive> — after the prerequisites","order":"Install the official runtime next to motionary, then hand <usa-rive> a lazy loader with provideRiveRuntime(() => import('@rive-app/canvas')) before the element mounts — your bundler splits the runtime into its own chunk, fetched only when the first <usa-rive> appears. Without a bundler: load the official rive.js from a CDN before the component bundles (window.rive), use an import map, or set runtime-src on the element. Missing → a clear message in place + usa:runtime-missing.","cdn":"<script src=\"https://unpkg.com/@rive-app/canvas@2.44.1/rive.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-rive src=\"/anim/icon.riv\" state-machine=\"State Machine 1\" autoplay label=\"Icon\"></usa-rive>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/rive.md"]},"entry":"motionary/widgets/rive","stability":"stable","deprecated":null,"source":"src/components/widgets/rive.ts","changed":["10.7"]},{"id":"route-transition","tag":"usa-route-transition","title":"Route transition container","description":"10.3: View Transitions 2.0 — link clicks swap the container’s content with the target page (fetched) or an inline <template data-route>, animated with the View Transitions API (Web Animations fallback); data-shared elements morph between routes; cross-document enables native MPA transitions.","category":"transitions","since":"10.3","keywords":["view transitions","router","mpa","shared element","page transition"],"import":{"path":"motionary/components/widgets","define":"defineRouteTransition","register":"defineRouteTransition();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["effect","engine","cross-document","current","links","history","selector"],"events":["usa:navigate","usa:navigated"],"slots":[],"methods":["navigate"],"example":"<usa-route-transition id=\"app\" effect=\"slide\" cross-document>\n  <nav><a href=\"/\">Home</a> <a href=\"/about\">About</a></nav>\n  <h1 data-shared=\"title\">Home</h1>\n</usa-route-transition>","esm":"import { defineRouteTransition } from 'motionary/components/widgets';\n\ndefineRouteTransition(); // registers <usa-route-transition>\n\n/* then use it in your HTML:\n<usa-route-transition id=\"app\" effect=\"slide\" cross-document>\n  <nav><a href=\"/\">Home</a> <a href=\"/about\">About</a></nav>\n  <h1 data-shared=\"title\">Home</h1>\n</usa-route-transition>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/route-transition","stability":"stable","deprecated":null,"source":"src/components/widgets/route-transition.ts","changed":[]},{"id":"scene","tag":"usa-scene","title":"Cinematic scene","description":"9.1: a scroll-scrubbed cinematic shot — while the scene crosses the screen its image follows a camera move (dolly, pan, tilt, zoom, orbit) and captions fade in on cue.","category":"ui","since":"9.1","keywords":["cinematic","camera","scrollytelling","dolly","parallax"],"import":{"path":"motionary/components/widgets","define":"defineScene","register":"defineScene();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["camera","strength","autoplay"],"events":["usa:shot"],"slots":[],"methods":["setProgress"],"example":"<usa-scene camera=\"dolly-in\">\n  <img src=\"harbor.jpg\" alt=\"Harbor at dawn\">\n  <p data-caption data-at=\"0.4\">Dawn, 1912.</p>\n</usa-scene>","esm":"import { defineScene } from 'motionary/components/widgets';\n\ndefineScene(); // registers <usa-scene>\n\n/* then use it in your HTML:\n<usa-scene camera=\"dolly-in\">\n  <img src=\"harbor.jpg\" alt=\"Harbor at dawn\">\n  <p data-caption data-at=\"0.4\">Dawn, 1912.</p>\n</usa-scene>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/scene","stability":"stable","deprecated":null,"source":"src/components/widgets/scene.ts","changed":[]},{"id":"scramble","tag":"usa-scramble","title":"Scramble / decode","description":"Decodes text out of random glyphs, left to right. Trigger on view, hover/focus or manually.","category":"text","since":"2.2","keywords":["hover","glyphs"],"import":{"path":"motionary/components/text","define":"defineScramble","register":"defineScramble();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["text","trigger","duration","chars"],"events":["usa:complete"],"slots":[],"methods":["play"],"example":"<usa-scramble trigger=\"hover\">ACCESS GRANTED</usa-scramble>","esm":"import { defineScramble } from 'motionary/components/text';\n\ndefineScramble(); // registers <usa-scramble>\n\n/* then use it in your HTML:\n<usa-scramble trigger=\"hover\">ACCESS GRANTED</usa-scramble>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/scramble.ts","changed":[]},{"id":"scroll-highlight","tag":"usa-scroll-highlight","title":"Scroll highlight","description":"Words light up one by one as you read down the page, or a highlighter marker sweeps behind the text.","category":"text","since":"2.8","keywords":["scroll","reading","marker"],"import":{"path":"motionary/components/text","define":"defineScrollHighlight","register":"defineScrollHighlight();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["mode","text","color","dim"],"events":[],"slots":[],"methods":["mount"],"example":"<usa-scroll-highlight>Every word lights up as you scroll.</usa-scroll-highlight>\n<usa-scroll-highlight mode=\"marker\">Important</usa-scroll-highlight>","esm":"import { defineScrollHighlight } from 'motionary/components/text';\n\ndefineScrollHighlight(); // registers <usa-scroll-highlight>\n\n/* then use it in your HTML:\n<usa-scroll-highlight>Every word lights up as you scroll.</usa-scroll-highlight>\n<usa-scroll-highlight mode=\"marker\">Important</usa-scroll-highlight>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/text-fx.ts","changed":[]},{"id":"scroll-progress","tag":"usa-scroll-progress","title":"Scroll progress bar","description":"Reading progress of the page or of one article. Compositor-only scaleX, role=\"progressbar\".","category":"reveal","since":"2.2","keywords":["scaleX","a11y","target"],"import":{"path":"motionary/components/reveal","define":"defineScrollProgress","register":"defineScrollProgress();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["target","label"],"events":["usa:progress"],"slots":[],"methods":["update"],"example":"<usa-scroll-progress></usa-scroll-progress>\n<!-- or for one article -->\n<usa-scroll-progress target=\"#post\" position=\"bottom\"></usa-scroll-progress>","esm":"import { defineScrollProgress } from 'motionary/components/reveal';\n\ndefineScrollProgress(); // registers <usa-scroll-progress>\n\n/* then use it in your HTML:\n<usa-scroll-progress></usa-scroll-progress>\n<!-- or for one article -->\n<usa-scroll-progress target=\"#post\" position=\"bottom\"></usa-scroll-progress>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/reveal/scroll-progress.ts","changed":["2.7","13.1"]},{"id":"scroll-ring","tag":"usa-scroll-ring","title":"Scroll progress ring","description":"10.4: a circular scroll-progress indicator for the page or any scroll container (for=\".article\"), optional percentage label and back-to-top button. Scroll-driven 3.0: native animation-timeline: scroll() first (no script per frame), a small JS loop where scroll timelines are missing.","category":"reveal","since":"10.4","keywords":["scroll progress","reading progress","back to top","animation-timeline","scroll-driven"],"import":{"path":"motionary/components/widgets","define":"defineScrollRing","register":"defineScrollRing();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["for","engine","label","back-to-top","size","thickness","horizontal","preview"],"events":["usa:progress","usa:top"],"slots":[],"methods":[],"example":"<usa-scroll-ring label back-to-top></usa-scroll-ring>","esm":"import { defineScrollRing } from 'motionary/components/widgets';\n\ndefineScrollRing(); // registers <usa-scroll-ring>\n\n/* then use it in your HTML:\n<usa-scroll-ring label back-to-top></usa-scroll-ring>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/scroll-ring","stability":"stable","deprecated":null,"source":"src/components/widgets/scroll-ring.ts","changed":["13.1"]},{"id":"scroll-scene","tag":"usa-scroll-scene","title":"Scroll scene","description":"10.2: a scroll-linked scene — children with data-scrub=\"opacity: 0 -> 1; x: -80 -> 0\" are tweened as you scroll, scrubbed directly or smoothed (scrub=\"120\"), with optional pin, markers and stagger. Requires motionary/runtime/scroll — npm i motionary, then use(scroll) before the scene mounts.","category":"reveal","since":"10.2","keywords":["scroll","scrub","pin","parallax","runtime"],"import":{"path":"motionary/components/widgets","define":"defineScrollScene","register":"defineScrollScene();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["start","end","scrub","pin","markers","stagger","toggle-class","preview"],"events":["usa:enter","usa:leave","usa:progress","usa:runtime-missing"],"slots":[],"methods":["refresh","timeline"],"example":"<usa-scroll-scene start=\"top 80%\" end=\"bottom 20%\" scrub=\"120\" stagger=\"120\">\n  <h2 data-scrub=\"x: -80 -> 0; opacity: 0 -> 1\">Scroll</h2>\n  <p data-scrub=\"y: 40 -> 0; opacity: 0 -> 1\">and it follows.</p>\n</usa-scroll-scene>","esm":"import { use } from 'motionary/runtime';\nimport { scroll } from 'motionary/runtime/scroll';\n\nuse(scroll);\nimport { defineScrollScene } from 'motionary/components/widgets';\n\ndefineScrollScene(); // registers <usa-scroll-scene>\n\n/* then use it in your HTML:\n<usa-scroll-scene start=\"top 80%\" end=\"bottom 20%\" scrub=\"120\" stagger=\"120\">\n  <h2 data-scrub=\"x: -80 -> 0; opacity: 0 -> 1\">Scroll</h2>\n  <p data-scrub=\"y: 40 -> 0; opacity: 0 -> 1\">and it follows.</p>\n</usa-scroll-scene>\n*/","requires":["scroll"],"tier":"basic","prerequisites":{"badge":"Requires: motionary/runtime/scroll","modules":["motionary/runtime/scroll"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { scroll } from 'motionary/runtime/scroll';\nimport { defineScrollScene } from 'motionary/components/widgets';\n\nuse(scroll);\ndefineScrollScene(); // registers <usa-scroll-scene> — after the prerequisites","order":"Register the core first, then the module: use(scroll) also registers the core. CDN: load runtime.iife.js, then runtime/scroll.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/scroll.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-scroll-scene start=\"top 80%\" end=\"bottom 20%\" scrub=\"120\" stagger=\"120\">\n  <h2 data-scrub=\"x: -80 -> 0; opacity: 0 -> 1\">Scroll</h2>\n  <p data-scrub=\"y: 40 -> 0; opacity: 0 -> 1\">and it follows.</p>\n</usa-scroll-scene>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/scroll.md"]},"entry":"motionary/widgets/scroll-scene","stability":"stable","deprecated":null,"source":"src/components/widgets/scroll-scene.ts","changed":["13.1"]},{"id":"scrolly","tag":"usa-scrolly","title":"Sticky scrollytelling","description":"A pinned graphic while [data-step] blocks scroll past; the active step drives the graphic via attributes, a CSS variable and events.","category":"reveal","since":"2.2","keywords":["position: sticky","steps","events"],"import":{"path":"motionary/components/reveal","define":"defineScrolly","register":"defineScrolly();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["offset"],"events":["usa:step"],"slots":[],"methods":[],"example":"<usa-scrolly>\n  <figure data-sticky>…</figure>\n  <section data-step=\"intro\">…</section>\n  <section data-step=\"detail\">…</section>\n</usa-scrolly>","esm":"import { defineScrolly } from 'motionary/components/reveal';\n\ndefineScrolly(); // registers <usa-scrolly>\n\n/* then use it in your HTML:\n<usa-scrolly>\n  <figure data-sticky>…</figure>\n  <section data-step=\"intro\">…</section>\n  <section data-step=\"detail\">…</section>\n</usa-scrolly>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/reveal/scrolly.ts","changed":[]},{"id":"segmented","tag":"usa-segmented","title":"Segmented control","description":"6.7: an iOS-style thumb slides under the chosen segment with a spring and stretches while it travels. A real radio group: arrow keys, Home / End. iOS, pill or outline.","category":"ui","since":"6.7","keywords":["segmented","radio","toggle group","ios","switcher"],"import":{"path":"motionary/components/widgets","define":"defineSegmented","register":"defineSegmented();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["variant","label","value"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-segmented variant=\"ios\" label=\"View\">\n  <button>Day</button>\n  <button>Week</button>\n  <button>Month</button>\n</usa-segmented>","esm":"import { defineSegmented } from 'motionary/components/widgets';\n\ndefineSegmented(); // registers <usa-segmented>\n\n/* then use it in your HTML:\n<usa-segmented variant=\"ios\" label=\"View\">\n  <button>Day</button>\n  <button>Week</button>\n  <button>Month</button>\n</usa-segmented>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/segmented","stability":"stable","deprecated":null,"source":"src/components/widgets/segmented.ts","changed":["13.1"]},{"id":"shader","tag":"usa-shader","title":"Shader background","description":"A GPU shader behind your content: gradient, plasma, waves or aurora presets — or your own fragment shader in a <script type=\"x-shader/x-fragment\">. Falls back to the CSS background.","category":"webgl","since":"3.4","keywords":["shader","webgl","gradient","background","glsl"],"import":{"path":"motionary/components/webgl","define":"defineShader","register":"defineShader();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":[],"events":[],"slots":[],"methods":[],"example":"<usa-shader preset=\"aurora\" speed=\"1\">\n  <h1>Hero title</h1>\n</usa-shader>\n\n<usa-shader>\n  <script type=\"x-shader/x-fragment\">\n    void main() { gl_FragColor = vec4(v_uv, 0.5 + 0.5 * sin(u_time), 1.0); }\n  </script>\n</usa-shader>","esm":"import { defineShader } from 'motionary/components/webgl';\n\ndefineShader(); // registers <usa-shader>\n\n/* then use it in your HTML:\n<usa-shader preset=\"aurora\" speed=\"1\">\n  <h1>Hero title</h1>\n</usa-shader>\n\n<usa-shader>\n  </usa-shader>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/webgl/elements.ts","variants":[{"id":"shader","title":"Shader background","description":"A GPU shader behind your content: gradient, plasma, waves or aurora presets — or your own fragment shader in a <script type=\"x-shader/x-fragment\">. Falls back to the CSS background.","example":"<usa-shader preset=\"aurora\" speed=\"1\">\n  <h1>Hero title</h1>\n</usa-shader>\n\n<usa-shader>\n  <script type=\"x-shader/x-fragment\">\n    void main() { gl_FragColor = vec4(v_uv, 0.5 + 0.5 * sin(u_time), 1.0); }\n  </script>\n</usa-shader>"},{"id":"shader-particles","title":"GPU particles","description":"Particle presets (4.8) on the same single quad — snow, fireflies, a warp starfield, bokeh and rain — computed procedurally in the shader (no buffers, no per-particle JS). Adaptive: resolution steps down when fps drops, frame rate is capped on battery saver.","example":"<usa-shader preset=\"snow\">\n  <h1>Winter sale</h1>\n</usa-shader>\n<!-- fireflies · stars · bokeh · rain; quality=\"high\" disables adaptive quality -->"}],"changed":["4.0","4.8"]},{"id":"shader-backdrop","tag":"usa-shader-backdrop","title":"Shader backdrop + post chain","description":"10.5 (WebGPU effects 2.0): an animated shader background (aurora, plasma, waves, nebula or your own GLSL) run through a post-processing chain — bloom, vignette, grain, chromatic aberration, pixelate, scanlines — in any order; CSS gradient fallback.","category":"ui","since":"10.5","keywords":["shader","background","post-processing","bloom","glsl"],"import":{"path":"motionary/components/widgets","define":"defineShaderBackdrop","register":"defineShaderBackdrop();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["preset","post","colors","speed","intensity","label"],"events":["usa:backend"],"slots":[],"methods":[],"example":"<usa-shader-backdrop preset=\"aurora\" post=\"bloom,vignette,grain\">\n  <h1>Hello</h1>\n</usa-shader-backdrop>","esm":"import { defineShaderBackdrop } from 'motionary/components/widgets';\n\ndefineShaderBackdrop(); // registers <usa-shader-backdrop>\n\n/* then use it in your HTML:\n<usa-shader-backdrop preset=\"aurora\" post=\"bloom,vignette,grain\">\n  <h1>Hello</h1>\n</usa-shader-backdrop>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/shader-backdrop","stability":"stable","deprecated":null,"source":"src/components/widgets/shader-backdrop.ts","changed":["13.8"]},{"id":"sheet","tag":"usa-sheet","title":"Drawer / bottom sheet","description":"6.3: a side sheet from the right, left, top or bottom with a blurred backdrop; the bottom sheet can be dragged down to dismiss and springs back otherwise. Native <dialog> underneath.","category":"transitions","since":"6.3","keywords":["drawer","sheet","bottom-sheet","sidebar","drag"],"import":{"path":"motionary/components/widgets","define":"defineSheet","register":"defineSheet();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["side","label","persistent"],"events":["usa:open","usa:close"],"slots":[],"methods":["show","close","toggle"],"example":"<button data-usa-open=\"cart\">Cart</button>\n<usa-sheet id=\"cart\" side=\"right\" label=\"Cart\">\n  <h2>Your cart</h2>\n  …\n  <button data-usa-close>Close</button>\n</usa-sheet>","esm":"import { defineSheet } from 'motionary/components/widgets';\n\ndefineSheet(); // registers <usa-sheet>\n\n/* then use it in your HTML:\n<button data-usa-open=\"cart\">Cart</button>\n<usa-sheet id=\"cart\" side=\"right\" label=\"Cart\">\n  <h2>Your cart</h2>\n  …\n  <button data-usa-close>Close</button>\n</usa-sheet>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/sheet","stability":"stable","deprecated":null,"source":"src/components/widgets/overlay.ts","changed":["6.6","13.0","13.1","13.3"]},{"id":"shimmer-text","tag":"usa-shimmer-text","title":"Shimmer text","description":"A light sweep across gradient-filled text. CSS only; colours and speed via attributes or custom properties.","category":"text","since":"2.2","keywords":["background-clip","CSS"],"import":{"path":"motionary/components/text","define":"defineShimmerText","register":"defineShimmerText();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["duration","color","shine","angle"],"events":[],"slots":[],"methods":[],"example":"<usa-shimmer-text shine=\"#fff\">Premium</usa-shimmer-text>","esm":"import { defineShimmerText } from 'motionary/components/text';\n\ndefineShimmerText(); // registers <usa-shimmer-text>\n\n/* then use it in your HTML:\n<usa-shimmer-text shine=\"#fff\">Premium</usa-shimmer-text>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/shimmer-text.ts","changed":[]},{"id":"shortcut","tag":"usa-shortcut","title":"Shortcut hint","description":"7.9: keyboard-shortcut hints as keycaps (⌘ on Apple, Ctrl elsewhere); press the combination anywhere and the caps press down one after another and usa:trigger fires.","category":"ui","since":"7.9","keywords":["shortcut","keyboard","kbd","hotkey","hint"],"import":{"path":"motionary/components/widgets","define":"defineShortcut","register":"defineShortcut();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["keys","label","listen","for"],"events":["usa:trigger"],"slots":[],"methods":["press"],"example":"<usa-shortcut keys=\"mod+k\" label=\"Search\"></usa-shortcut>\n<usa-shortcut keys=\"mod+shift+p\" for=\"palette-button\"></usa-shortcut>","esm":"import { defineShortcut } from 'motionary/components/widgets';\n\ndefineShortcut(); // registers <usa-shortcut>\n\n/* then use it in your HTML:\n<usa-shortcut keys=\"mod+k\" label=\"Search\"></usa-shortcut>\n<usa-shortcut keys=\"mod+shift+p\" for=\"palette-button\"></usa-shortcut>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/shortcut","stability":"stable","deprecated":null,"source":"src/components/widgets/shortcut.ts","changed":[]},{"id":"skeleton","tag":"usa-skeleton","title":"Skeleton","description":"Shimmering placeholders while loading; remove loading and the real content fades in. aria-busy included.","category":"feedback","since":"2.2","keywords":["shimmer","aria-busy"],"import":{"path":"motionary/components/feedback","define":"defineSkeleton","register":"defineSkeleton();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["loading","lines","width","height","circle","avatar","radius"],"events":["usa:loaded"],"slots":[],"methods":[],"example":"<usa-skeleton loading avatar lines=\"3\">\n  <article>…</article>\n</usa-skeleton>","esm":"import { defineSkeleton } from 'motionary/components/feedback';\n\ndefineSkeleton(); // registers <usa-skeleton>\n\n/* then use it in your HTML:\n<usa-skeleton loading avatar lines=\"3\">\n  <article>…</article>\n</usa-skeleton>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/feedback/skeleton.ts","changed":["6.4"]},{"id":"skeleton-reveal","tag":"usa-skeleton-reveal","title":"Skeleton → content reveal","description":"6.4: the skeleton is generated from the real content — one bar per rendered text line, blocks for images and marked elements — with one synchronized shimmer (wave, pulse or glow). Remove loading and the bars dissolve top-to-bottom while the content fades in from a blur.","category":"feedback","since":"6.4","keywords":["skeleton","loading","shimmer","placeholder","reveal"],"import":{"path":"motionary/components/widgets","define":"defineSkeletonReveal","register":"defineSkeletonReveal();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["loading","variant"],"events":["usa:reveal"],"slots":[],"methods":["reveal"],"example":"<usa-skeleton-reveal loading variant=\"wave\">\n  <img src=\"avatar.jpg\" alt=\"\" data-skeleton=\"circle\">\n  <h3>Ada Lovelace</h3>\n  <p>…</p>\n</usa-skeleton-reveal>\n<!-- el.loading = false (or el.reveal()) when the data arrived -->","esm":"import { defineSkeletonReveal } from 'motionary/components/widgets';\n\ndefineSkeletonReveal(); // registers <usa-skeleton-reveal>\n\n/* then use it in your HTML:\n<usa-skeleton-reveal loading variant=\"wave\">\n  <img src=\"avatar.jpg\" alt=\"\" data-skeleton=\"circle\">\n  <h3>Ada Lovelace</h3>\n  <p>…</p>\n</usa-skeleton-reveal>\n<!-- el.loading = false (or el.reveal()) when the data arrived -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/skeleton-reveal","stability":"stable","deprecated":null,"source":"src/components/widgets/skeleton-reveal.ts","changed":[]},{"id":"sketch-chart","tag":"usa-sketch-chart","title":"Sketch chart","description":"8.5: a hand-drawn chart — wobbly pencil axes with hatched bars or a sketchy line, sketched in stroke by stroke when it scrolls into view.","category":"ui","since":"8.5","keywords":["chart","sketch","hand-drawn","bar chart","pencil"],"import":{"path":"motionary/components/widgets","define":"defineSketchChart","register":"defineSketchChart();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["values","labels","type","color","label"],"events":["usa:drawn"],"slots":[],"methods":["setValues","redraw"],"example":"<usa-sketch-chart values=\"3,7,5,9\" labels=\"Q1,Q2,Q3,Q4\" label=\"Revenue\"></usa-sketch-chart>","esm":"import { defineSketchChart } from 'motionary/components/widgets';\n\ndefineSketchChart(); // registers <usa-sketch-chart>\n\n/* then use it in your HTML:\n<usa-sketch-chart values=\"3,7,5,9\" labels=\"Q1,Q2,Q3,Q4\" label=\"Revenue\"></usa-sketch-chart>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/sketch-chart","stability":"stable","deprecated":null,"source":"src/components/widgets/sketch-chart.ts","changed":["11.8"]},{"id":"slider","tag":"usa-slider","title":"Slider","description":"A form-associated range slider: spring-following thumb, value bubble, full keyboard support (arrows, Page Up/Down, Home/End).","category":"ui","since":"2.6","keywords":["role=slider","form","bubble"],"import":{"path":"motionary/components/ui","define":"defineSlider","register":"defineSlider();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["min","max","disabled","label","step","value"],"events":["usa:input","usa:change"],"slots":[],"methods":[],"example":"<usa-slider name=\"volume\" value=\"40\" bubble label=\"Volume\"></usa-slider>","esm":"import { defineSlider } from 'motionary/components/ui';\n\ndefineSlider(); // registers <usa-slider>\n\n/* then use it in your HTML:\n<usa-slider name=\"volume\" value=\"40\" bubble label=\"Volume\"></usa-slider>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/slider.ts","changed":[]},{"id":"smooth-scroller","tag":"usa-smooth-scroll","title":"Smooth scroll","description":"10.4: smooth, inertial wheel scrolling for the page or a container (wrapper), anchor links glide (with offset for sticky headers); keyboard / scrollbar / touch stay native and it switches off under reduced motion. Requires motionary/runtime/smooth — npm i motionary, then use(smooth) before it mounts.","category":"interaction","since":"10.4","keywords":["smooth scroll","inertia","lerp","anchors","runtime"],"import":{"path":"motionary/components/widgets","define":"defineSmoothScroll","register":"defineSmoothScroll();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["lerp","duration","ease","wheel-multiplier","horizontal","touch","anchors","offset","wrapper","preview"],"events":["usa:scroll","usa:ready","usa:runtime-missing"],"slots":[],"methods":["glideTo","stop","resume"],"example":"<usa-smooth-scroll lerp=\"0.1\" offset=\"64\"></usa-smooth-scroll>","esm":"import { use } from 'motionary/runtime';\nimport { smooth } from 'motionary/runtime/smooth';\n\nuse(smooth);\nimport { defineSmoothScroll } from 'motionary/components/widgets';\n\ndefineSmoothScroll(); // registers <usa-smooth-scroll>\n\n/* then use it in your HTML:\n<usa-smooth-scroll lerp=\"0.1\" offset=\"64\"></usa-smooth-scroll>\n*/","requires":["smooth"],"tier":"standard","prerequisites":{"badge":"Requires: motionary/runtime/smooth","modules":["motionary/runtime/smooth"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { smooth } from 'motionary/runtime/smooth';\nimport { defineSmoothScroll } from 'motionary/components/widgets';\n\nuse(smooth);\ndefineSmoothScroll(); // registers <usa-smooth-scroll> — after the prerequisites","order":"Register the core first, then the module: use(smooth) also registers the core. CDN: load runtime.iife.js, then runtime/smooth.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/smooth.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-smooth-scroll lerp=\"0.1\" offset=\"64\"></usa-smooth-scroll>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/smooth.md"]},"entry":"motionary/widgets/smooth-scroll","stability":"stable","deprecated":null,"source":"src/components/widgets/smooth-scroll.ts","changed":[]},{"id":"snap-carousel","tag":"usa-snap-carousel","title":"Snap carousel (drag · inertia · snap)","description":"10.8: drag or swipe with real inertia — a throw keeps gliding, then springs to the nearest slide (a quick flick always moves one); rubber-band edges, arrows, dots, ←/→ / Home / End, optional autoplay that pauses on hover, focus and off screen. Slides keep their own width so the next one peeks in. Requires motionary/runtime/drag-snap — npm i motionary, then use(dragSnap) before it mounts. Its own entry point: motionary/components/snap-carousel (not in the widgets / lite bundles).","category":"ui","since":"10.8","keywords":["carousel","slider","drag","inertia","snap","swipe","runtime"],"import":{"path":"motionary/components/snap-carousel","define":"defineSnapCarousel","register":"defineSnapCarousel();"},"cdn":"https://unpkg.com/motionary@17/dist/components/snap-carousel.js","attributes":["align","gap","autoplay","no-controls","no-dots","label","index"],"events":["usa:change","usa:runtime-missing"],"slots":[],"methods":["next","prev","goTo"],"example":"<usa-snap-carousel align=\"center\" gap=\"16\" label=\"Featured\">\n  <article>…</article>\n  <article>…</article>\n  <article>…</article>\n</usa-snap-carousel>","esm":"import { use } from 'motionary/runtime';\nimport { dragSnap } from 'motionary/runtime/drag-snap';\n\nuse(dragSnap);\nimport { defineSnapCarousel } from 'motionary/components/snap-carousel';\n\ndefineSnapCarousel(); // registers <usa-snap-carousel>\n\n/* then use it in your HTML:\n<usa-snap-carousel align=\"center\" gap=\"16\" label=\"Featured\">\n  <article>…</article>\n  <article>…</article>\n  <article>…</article>\n</usa-snap-carousel>\n*/","requires":["drag-snap"],"tier":"standard","prerequisites":{"badge":"Requires: motionary/runtime/drag-snap","modules":["motionary/runtime/drag-snap"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { dragSnap } from 'motionary/runtime/drag-snap';\nimport { defineSnapCarousel } from 'motionary/components/snap-carousel';\n\nuse(dragSnap);\ndefineSnapCarousel(); // registers <usa-snap-carousel> — after the prerequisites","order":"Register the core first, then the module: use(dragSnap) also registers the core. CDN: load runtime.iife.js, then runtime/drag-snap.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/drag-snap.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-snap-carousel align=\"center\" gap=\"16\" label=\"Featured\">\n  <article>…</article>\n  <article>…</article>\n  <article>…</article>\n</usa-snap-carousel>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/drag-snap.md"]},"entry":"motionary/widgets/snap-carousel","stability":"stable","deprecated":null,"source":"src/components/widgets/snap-carousel.ts","changed":["13.2"]},{"id":"sparkline","tag":"usa-sparkline","title":"Sparkline","description":"7.2: a tiny inline trend — draws itself on first view, a soft area fades in, the last point pulses and new data morphs the line point by point. line | area | bars; hover shows the value.","category":"ui","since":"7.2","keywords":["sparkline","trend","line","inline","chart"],"import":{"path":"motionary/components/widgets","define":"defineSparkline","register":"defineSparkline();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["variant","color","values","label"],"events":[],"slots":[],"methods":[],"example":"<usa-sparkline values=\"3,5,4,8,6,9,12\" variant=\"area\"></usa-sparkline>","esm":"import { defineSparkline } from 'motionary/components/widgets';\n\ndefineSparkline(); // registers <usa-sparkline>\n\n/* then use it in your HTML:\n<usa-sparkline values=\"3,5,4,8,6,9,12\" variant=\"area\"></usa-sparkline>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/sparkline","stability":"stable","deprecated":null,"source":"src/components/widgets/sparkline.ts","changed":["7.5"]},{"id":"spatial-card","tag":"usa-spatial-card","title":"Spatial card","description":"8.8: a spatial-computing window — frosted glass floating in depth, a soft gaze highlight that follows the pointer, layered content and an ornament bar; it eases towards you on hover and sinks on press.","category":"ui","since":"8.8","keywords":["spatial","visionos","glass","xr","window"],"import":{"path":"motionary/components/widgets","define":"defineSpatialCard","register":"defineSpatialCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":[],"events":["usa:focus-depth"],"slots":[],"methods":[],"example":"<usa-spatial-card>\n  <h3 data-depth=\"2\">Photos</h3>\n  <p data-depth=\"1\">Spatial window</p>\n  <nav slot=\"ornament\"><button>⟲</button><button>♡</button></nav>\n</usa-spatial-card>","esm":"import { defineSpatialCard } from 'motionary/components/widgets';\n\ndefineSpatialCard(); // registers <usa-spatial-card>\n\n/* then use it in your HTML:\n<usa-spatial-card>\n  <h3 data-depth=\"2\">Photos</h3>\n  <p data-depth=\"1\">Spatial window</p>\n  <nav slot=\"ornament\"><button>⟲</button><button>♡</button></nav>\n</usa-spatial-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/spatial-card","stability":"stable","deprecated":null,"source":"src/components/widgets/spatial-card.ts","changed":[]},{"id":"spinner","tag":"usa-spinner","title":"Spinners","description":"Six indeterminate indicators: the WinUI progress ring, the Windows 10 orbiting dots, ring, typing dots, pulse and bars.","category":"feedback","since":"2.2","keywords":["Windows","Fluent","CSS"],"import":{"path":"motionary/components/feedback","define":"defineSpinner","register":"defineSpinner();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["kind","size","label"],"events":[],"slots":[],"methods":[],"example":"<usa-spinner kind=\"fluent\"></usa-spinner>\n<usa-spinner kind=\"windows\" size=\"40\"></usa-spinner>","esm":"import { defineSpinner } from 'motionary/components/feedback';\n\ndefineSpinner(); // registers <usa-spinner>\n\n/* then use it in your HTML:\n<usa-spinner kind=\"fluent\"></usa-spinner>\n<usa-spinner kind=\"windows\" size=\"40\"></usa-spinner>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/feedback/spinner.ts","changed":["2.9","3.0"]},{"id":"splash","tag":"usa-splash","title":"Splash screen","description":"An app launch screen that leaves (fade, scale, slide-up, circle) once the page has loaded — never sooner than min ms.","category":"page","since":"2.7","keywords":["launch","PWA","WebView2"],"import":{"path":"motionary/components/page","define":"defineSplash","register":"defineSplash();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["label","manual","min","exit"],"events":["usa:done"],"slots":[],"methods":["done"],"example":"<usa-splash exit=\"circle\" min=\"800\">\n  <img src=\"logo.svg\" alt=\"\">\n</usa-splash>","esm":"import { defineSplash } from 'motionary/components/page';\n\ndefineSplash(); // registers <usa-splash>\n\n/* then use it in your HTML:\n<usa-splash exit=\"circle\" min=\"800\">\n  <img src=\"logo.svg\" alt=\"\">\n</usa-splash>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/page/splash.ts","changed":["9.8"]},{"id":"split-text","tag":"usa-split-text","title":"Split-text reveal","description":"Splits a headline into letters or words and cascades them in: rise, fade, blur, flip or pop. Words never break.","category":"text","since":"2.2","keywords":["chars","words","CSS"],"import":{"path":"motionary/components/text","define":"defineSplitText","register":"defineSplitText();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["by","text","from","stagger","duration","delay","trigger","repeat"],"events":["usa:complete"],"slots":[],"methods":["play","reset"],"example":"<usa-split-text effect=\"rise\">Animated headline</usa-split-text>","esm":"import { defineSplitText } from 'motionary/components/text';\n\ndefineSplitText(); // registers <usa-split-text>\n\n/* then use it in your HTML:\n<usa-split-text effect=\"rise\">Animated headline</usa-split-text>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/split-text.ts","changed":["4.3","10.1","10.3"]},{"id":"spotlight","tag":"usa-spotlight","title":"Reveal highlight","description":"The Windows Fluent “Reveal” effect: a light follows the pointer, lighting the borders of nearby items and the hovered one.","category":"interaction","since":"2.2","keywords":["Fluent","Windows"],"import":{"path":"motionary/components/interaction","define":"defineSpotlight","register":"defineSpotlight();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["size","color","border"],"events":[],"slots":[],"methods":[],"example":"<usa-spotlight>\n  <button>Mail</button>\n  <button>Calendar</button>\n  <button>Photos</button>\n</usa-spotlight>","esm":"import { defineSpotlight } from 'motionary/components/interaction';\n\ndefineSpotlight(); // registers <usa-spotlight>\n\n/* then use it in your HTML:\n<usa-spotlight>\n  <button>Mail</button>\n  <button>Calendar</button>\n  <button>Photos</button>\n</usa-spotlight>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/interaction/spotlight.ts","changed":[]},{"id":"spring","tag":"usa-spring","title":"Spring effects","description":"bounce-in, pop and drop entrances with true spring timing (CSS linear() easing), plus jelly and rubber-band attention effects on view, hover or click.","category":"physics","since":"2.3","keywords":["spring","bounce","jelly","presets"],"import":{"path":"motionary/components/physics","define":"defineSpring","register":"defineSpring();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","trigger","repeat","stiffness","damping","mass","preset","duration","delay"],"events":["usa:complete"],"slots":[],"methods":["play","reset"],"example":"<usa-spring effect=\"bounce-in\" preset=\"bouncy\">\n  <div class=\"card\">Hello</div>\n</usa-spring>\n<usa-spring effect=\"jelly\" trigger=\"click\">\n  <button>Tap me</button>\n</usa-spring>","esm":"import { defineSpring } from 'motionary/components/physics';\n\ndefineSpring(); // registers <usa-spring>\n\n/* then use it in your HTML:\n<usa-spring effect=\"bounce-in\" preset=\"bouncy\">\n  <div class=\"card\">Hello</div>\n</usa-spring>\n<usa-spring effect=\"jelly\" trigger=\"click\">\n  <button>Tap me</button>\n</usa-spring>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/physics/spring-effect.ts","changed":[]},{"id":"stagger","tag":"usa-stagger","title":"Stagger list","description":"Reveals direct children one after another — lists, grids, feature rows.","category":"reveal","since":"2.2","keywords":["children","interval"],"import":{"path":"motionary/components/reveal","define":"defineStagger","register":"defineStagger();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["effect","repeat","threshold","distance","interval","delay","duration","easing"],"events":["usa:enter","usa:complete"],"slots":[],"methods":["reveal","reset"],"example":"<usa-stagger effect=\"rise\" interval=\"80\">\n  <li>One</li>\n  <li>Two</li>\n  <li>Three</li>\n</usa-stagger>","esm":"import { defineStagger } from 'motionary/components/reveal';\n\ndefineStagger(); // registers <usa-stagger>\n\n/* then use it in your HTML:\n<usa-stagger effect=\"rise\" interval=\"80\">\n  <li>One</li>\n  <li>Two</li>\n  <li>Three</li>\n</usa-stagger>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/reveal/stagger.ts","changed":["6.1"]},{"id":"star-rating","tag":"usa-star-rating","title":"Star rating 2.0","description":"6.4: the fill follows the pointer (half stars with step=\"0.5\"), a click pops the chosen star with a sparkle burst while the others ripple; stars or hearts; a keyboard slider (arrows, Home / End); readonly mode.","category":"click","since":"6.4","keywords":["rating","stars","review","slider","feedback"],"import":{"path":"motionary/components/widgets","define":"defineStarRating","register":"defineStarRating();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["max","icon","readonly","step","label","value"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-star-rating value=\"3.5\" step=\"0.5\" label=\"Your rating\"></usa-star-rating>\n<usa-star-rating value=\"4\" readonly></usa-star-rating>","esm":"import { defineStarRating } from 'motionary/components/widgets';\n\ndefineStarRating(); // registers <usa-star-rating>\n\n/* then use it in your HTML:\n<usa-star-rating value=\"3.5\" step=\"0.5\" label=\"Your rating\"></usa-star-rating>\n<usa-star-rating value=\"4\" readonly></usa-star-rating>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/star-rating","stability":"stable","deprecated":null,"source":"src/components/widgets/star-rating.ts","changed":["7.9","8.0"]},{"id":"stepper","tag":"usa-stepper","title":"Stepper / wizard","description":"6.7: the rail fills toward the current step, finished steps pop a drawn check mark and the current step pulses. Horizontal or vertical; next() / prev() / value.","category":"ui","since":"6.7","keywords":["stepper","wizard","steps","progress","checkout"],"import":{"path":"motionary/components/widgets","define":"defineStepper","register":"defineStepper();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["orientation","label","clickable"],"events":["usa:change"],"slots":[],"methods":["next","prev"],"example":"<usa-stepper value=\"1\" label=\"Checkout\">\n  <span>Cart</span>\n  <span>Shipping</span>\n  <span>Payment</span>\n  <span>Done</span>\n</usa-stepper>","esm":"import { defineStepper } from 'motionary/components/widgets';\n\ndefineStepper(); // registers <usa-stepper>\n\n/* then use it in your HTML:\n<usa-stepper value=\"1\" label=\"Checkout\">\n  <span>Cart</span>\n  <span>Shipping</span>\n  <span>Payment</span>\n  <span>Done</span>\n</usa-stepper>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/stepper","stability":"stable","deprecated":null,"source":"src/components/widgets/stepper.ts","changed":["13.1"]},{"id":"sticky-stack","tag":"usa-sticky-stack","title":"Sticky stack","description":"Cards stick while you scroll and the covered ones shrink and dim as the next slides over them.","category":"cards","since":"2.4","keywords":["sticky","scroll"],"import":{"path":"motionary/components/cards","define":"defineStickyStack","register":"defineStickyStack();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["top","gap","scale"],"events":[],"slots":[],"methods":["update"],"example":"<usa-sticky-stack top=\"80\">\n  <section>One</section>\n  <section>Two</section>\n  <section>Three</section>\n</usa-sticky-stack>","esm":"import { defineStickyStack } from 'motionary/components/cards';\n\ndefineStickyStack(); // registers <usa-sticky-stack>\n\n/* then use it in your HTML:\n<usa-sticky-stack top=\"80\">\n  <section>One</section>\n  <section>Two</section>\n  <section>Three</section>\n</usa-sticky-stack>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/cards/sticky-stack.ts","changed":[]},{"id":"sticky-wall","tag":"usa-sticky-wall","title":"Sticky-note wall","description":"8.5: a wall of sticky notes — each child becomes a pinned paper note with a slight tilt, the notes drop onto the wall one by one, and a tap lifts a note to the front.","category":"ui","since":"8.5","keywords":["sticky notes","paper","board","hand-drawn","notes"],"import":{"path":"motionary/components/widgets","define":"defineStickyWall","register":"defineStickyWall();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["seed","label"],"events":["usa:pick"],"slots":[],"methods":["pick"],"example":"<usa-sticky-wall label=\"Ideas\">\n  <p>Ship 8.5 ✏️</p>\n  <p data-color=\"pink\">Call Mia</p>\n  <p data-color=\"blue\">Buy paper</p>\n</usa-sticky-wall>","esm":"import { defineStickyWall } from 'motionary/components/widgets';\n\ndefineStickyWall(); // registers <usa-sticky-wall>\n\n/* then use it in your HTML:\n<usa-sticky-wall label=\"Ideas\">\n  <p>Ship 8.5 ✏️</p>\n  <p data-color=\"pink\">Call Mia</p>\n  <p data-color=\"blue\">Buy paper</p>\n</usa-sticky-wall>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/sticky-wall","stability":"stable","deprecated":null,"source":"src/components/widgets/sticky-wall.ts","changed":[]},{"id":"stories","tag":"usa-stories","title":"Stories viewer","description":"6.2: segmented progress bars, auto-advance, tap left / right to step, press and hold to pause, plus a pause button. Under reduced motion it waits for the user instead of advancing.","category":"ui","since":"6.2","keywords":["stories","instagram","progress","autoplay","tap"],"import":{"path":"motionary/components/widgets","define":"defineStories","register":"defineStories();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["duration","loop"],"events":["usa:end","usa:change"],"slots":[],"methods":["next","prev","goTo","pause","play"],"example":"<usa-stories duration=\"5000\" loop>\n  <img src=\"1.jpg\" alt=\"…\">\n  <img src=\"2.jpg\" alt=\"…\">\n</usa-stories>","esm":"import { defineStories } from 'motionary/components/widgets';\n\ndefineStories(); // registers <usa-stories>\n\n/* then use it in your HTML:\n<usa-stories duration=\"5000\" loop>\n  <img src=\"1.jpg\" alt=\"…\">\n  <img src=\"2.jpg\" alt=\"…\">\n</usa-stories>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/stories","stability":"stable","deprecated":null,"source":"src/components/widgets/stories.ts","changed":[]},{"id":"story-compare","tag":"usa-story","title":"Story: before / after","description":"5.4: <usa-story template=\"compare\"> wipes from before to after as you scroll; the handle is draggable and a keyboard slider (←/→, Home/End). Full-page templates (pin, gallery, zoom) live on the Scroll stories page.","category":"fx","since":"5.4","keywords":["story","scrollytelling","compare","before after","slider"],"import":{"path":"motionary/components/effects","define":"defineStory","register":"defineStory();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["template","zoom","label"],"events":["usa:step"],"slots":[],"methods":[],"example":"<usa-story template=\"compare\" label=\"2019 vs 2026\">\n  <div data-sticky>\n    <img data-before src=\"before.jpg\" alt=\"Before\">\n    <img data-after src=\"after.jpg\" alt=\"After\">\n  </div>\n</usa-story>","esm":"import { defineStory } from 'motionary/components/effects';\n\ndefineStory(); // registers <usa-story>\n\n/* then use it in your HTML:\n<usa-story template=\"compare\" label=\"2019 vs 2026\">\n  <div data-sticky>\n    <img data-before src=\"before.jpg\" alt=\"Before\">\n    <img data-after src=\"after.jpg\" alt=\"After\">\n  </div>\n</usa-story>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/effects/story.ts","variants":[{"id":"story-compare","title":"Story: before / after","description":"5.4: <usa-story template=\"compare\"> wipes from before to after as you scroll; the handle is draggable and a keyboard slider (←/→, Home/End). Full-page templates (pin, gallery, zoom) live on the Scroll stories page.","example":"<usa-story template=\"compare\" label=\"2019 vs 2026\">\n  <div data-sticky>\n    <img data-before src=\"before.jpg\" alt=\"Before\">\n    <img data-after src=\"after.jpg\" alt=\"After\">\n  </div>\n</usa-story>"},{"id":"story-counter","title":"Story: data counters","description":"5.4: template=\"counter\" counts every [data-count] up (easing out, separators and prefix/suffix kept) when it scrolls into view; screen readers get the final value.","example":"<usa-story template=\"counter\">\n  <strong data-count=\"12,480\">0</strong> users\n  <strong data-count=\"99.9%\">0</strong> uptime\n</usa-story>"},{"id":"story-highlight","title":"Story: step highlight","description":"5.4: template=\"highlight\" dims every paragraph except the one crossing the viewport center (pin does the same for [data-step] sections next to a sticky [data-stage]); fires usa:step.","example":"<usa-story template=\"pin\">\n  <figure data-stage>…chart…</figure>\n  <section data-step>Step 1</section>\n  <section data-step>Step 2</section>\n</usa-story>"}],"changed":["11.8","12.0","13.4"]},{"id":"suggestion-chips","tag":"usa-suggestion-chips","title":"Suggestion chips","description":"7.8: follow-up prompt chips that slide in one after another; picking one pulses it and (with dismiss) the others fade away. Real buttons, arrow-key navigation.","category":"ui","since":"7.8","keywords":["ai","chips","suggestions","prompts","follow-up"],"import":{"path":"motionary/components/widgets","define":"defineSuggestionChips","register":"defineSuggestionChips();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["items","label","dismiss"],"events":["usa:pick"],"slots":[],"methods":["setItems"],"example":"<usa-suggestion-chips items=\"Summarise|Translate|Explain like I'm 5\" dismiss></usa-suggestion-chips>","esm":"import { defineSuggestionChips } from 'motionary/components/widgets';\n\ndefineSuggestionChips(); // registers <usa-suggestion-chips>\n\n/* then use it in your HTML:\n<usa-suggestion-chips items=\"Summarise|Translate|Explain like I'm 5\" dismiss></usa-suggestion-chips>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/suggestion-chips","stability":"stable","deprecated":null,"source":"src/components/widgets/suggestion-chips.ts","changed":[]},{"id":"swipe-deck","tag":"usa-swipe-deck","title":"Swipe cards deck","description":"6.8: drag the top card — it rotates with the pointer, LIKE / NOPE stamps fade in and past the threshold (or on a fling) it flies off; otherwise it springs back. like(), nope(), undo(), ← / →.","category":"gesture","since":"6.8","keywords":["swipe","cards","tinder","deck","fling"],"import":{"path":"motionary/components/widgets","define":"defineSwipeDeck","register":"defineSwipeDeck();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","threshold"],"events":["usa:swipe","usa:empty"],"slots":[],"methods":["like","nope","undo"],"example":"<usa-swipe-deck threshold=\"110\" label=\"Matches\">\n  <article>Ada</article>\n  <article>Linus</article>\n  <article>Grace</article>\n</usa-swipe-deck>","esm":"import { defineSwipeDeck } from 'motionary/components/widgets';\n\ndefineSwipeDeck(); // registers <usa-swipe-deck>\n\n/* then use it in your HTML:\n<usa-swipe-deck threshold=\"110\" label=\"Matches\">\n  <article>Ada</article>\n  <article>Linus</article>\n  <article>Grace</article>\n</usa-swipe-deck>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/swipe-deck","stability":"stable","deprecated":null,"source":"src/components/widgets/swipe-deck.ts","changed":[]},{"id":"swipeable","tag":"usa-swipeable","title":"Swipeable","description":"Swipe-to-dismiss and swipe actions: content follows the finger, flies out on a fast swipe or past the distance, otherwise springs home with your release velocity. Delete / arrow keys work too.","category":"gesture","since":"3.2","keywords":["swipe","dismiss","spring","keyboard"],"import":{"path":"motionary/components/gesture","define":"defineSwipeable","register":"defineSwipeable();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["axis","disabled","distance","dismiss","preset"],"events":["usa:swipe","usa:dismiss"],"slots":[],"methods":["swipe","reset"],"example":"<usa-swipeable distance=\"120\" dismiss>\n  <div class=\"card\">Swipe me away</div>\n</usa-swipeable>","esm":"import { defineSwipeable } from 'motionary/components/gesture';\n\ndefineSwipeable(); // registers <usa-swipeable>\n\n/* then use it in your HTML:\n<usa-swipeable distance=\"120\" dismiss>\n  <div class=\"card\">Swipe me away</div>\n</usa-swipeable>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/gesture/swipeable.ts","changed":["6.8"]},{"id":"switch","tag":"usa-switch","title":"Toggle switch variants","description":"6.7: four switches — iOS (the thumb stretches while pressed), day / night (sun becomes moon, stars appear), bounce (squash at the end) and liquid (a gooey fill pours in). role=\"switch\", forms, keyboard.","category":"click","since":"6.7","keywords":["switch","toggle","day night","dark mode","ios"],"import":{"path":"motionary/components/widgets","define":"defineSwitch","register":"defineSwitch();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["variant","label","name","value","disabled"],"events":["usa:change"],"slots":[],"methods":["toggle"],"example":"<usa-switch variant=\"daynight\" name=\"dark\" label=\"Dark mode\"></usa-switch>","esm":"import { defineSwitch } from 'motionary/components/widgets';\n\ndefineSwitch(); // registers <usa-switch>\n\n/* then use it in your HTML:\n<usa-switch variant=\"daynight\" name=\"dark\" label=\"Dark mode\"></usa-switch>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/switch","stability":"stable","deprecated":null,"source":"src/components/widgets/switch.ts","changed":["6.9","7.0","13.1","13.5"]},{"id":"tab-bar","tag":"usa-tab-bar","title":"Tabs with animated indicator","description":"6.2: the indicator stretches from the old tab to the new one (leading edge first) and the panel slides in from the side of travel. Pill, underline, glow or gooey; full tablist keyboard support.","category":"ui","since":"6.2","keywords":["tabs","indicator","segmented","underline","pill"],"import":{"path":"motionary/components/widgets","define":"defineTabBar","register":"defineTabBar();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["indicator","label","selected"],"events":["usa:change"],"slots":[],"methods":["select"],"example":"<usa-tab-bar indicator=\"pill\">\n  <button>Overview</button>\n  <button>Specs</button>\n  <button>Reviews</button>\n  <div data-panel>…</div>\n  <div data-panel>…</div>\n  <div data-panel>…</div>\n</usa-tab-bar>","esm":"import { defineTabBar } from 'motionary/components/widgets';\n\ndefineTabBar(); // registers <usa-tab-bar>\n\n/* then use it in your HTML:\n<usa-tab-bar indicator=\"pill\">\n  <button>Overview</button>\n  <button>Specs</button>\n  <button>Reviews</button>\n  <div data-panel>…</div>\n  <div data-panel>…</div>\n  <div data-panel>…</div>\n</usa-tab-bar>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/tab-bar","stability":"stable","deprecated":null,"source":"src/components/widgets/tab-bar.ts","changed":[]},{"id":"tabs","tag":"usa-tabs","title":"Tabs","description":"Accessible tabs whose indicator slides between tabs with a spring; panels slide in from the direction you moved. Line or pill indicator.","category":"ui","since":"2.6","keywords":["role=tablist","indicator","keyboard"],"import":{"path":"motionary/components/ui","define":"defineTabs","register":"defineTabs();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["indicator"],"events":["usa:change"],"slots":[],"methods":["select"],"example":"<usa-tabs>\n  <nav><button data-tab>One</button><button data-tab>Two</button></nav>\n  <section data-panel>…</section>\n  <section data-panel>…</section>\n</usa-tabs>","esm":"import { defineTabs } from 'motionary/components/ui';\n\ndefineTabs(); // registers <usa-tabs>\n\n/* then use it in your HTML:\n<usa-tabs>\n  <nav><button data-tab>One</button><button data-tab>Two</button></nav>\n  <section data-panel>…</section>\n  <section data-panel>…</section>\n</usa-tabs>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/ui/tabs.ts","changed":["6.7"]},{"id":"terminal","tag":"usa-terminal","title":"Terminal window","description":"8.2: a retro terminal window that types its commands after the prompt with a blinking block cursor and prints the output line by line when it scrolls into view — dark, green-phosphor or amber.","category":"ui","since":"8.2","keywords":["terminal","console","cli","typing","retro"],"import":{"path":"motionary/components/widgets","define":"defineTerminal","register":"defineTerminal();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["title","prompt","theme","speed","loop"],"events":["usa:done"],"slots":[],"methods":["replay","skip"],"example":"<usa-terminal title=\"zsh\" theme=\"green\">\n  <p data-cmd>npm i motionary</p>\n  <p>added 1 package in 2s</p>\n</usa-terminal>","esm":"import { defineTerminal } from 'motionary/components/widgets';\n\ndefineTerminal(); // registers <usa-terminal>\n\n/* then use it in your HTML:\n<usa-terminal title=\"zsh\" theme=\"green\">\n  <p data-cmd>npm i motionary</p>\n  <p>added 1 package in 2s</p>\n</usa-terminal>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/terminal","stability":"stable","deprecated":null,"source":"src/components/widgets/terminal.ts","changed":[]},{"id":"text-rotate","tag":"usa-text-rotate","title":"Rotating words","description":"Cycles words in place — the box keeps the width of the longest word, so nothing around it reflows.","category":"text","since":"2.2","keywords":["no reflow","slide","flip"],"import":{"path":"motionary/components/text","define":"defineTextRotate","register":"defineTextRotate();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["words","interval","paused","effect"],"events":["usa:change"],"slots":[],"methods":["next"],"example":"Build <usa-text-rotate words=\"fast|tiny|typed\"></usa-text-rotate> apps","esm":"import { defineTextRotate } from 'motionary/components/text';\n\ndefineTextRotate(); // registers <usa-text-rotate>\n\n/* then use it in your HTML:\nBuild <usa-text-rotate words=\"fast|tiny|typed\"></usa-text-rotate> apps\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/text-rotate.ts","changed":[]},{"id":"text-splitter","tag":"usa-text-splitter","title":"Text splitter","description":"10.3: splits its text into characters, words or lines and animates them in with a stagger (rise, fade, blur, flip, wave) when it scrolls into view — accessible, grapheme-aware. Requires motionary/runtime/text — npm i motionary, then use(text) before it mounts.","category":"text","since":"10.3","keywords":["split text","letters","words","lines","stagger","runtime"],"import":{"path":"motionary/components/widgets","define":"defineTextSplitter","register":"defineTextSplitter();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["split","effect","stagger","duration","loop","trigger"],"events":["usa:split","usa:done","usa:runtime-missing"],"slots":[],"methods":["replay","pieces"],"example":"<usa-text-splitter split=\"chars\" effect=\"rise\" stagger=\"30\">Motion, made simple.</usa-text-splitter>","esm":"import { use } from 'motionary/runtime';\nimport { text } from 'motionary/runtime/text';\n\nuse(text);\nimport { defineTextSplitter } from 'motionary/components/widgets';\n\ndefineTextSplitter(); // registers <usa-text-splitter>\n\n/* then use it in your HTML:\n<usa-text-splitter split=\"chars\" effect=\"rise\" stagger=\"30\">Motion, made simple.</usa-text-splitter>\n*/","requires":["text"],"tier":"basic","prerequisites":{"badge":"Requires: motionary/runtime/text","modules":["motionary/runtime/text"],"install":"npm i motionary","importAndRegister":"import { use } from 'motionary/runtime';\nimport { text } from 'motionary/runtime/text';\nimport { defineTextSplitter } from 'motionary/components/widgets';\n\nuse(text);\ndefineTextSplitter(); // registers <usa-text-splitter> — after the prerequisites","order":"Register the core first, then the module: use(text) also registers the core. CDN: load runtime.iife.js, then runtime/text.iife.js (it registers itself).","cdn":"<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime.iife.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/motionary@17/dist/runtime/text.iife.js\"></script>\n<!-- then the component bundles -->\n<script src=\"https://unpkg.com/motionary@17/dist/components.umd.js\"></script>\n<script src=\"https://unpkg.com/motionary@17/dist/widgets.umd.js\"></script>","example":"<usa-text-splitter split=\"chars\" effect=\"rise\" stagger=\"30\">Motion, made simple.</usa-text-splitter>","docs":["https://github.com/HarrisonCN/Motionary/blob/main/docs/runtime/text.md"]},"entry":"motionary/widgets/text-splitter","stability":"stable","deprecated":null,"source":"src/components/widgets/text-splitter.ts","changed":[]},{"id":"theme-surface","tag":"usa-theme-surface","title":"Theme surface","description":"8.6: a themeable card that follows the nearest theme — light, dark, neon (pulsing glow edge), glass (frosted backdrop with a sheen) or soft neumorphic relief — and cross-fades when the theme changes.","category":"ui","since":"8.6","keywords":["surface","card","neumorphism","glass","neon"],"import":{"path":"motionary/components/widgets","define":"defineThemeSurface","register":"defineThemeSurface();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["theme"],"events":["usa:theme"],"slots":[],"methods":[],"example":"<usa-theme-surface theme=\"glass\">\n  <h3>Frosted</h3><p>Content…</p>\n</usa-theme-surface>","esm":"import { defineThemeSurface } from 'motionary/components/widgets';\n\ndefineThemeSurface(); // registers <usa-theme-surface>\n\n/* then use it in your HTML:\n<usa-theme-surface theme=\"glass\">\n  <h3>Frosted</h3><p>Content…</p>\n</usa-theme-surface>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/theme-surface","stability":"stable","deprecated":null,"source":"src/components/widgets/theme-surface.ts","changed":[]},{"id":"theme-switcher","tag":"usa-theme-switcher","title":"Theme switcher","description":"8.6: a segmented switcher for the 8.6 theme system — light, dark, neon, glass and soft (neumorphism); a pill slides under the active option and the page change is revealed with a circular wipe from the click point.","category":"ui","since":"8.6","keywords":["theme","dark mode","switcher","neon","glassmorphism"],"import":{"path":"motionary/components/widgets","define":"defineThemeSwitcher","register":"defineThemeSwitcher();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["themes","target","label","persist","value"],"events":["usa:change"],"slots":[],"methods":[],"example":"<usa-theme-switcher themes=\"light,dark,neon,glass,neu\" persist></usa-theme-switcher>","esm":"import { defineThemeSwitcher } from 'motionary/components/widgets';\n\ndefineThemeSwitcher(); // registers <usa-theme-switcher>\n\n/* then use it in your HTML:\n<usa-theme-switcher themes=\"light,dark,neon,glass,neu\" persist></usa-theme-switcher>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/theme-switcher","stability":"stable","deprecated":null,"source":"src/components/widgets/theme-switcher.ts","changed":["13.1"]},{"id":"tilt","tag":"usa-tilt","title":"3D tilt card","description":"Tilts toward the pointer in 3D with an optional glare; exposes --usa-tilt-x/y for parallax layers inside.","category":"interaction","since":"2.2","keywords":["perspective","glare"],"import":{"path":"motionary/components/interaction","define":"defineTilt","register":"defineTilt();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["max","scale","perspective","glare","reverse","disabled"],"events":[],"slots":[],"methods":[],"example":"<usa-tilt glare max=\"12\">\n  <div class=\"card\">…</div>\n</usa-tilt>","esm":"import { defineTilt } from 'motionary/components/interaction';\n\ndefineTilt(); // registers <usa-tilt>\n\n/* then use it in your HTML:\n<usa-tilt glare max=\"12\">\n  <div class=\"card\">…</div>\n</usa-tilt>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/interaction/tilt.ts","changed":["12.3"]},{"id":"timeline","tag":"usa-timeline","title":"Timeline","description":"Every data-tl child becomes a step in document order. data-at ('-=200', '<', 'label+=100') overlaps or aligns steps; scrub ties progress to scroll; trigger view / click / manual.","category":"timeline","since":"3.1","keywords":["choreography","sequence","scrub","labels","overlap"],"import":{"path":"motionary/components/timeline","define":"defineTimeline","register":"defineTimeline();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["scrub","trigger","overlap","duration","stagger","smooth","repeat"],"events":["usa:complete"],"slots":[],"methods":["play","reverse","seek"],"example":"<usa-timeline overlap=\"150\">\n  <h2 data-tl=\"fade-up\">Title</h2>\n  <p data-tl=\"blur\">Subtitle</p>\n  <button data-tl=\"scale\" data-at=\"<+=100\">CTA</button>\n</usa-timeline>","esm":"import { defineTimeline } from 'motionary/components/timeline';\n\ndefineTimeline(); // registers <usa-timeline>\n\n/* then use it in your HTML:\n<usa-timeline overlap=\"150\">\n  <h2 data-tl=\"fade-up\">Title</h2>\n  <p data-tl=\"blur\">Subtitle</p>\n  <button data-tl=\"scale\" data-at=\"<+=100\">CTA</button>\n</usa-timeline>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/timeline/timeline-el.ts","changed":["4.0","4.1","4.6","4.9","5.0","6.5"]},{"id":"tip","tag":"usa-tip","title":"Tooltip / popover 2.0","description":"6.6: springs out of its trigger with an arrow, flips to stay inside the viewport and shifts along the edge; hover + keyboard focus (Esc closes) or click popovers with rich content.","category":"ui","since":"6.6","keywords":["tooltip","popover","hint","flip","a11y"],"import":{"path":"motionary/components/widgets","define":"defineTip","register":"defineTip();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["text","placement","trigger","delay"],"events":["usa:open","usa:close"],"slots":[],"methods":["show","hide"],"example":"<usa-tip text=\"Copied to clipboard\" placement=\"top\">\n  <button>Copy</button>\n</usa-tip>\n<usa-tip trigger=\"click\" placement=\"bottom\">\n  <button>Details</button>\n  <div slot=\"tip\"><strong>Pro tip</strong> …</div>\n</usa-tip>","esm":"import { defineTip } from 'motionary/components/widgets';\n\ndefineTip(); // registers <usa-tip>\n\n/* then use it in your HTML:\n<usa-tip text=\"Copied to clipboard\" placement=\"top\">\n  <button>Copy</button>\n</usa-tip>\n<usa-tip trigger=\"click\" placement=\"bottom\">\n  <button>Details</button>\n  <div slot=\"tip\"><strong>Pro tip</strong> …</div>\n</usa-tip>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/tip","stability":"stable","deprecated":null,"source":"src/components/widgets/tip.ts","changed":["6.9","7.0"]},{"id":"toast-stack","tag":"usa-toast-stack","title":"Toast stack","description":"6.3: toasts pile up into a collapsed stack (newest in front, older ones peeking behind), fan out on hover or focus, auto-dismiss (paused while hovered) and swipe away. Six positions, a polite live region, stackToast() helper and data-usa-toast triggers.","category":"feedback","since":"6.3","keywords":["toast","notification","snackbar","stack","swipe"],"import":{"path":"motionary/components/widgets","define":"defineToastStack","register":"defineToastStack();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["position","duration","max"],"events":["usa:show","usa:dismiss"],"slots":[],"methods":["show","dismiss","clear"],"example":"<button data-usa-toast=\"Saved to your library\" data-usa-toast-type=\"success\">Save</button>\n<usa-toast-stack position=\"bottom-right\" duration=\"4000\" max=\"3\"></usa-toast-stack>\n<!-- or from JS: stackToast({ title: 'Done', message: 'Saved', type: 'success' }) -->","esm":"import { defineToastStack } from 'motionary/components/widgets';\n\ndefineToastStack(); // registers <usa-toast-stack>\n\n/* then use it in your HTML:\n<button data-usa-toast=\"Saved to your library\" data-usa-toast-type=\"success\">Save</button>\n<usa-toast-stack position=\"bottom-right\" duration=\"4000\" max=\"3\"></usa-toast-stack>\n<!-- or from JS: stackToast({ title: 'Done', message: 'Saved', type: 'success' }) -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/toast-stack","stability":"stable","deprecated":null,"source":"src/components/widgets/toast.ts","changed":["13.3"]},{"id":"toaster","tag":"usa-toaster","title":"Toasts","description":"toast(\"Saved\") slides a notification in; it pauses on hover, stacks with FLIP and announces politely (errors assertively).","category":"feedback","since":"2.2","keywords":["toast()","aria-live"],"import":{"path":"motionary/components/feedback","define":"defineToaster","register":"defineToaster();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["label","position","max"],"events":["usa:toast"],"slots":[],"methods":["show","clear"],"example":"<usa-toaster position=\"bottom-right\"></usa-toaster>\n<script type=\"module\">\n  import { toast } from 'motionary/components/feedback';\n  toast('Saved', { type: 'success' });\n</script>","esm":"import { defineToaster } from 'motionary/components/feedback';\n\ndefineToaster(); // registers <usa-toaster>\n\n/* then use it in your HTML:\n<usa-toaster position=\"bottom-right\"></usa-toaster>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/feedback/toast.ts","changed":[]},{"id":"token-editor","tag":"usa-token-editor","title":"Motion token editor (W3C DTCG)","description":"10.6 (motion design tokens 2.0): edit duration and cubic-bézier easing tokens with a live preview per token, then export W3C Design Tokens (DTCG 2025.10 or the earlier draft) or import a DTCG file — aliases resolved, problems listed; apply writes the tokens to :root custom properties as you edit.","category":"ui","since":"10.6","keywords":["design tokens","dtcg","w3c","motion tokens","easing","duration"],"import":{"path":"motionary/components/widgets","define":"defineTokenEditor","register":"defineTokenEditor();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["apply","format","groups","label"],"events":["usa:export","usa:import","usa:change"],"slots":[],"methods":["exportJSON","importJSON"],"example":"<usa-token-editor apply format=\"2025.10\"></usa-token-editor>","esm":"import { defineTokenEditor } from 'motionary/components/widgets';\n\ndefineTokenEditor(); // registers <usa-token-editor>\n\n/* then use it in your HTML:\n<usa-token-editor apply format=\"2025.10\"></usa-token-editor>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/token-editor","stability":"stable","deprecated":null,"source":"src/components/widgets/token-editor.ts","changed":[]},{"id":"typewriter","tag":"usa-typewriter","title":"Typewriter","description":"Types text, or cycles through phrases with delete and pause. Full text stays available to screen readers.","category":"text","since":"2.2","keywords":["words","loop","caret"],"import":{"path":"motionary/components/text","define":"defineTypewriter","register":"defineTypewriter();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["text","words","start","speed","delete-speed","pause","loop","delay"],"events":["usa:complete"],"slots":[],"methods":["start","stop","restart"],"example":"<usa-typewriter words=\"Hello, Windows.|Hello, web.\" loop></usa-typewriter>","esm":"import { defineTypewriter } from 'motionary/components/text';\n\ndefineTypewriter(); // registers <usa-typewriter>\n\n/* then use it in your HTML:\n<usa-typewriter words=\"Hello, Windows.|Hello, web.\" loop></usa-typewriter>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/typewriter.ts","changed":[]},{"id":"upload-progress","tag":"usa-upload-progress","title":"Upload progress","description":"7.7: a file row whose bar eases to value with a running shine; at 100 it turns into a check that draws itself, on error it shakes and offers Retry.","category":"ui","since":"7.7","keywords":["upload","progress","file","form","status"],"import":{"path":"motionary/components/widgets","define":"defineUploadProgress","register":"defineUploadProgress();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["name","size","value","status","message"],"events":["usa:retry","usa:done","usa:error"],"slots":[],"methods":[],"example":"<usa-upload-progress name=\"report.pdf\" size=\"2400000\" value=\"40\"></usa-upload-progress>\n<script>addEventListener('DOMContentLoaded', () => { const row = document.querySelector('usa-upload-progress'); row.value = 75; row.status = 'error'; });</script>","esm":"import { defineUploadProgress } from 'motionary/components/widgets';\n\ndefineUploadProgress(); // registers <usa-upload-progress>\n\n/* then use it in your HTML:\n<usa-upload-progress name=\"report.pdf\" size=\"2400000\" value=\"40\"></usa-upload-progress>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/upload-progress","stability":"stable","deprecated":null,"source":"src/components/widgets/upload-progress.ts","changed":[]},{"id":"video-card","tag":"usa-video-card","title":"Video card","description":"9.4: a video thumbnail card — hover or focus plays a muted preview with a progress line, a play badge and a duration chip; without a video the poster drifts (Ken Burns).","category":"ui","since":"9.4","keywords":["video","card","preview","thumbnail","hover"],"import":{"path":"motionary/components/widgets","define":"defineVideoCard","register":"defineVideoCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","duration"],"events":["usa:open"],"slots":[],"methods":[],"example":"<usa-video-card duration=\"2:41\">\n  <img src=\"poster.jpg\" alt=\"\">\n  <video src=\"preview.mp4\" muted playsinline></video>\n  <h3>Making of Motionary</h3>\n</usa-video-card>","esm":"import { defineVideoCard } from 'motionary/components/widgets';\n\ndefineVideoCard(); // registers <usa-video-card>\n\n/* then use it in your HTML:\n<usa-video-card duration=\"2:41\">\n  <img src=\"poster.jpg\" alt=\"\">\n  <video src=\"preview.mp4\" muted playsinline></video>\n  <h3>Making of Motionary</h3>\n</usa-video-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/video-card","stability":"stable","deprecated":null,"source":"src/components/widgets/video-card.ts","changed":[]},{"id":"view-switch","tag":"usa-view-switch","title":"View switch","description":"One view at a time with direction-aware slide, fade, scale or drill transitions — tabs, wizards, app pages.","category":"transitions","since":"2.2","keywords":["tabs","Fluent"],"import":{"path":"motionary/components/transitions","define":"defineViewSwitch","register":"defineViewSwitch();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["active","duration","effect"],"events":["usa:change"],"slots":[],"methods":["show"],"example":"<usa-view-switch active=\"home\">\n  <section data-view=\"home\">…</section>\n  <section data-view=\"about\">…</section>\n</usa-view-switch>","esm":"import { defineViewSwitch } from 'motionary/components/transitions';\n\ndefineViewSwitch(); // registers <usa-view-switch>\n\n/* then use it in your HTML:\n<usa-view-switch active=\"home\">\n  <section data-view=\"home\">…</section>\n  <section data-view=\"about\">…</section>\n</usa-view-switch>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/transitions/view-switch.ts","changed":[]},{"id":"voice-button","tag":"usa-voice-button","title":"Voice button","description":"7.8: a push-to-talk mic button — while listening a halo breathes and level bars wave; feed it live input levels with level (0–1) and they follow your voice.","category":"ui","since":"7.8","keywords":["voice","mic","speech","ai","waveform"],"import":{"path":"motionary/components/widgets","define":"defineVoiceButton","register":"defineVoiceButton();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["label","bars","listening"],"events":[],"slots":[],"methods":["toggle"],"example":"<usa-voice-button label=\"Talk to the assistant\"></usa-voice-button>\n<script>const vb = document.querySelector('usa-voice-button'); vb.addEventListener('usa:start', () => (vb.level = 0.6)); // feed vb.level (0–1) from your audio analyser</script>","esm":"import { defineVoiceButton } from 'motionary/components/widgets';\n\ndefineVoiceButton(); // registers <usa-voice-button>\n\n/* then use it in your HTML:\n<usa-voice-button label=\"Talk to the assistant\"></usa-voice-button>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/voice-button","stability":"stable","deprecated":null,"source":"src/components/widgets/voice-button.ts","changed":[]},{"id":"volume-knob","tag":"usa-volume-knob","title":"Volume knob","description":"7.1: a rotary knob — drag up / down, scroll or use the keys; the value arc fills, a ring of LED ticks lights up and the pointer springs to the angle. role=\"slider\".","category":"interaction","since":"7.1","keywords":["knob","volume","rotary","dial","slider"],"import":{"path":"motionary/components/widgets","define":"defineVolumeKnob","register":"defineVolumeKnob();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["min","max","label"],"events":["usa:change","usa:input"],"slots":[],"methods":[],"example":"<usa-volume-knob value=\"60\" label=\"Volume\"></usa-volume-knob>","esm":"import { defineVolumeKnob } from 'motionary/components/widgets';\n\ndefineVolumeKnob(); // registers <usa-volume-knob>\n\n/* then use it in your HTML:\n<usa-volume-knob value=\"60\" label=\"Volume\"></usa-volume-knob>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/volume-knob","stability":"stable","deprecated":null,"source":"src/components/widgets/volume-knob.ts","changed":[]},{"id":"water-ripple","tag":"usa-water-ripple","title":"Water ripple","description":"Interactive water ripples on a canvas over the content: move or tap to disturb the surface.","category":"background","since":"2.8","keywords":["canvas","ripple","interactive"],"import":{"path":"motionary/components/background","define":"defineWaterRipple","register":"defineWaterRipple();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["damping","color","strength"],"events":[],"slots":[],"methods":["mount"],"example":"<usa-water-ripple>\n  <img src=\"lake.jpg\" alt=\"\">\n</usa-water-ripple>","esm":"import { defineWaterRipple } from 'motionary/components/background';\n\ndefineWaterRipple(); // registers <usa-water-ripple>\n\n/* then use it in your HTML:\n<usa-water-ripple>\n  <img src=\"lake.jpg\" alt=\"\">\n</usa-water-ripple>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/background/bg-fx.ts","changed":[]},{"id":"wave-text","tag":"usa-wave-text","title":"Wave text","description":"Letters bob in a travelling wave — playful headlines and loading labels.","category":"text","since":"2.8","keywords":["wave","letters"],"import":{"path":"motionary/components/text","define":"defineWaveText","register":"defineWaveText();"},"cdn":"https://unpkg.com/motionary@17/dist/components.umd.js","attributes":["text","amplitude","speed","stagger"],"events":[],"slots":[],"methods":["mount","splitChars"],"example":"<usa-wave-text>Loading…</usa-wave-text>","esm":"import { defineWaveText } from 'motionary/components/text';\n\ndefineWaveText(); // registers <usa-wave-text>\n\n/* then use it in your HTML:\n<usa-wave-text>Loading…</usa-wave-text>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":null,"stability":"stable","deprecated":null,"source":"src/components/text/text-fx.ts","changed":[]},{"id":"weather-card","tag":"usa-weather-card","title":"Animated weather card","description":"6.8: sun rays turn, clouds drift, rain and snow fall, a flash-safe bolt glows, fog bands and stars — pick a condition and the scene cross-fades; the temperature counts up.","category":"feedback","since":"6.8","keywords":["weather","forecast","rain","snow","widget"],"import":{"path":"motionary/components/widgets","define":"defineWeatherCard","register":"defineWeatherCard();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["condition","temp","place","unit","label"],"events":[],"slots":[],"methods":[],"example":"<usa-weather-card condition=\"rain\" temp=\"12\" place=\"Lisbon\"></usa-weather-card>","esm":"import { defineWeatherCard } from 'motionary/components/widgets';\n\ndefineWeatherCard(); // registers <usa-weather-card>\n\n/* then use it in your HTML:\n<usa-weather-card condition=\"rain\" temp=\"12\" place=\"Lisbon\"></usa-weather-card>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/weather-card","stability":"stable","deprecated":null,"source":"src/components/widgets/weather-card.ts","changed":[]},{"id":"worker-canvas","tag":"usa-worker-canvas","title":"Worker canvas","description":"9.6: a canvas animation rendered in a Web Worker on an OffscreenCanvas — the main thread stays free for input — with a main-thread fallback; particles, orbits, starfield or your own draw program.","category":"ui","since":"9.6","keywords":["offscreencanvas","worker","canvas","performance","particles"],"import":{"path":"motionary/components/widgets","define":"defineWorkerCanvas","register":"defineWorkerCanvas();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["scene","label"],"events":["usa:backend"],"slots":[],"methods":[],"example":"<usa-worker-canvas scene=\"starfield\" style=\"height:240px\"></usa-worker-canvas>","esm":"import { defineWorkerCanvas } from 'motionary/components/widgets';\n\ndefineWorkerCanvas(); // registers <usa-worker-canvas>\n\n/* then use it in your HTML:\n<usa-worker-canvas scene=\"starfield\" style=\"height:240px\"></usa-worker-canvas>\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/worker-canvas","stability":"stable","deprecated":null,"source":"src/components/widgets/worker-canvas.ts","changed":["10.9","11.0"]},{"id":"xp-bar","tag":"usa-xp-bar","title":"XP bar","description":"7.5: an experience bar — add(n) fills it smoothly; overflowing fills to the end, the level badge pops and the bar restarts with the remainder (several levels if needed).","category":"ui","since":"7.5","keywords":["xp","level","progress","game","experience"],"import":{"path":"motionary/components/widgets","define":"defineXpBar","register":"defineXpBar();"},"cdn":"https://unpkg.com/motionary@17/dist/widgets.umd.js","attributes":["level","xp","per"],"events":["usa:levelup","usa:xp"],"slots":[],"methods":["add"],"example":"<usa-xp-bar level=\"3\" xp=\"40\" per=\"100\"></usa-xp-bar>\n<!-- +75 XP → level 4, 15 XP -->\n<script>addEventListener('DOMContentLoaded', () => document.querySelector('usa-xp-bar').add(75));</script>","esm":"import { defineXpBar } from 'motionary/components/widgets';\n\ndefineXpBar(); // registers <usa-xp-bar>\n\n/* then use it in your HTML:\n<usa-xp-bar level=\"3\" xp=\"40\" per=\"100\"></usa-xp-bar>\n<!-- +75 XP → level 4, 15 XP -->\n*/","requires":[],"tier":"basic","prerequisites":null,"entry":"motionary/widgets/xp-bar","stability":"stable","deprecated":null,"source":"src/components/widgets/xp-bar.ts","changed":[]}],"effects":[{"name":"fluid","pack":"gpu","entry":"motionary/effects/fluid","register":"registerFluid();"},{"name":"smoke","pack":"gpu","entry":"motionary/effects/smoke","register":"registerSmoke();"},{"name":"fire","pack":"gpu","entry":"motionary/effects/fire","register":"registerFire();"},{"name":"ink","pack":"gpu","entry":"motionary/effects/ink","register":"registerInk();"},{"name":"fireflies","pack":"gpu","entry":"motionary/effects/fireflies","register":"registerFireflies();"},{"name":"sakura","pack":"gpu","entry":"motionary/effects/sakura","register":"registerSakura();"},{"name":"leaves","pack":"gpu","entry":"motionary/effects/leaves","register":"registerLeaves();"},{"name":"splash","pack":"gpu","entry":"motionary/effects/splash","register":"registerSplash();"},{"name":"liquid-text","pack":"text","entry":"motionary/effects/liquid-text","register":"registerLiquidText();"},{"name":"neon-write","pack":"text","entry":"motionary/effects/neon-write","register":"registerNeonWrite();"},{"name":"particle-text","pack":"text","entry":"motionary/effects/particle-text","register":"registerParticleText();"},{"name":"glitch-text","pack":"text","entry":"motionary/effects/glitch-text","register":"registerGlitchText();"},{"name":"text-trail","pack":"text","entry":"motionary/effects/text-trail","register":"registerTextTrail();"},{"name":"font-breathe","pack":"text","entry":"motionary/effects/font-breathe","register":"registerFontBreathe();"},{"name":"flip-chars","pack":"text","entry":"motionary/effects/flip-chars","register":"registerFlipChars();"},{"name":"light-follow","pack":"light","entry":"motionary/effects/light-follow","register":"registerLightFollow();"},{"name":"refraction","pack":"light","entry":"motionary/effects/refraction","register":"registerRefraction();"},{"name":"brushed-metal","pack":"light","entry":"motionary/effects/brushed-metal","register":"registerBrushedMetal();"},{"name":"pearlescent","pack":"light","entry":"motionary/effects/pearlescent","register":"registerPearlescent();"},{"name":"god-rays","pack":"light","entry":"motionary/effects/god-rays","register":"registerGodRays();"},{"name":"pointer-shadow","pack":"light","entry":"motionary/effects/pointer-shadow","register":"registerPointerShadow();"},{"name":"depth-stack","pack":"depth","entry":"motionary/effects/depth-stack","register":"registerDepthStack();"},{"name":"product-spin","pack":"depth","entry":"motionary/effects/product-spin","register":"registerProductSpin();"},{"name":"card-flip-3d","pack":"depth","entry":"motionary/effects/card-flip-3d","register":"registerCardFlip3d();"},{"name":"origami","pack":"depth","entry":"motionary/effects/origami","register":"registerOrigami();"},{"name":"orbit-camera","pack":"depth","entry":"motionary/effects/orbit-camera","register":"registerOrbitCamera();"},{"name":"path-morph","pack":"morph","entry":"motionary/effects/path-morph","register":"registerPathMorph();"},{"name":"blob-button","pack":"morph","entry":"motionary/effects/blob-button","register":"registerBlobButton();"},{"name":"stroke-draw","pack":"morph","entry":"motionary/effects/stroke-draw","register":"registerStrokeDraw();"},{"name":"noise-reveal","pack":"morph","entry":"motionary/effects/noise-reveal","register":"registerNoiseReveal();"},{"name":"icon-swap","pack":"morph","entry":"motionary/effects/icon-swap","register":"registerIconSwap();"},{"name":"ripple-dissolve","pack":"transitions","entry":"motionary/effects/ripple-dissolve","register":"registerRippleDissolve();"},{"name":"shatter","pack":"transitions","entry":"motionary/effects/shatter","register":"registerShatter();"},{"name":"mosaic-flip","pack":"transitions","entry":"motionary/effects/mosaic-flip","register":"registerMosaicFlip();"},{"name":"liquid-wipe","pack":"transitions","entry":"motionary/effects/liquid-wipe","register":"registerLiquidWipe();"},{"name":"page-curl","pack":"transitions","entry":"motionary/effects/page-curl","register":"registerPageCurl();"},{"name":"camera-dolly","pack":"transitions","entry":"motionary/effects/camera-dolly","register":"registerCameraDolly();"},{"name":"rain-glass","pack":"weather","entry":"motionary/effects/rain-glass","register":"registerRainGlass();"},{"name":"snowfall","pack":"weather","entry":"motionary/effects/snowfall","register":"registerSnowfall();"},{"name":"lightning","pack":"weather","entry":"motionary/effects/lightning","register":"registerLightning();"},{"name":"fog","pack":"weather","entry":"motionary/effects/fog","register":"registerFog();"},{"name":"aurora-veil","pack":"weather","entry":"motionary/effects/aurora-veil","register":"registerAuroraVeil();"},{"name":"day-cycle","pack":"weather","entry":"motionary/effects/day-cycle","register":"registerDayCycle();"},{"name":"soft-body","pack":"physics","entry":"motionary/effects/soft-body","register":"registerSoftBody();"},{"name":"magnet","pack":"physics","entry":"motionary/effects/magnet","register":"registerMagnet();"},{"name":"cloth","pack":"physics","entry":"motionary/effects/cloth","register":"registerCloth();"},{"name":"rope","pack":"physics","entry":"motionary/effects/rope","register":"registerRope();"},{"name":"pinball","pack":"physics","entry":"motionary/effects/pinball","register":"registerPinball();"},{"name":"focus-draw","pack":"focus","entry":"motionary/effects/focus-draw","register":"registerFocusDraw();"},{"name":"marching-ants","pack":"focus","entry":"motionary/effects/marching-ants","register":"registerMarchingAnts();"},{"name":"success-check","pack":"focus","entry":"motionary/effects/success-check","register":"registerSuccessCheck();"},{"name":"highlight-sweep","pack":"focus","entry":"motionary/effects/highlight-sweep","register":"registerHighlightSweep();"},{"name":"waveform-scope","pack":"music","entry":"motionary/effects/waveform-scope","register":"registerWaveformScope();"},{"name":"radial-spectrum","pack":"music","entry":"motionary/effects/radial-spectrum","register":"registerRadialSpectrum();"},{"name":"spectrum-mirror","pack":"music","entry":"motionary/effects/spectrum-mirror","register":"registerSpectrumMirror();"},{"name":"sound-particles","pack":"music","entry":"motionary/effects/sound-particles","register":"registerSoundParticles();"},{"name":"beat-bounce","pack":"music","entry":"motionary/effects/beat-bounce","register":"registerBeatBounce();"},{"name":"vinyl-spin","pack":"music","entry":"motionary/effects/vinyl-spin","register":"registerVinylSpin();"},{"name":"bars-grow","pack":"chart","entry":"motionary/effects/bars-grow","register":"registerBarsGrow();"},{"name":"line-draw","pack":"chart","entry":"motionary/effects/line-draw","register":"registerLineDraw();"},{"name":"ring-sweep","pack":"chart","entry":"motionary/effects/ring-sweep","register":"registerRingSweep();"},{"name":"sankey-flow","pack":"chart","entry":"motionary/effects/sankey-flow","register":"registerSankeyFlow();"},{"name":"number-roll","pack":"chart","entry":"motionary/effects/number-roll","register":"registerNumberRoll();"},{"name":"dots-pop","pack":"chart","entry":"motionary/effects/dots-pop","register":"registerDotsPop();"},{"name":"fly-to-cart","pack":"shop","entry":"motionary/effects/fly-to-cart","register":"registerFlyToCart();"},{"name":"price-flip","pack":"shop","entry":"motionary/effects/price-flip","register":"registerPriceFlip();"},{"name":"stock-pulse","pack":"shop","entry":"motionary/effects/stock-pulse","register":"registerStockPulse();"},{"name":"sale-shine","pack":"shop","entry":"motionary/effects/sale-shine","register":"registerSaleShine();"},{"name":"badge-pop","pack":"shop","entry":"motionary/effects/badge-pop","register":"registerBadgePop();"},{"name":"typing-dots","pack":"social","entry":"motionary/effects/typing-dots","register":"registerTypingDots();"},{"name":"message-in","pack":"social","entry":"motionary/effects/message-in","register":"registerMessageIn();"},{"name":"reaction-burst","pack":"social","entry":"motionary/effects/reaction-burst","register":"registerReactionBurst();"},{"name":"read-receipt","pack":"social","entry":"motionary/effects/read-receipt","register":"registerReadReceipt();"},{"name":"mention-glow","pack":"social","entry":"motionary/effects/mention-glow","register":"registerMentionGlow();"},{"name":"achievement-unlock","pack":"game","entry":"motionary/effects/achievement-unlock","register":"registerAchievementUnlock();"},{"name":"level-up","pack":"game","entry":"motionary/effects/level-up","register":"registerLevelUp();"},{"name":"chest-open","pack":"game","entry":"motionary/effects/chest-open","register":"registerChestOpen();"},{"name":"coin-burst","pack":"game","entry":"motionary/effects/coin-burst","register":"registerCoinBurst();"},{"name":"xp-gain","pack":"game","entry":"motionary/effects/xp-gain","register":"registerXpGain();"},{"name":"route-draw","pack":"geo","entry":"motionary/effects/route-draw","register":"registerRouteDraw();"},{"name":"marker-pulse","pack":"geo","entry":"motionary/effects/marker-pulse","register":"registerMarkerPulse();"},{"name":"pin-drop","pack":"geo","entry":"motionary/effects/pin-drop","register":"registerPinDrop();"},{"name":"globe-spin","pack":"geo","entry":"motionary/effects/globe-spin","register":"registerGlobeSpin();"},{"name":"field-shake","pack":"form","entry":"motionary/effects/field-shake","register":"registerFieldShake();"},{"name":"field-success","pack":"form","entry":"motionary/effects/field-success","register":"registerFieldSuccess();"},{"name":"label-float","pack":"form","entry":"motionary/effects/label-float","register":"registerLabelFloat();"},{"name":"form-cascade","pack":"form","entry":"motionary/effects/form-cascade","register":"registerFormCascade();"},{"name":"stream-text","pack":"ai","entry":"motionary/effects/stream-text","register":"registerStreamText();"},{"name":"thinking-glow","pack":"ai","entry":"motionary/effects/thinking-glow","register":"registerThinkingGlow();"},{"name":"voice-wave","pack":"ai","entry":"motionary/effects/voice-wave","register":"registerVoiceWave();"},{"name":"gen-skeleton","pack":"ai","entry":"motionary/effects/gen-skeleton","register":"registerGenSkeleton();"},{"name":"firework-burst","pack":"festival","entry":"motionary/effects/firework-burst","register":"registerFireworkBurst();"},{"name":"lantern-rise","pack":"festival","entry":"motionary/effects/lantern-rise","register":"registerLanternRise();"},{"name":"xmas-snow","pack":"festival","entry":"motionary/effects/xmas-snow","register":"registerXmasSnow();"},{"name":"spooky-float","pack":"festival","entry":"motionary/effects/spooky-float","register":"registerSpookyFloat();"},{"name":"pixelate-in","pack":"retro","entry":"motionary/effects/pixelate-in","register":"registerPixelateIn();"},{"name":"crt-power","pack":"retro","entry":"motionary/effects/crt-power","register":"registerCrtPower();"},{"name":"vhs-glitch","pack":"retro","entry":"motionary/effects/vhs-glitch","register":"registerVhsGlitch();"},{"name":"y2k-shine","pack":"retro","entry":"motionary/effects/y2k-shine","register":"registerY2kShine();"},{"name":"vine-grow","pack":"organic","entry":"motionary/effects/vine-grow","register":"registerVineGrow();"},{"name":"bloom","pack":"organic","entry":"motionary/effects/bloom","register":"registerBloom();"},{"name":"water-drop","pack":"organic","entry":"motionary/effects/water-drop","register":"registerWaterDrop();"},{"name":"breathe","pack":"organic","entry":"motionary/effects/breathe","register":"registerBreathe();"},{"name":"hud-frame","pack":"cyber","entry":"motionary/effects/hud-frame","register":"registerHudFrame();"},{"name":"scanline-sweep","pack":"cyber","entry":"motionary/effects/scanline-sweep","register":"registerScanlineSweep();"},{"name":"hologram","pack":"cyber","entry":"motionary/effects/hologram","register":"registerHologram();"},{"name":"data-decode","pack":"cyber","entry":"motionary/effects/data-decode","register":"registerDataDecode();"},{"name":"paper-unfold","pack":"paper","entry":"motionary/effects/paper-unfold","register":"registerPaperUnfold();"},{"name":"pencil-sketch","pack":"paper","entry":"motionary/effects/pencil-sketch","register":"registerPencilSketch();"},{"name":"watercolor","pack":"paper","entry":"motionary/effects/watercolor","register":"registerWatercolor();"},{"name":"crumple","pack":"paper","entry":"motionary/effects/crumple","register":"registerCrumple();"},{"name":"neon-ignite","pack":"surface","entry":"motionary/effects/neon-ignite","register":"registerNeonIgnite();"},{"name":"neon-pulse","pack":"surface","entry":"motionary/effects/neon-pulse","register":"registerNeonPulse();"},{"name":"glass-frost","pack":"surface","entry":"motionary/effects/glass-frost","register":"registerGlassFrost();"},{"name":"neu-press","pack":"surface","entry":"motionary/effects/neu-press","register":"registerNeuPress();"},{"name":"swipe-hint","pack":"gesture3","entry":"motionary/effects/swipe-hint","register":"registerSwipeHint();"},{"name":"pinch-hint","pack":"gesture3","entry":"motionary/effects/pinch-hint","register":"registerPinchHint();"},{"name":"tilt-wobble","pack":"gesture3","entry":"motionary/effects/tilt-wobble","register":"registerTiltWobble();"},{"name":"depth-in","pack":"gesture3","entry":"motionary/effects/depth-in","register":"registerDepthIn();"},{"name":"portal-open","pack":"spatial","entry":"motionary/effects/portal-open","register":"registerPortalOpen();"},{"name":"orbit-in","pack":"spatial","entry":"motionary/effects/orbit-in","register":"registerOrbitIn();"},{"name":"spatial-float","pack":"spatial","entry":"motionary/effects/spatial-float","register":"registerSpatialFloat();"},{"name":"depth-pop","pack":"spatial","entry":"motionary/effects/depth-pop","register":"registerDepthPop();"},{"name":"dolly-in","pack":"cinema","entry":"motionary/effects/dolly-in","register":"registerDollyIn();"},{"name":"pan-reveal","pack":"cinema","entry":"motionary/effects/pan-reveal","register":"registerPanReveal();"},{"name":"letterbox","pack":"cinema","entry":"motionary/effects/letterbox","register":"registerLetterbox();"},{"name":"rack-focus","pack":"cinema","entry":"motionary/effects/rack-focus","register":"registerRackFocus();"},{"name":"lottie-play","pack":"lottie","entry":"motionary/effects/lottie-play","register":"registerLottiePlay();"},{"name":"icon-pop","pack":"lottie","entry":"motionary/effects/icon-pop","register":"registerIconPop();"},{"name":"halftone-in","pack":"genart","entry":"motionary/effects/halftone-in","register":"registerHalftoneIn();"},{"name":"mesh-drift","pack":"genart","entry":"motionary/effects/mesh-drift","register":"registerMeshDrift();"},{"name":"kaleido","pack":"genart","entry":"motionary/effects/kaleido","register":"registerKaleido();"},{"name":"grain-flicker","pack":"genart","entry":"motionary/effects/grain-flicker","register":"registerGrainFlicker();"},{"name":"film-burn","pack":"video","entry":"motionary/effects/film-burn","register":"registerFilmBurn();"},{"name":"jump-cut","pack":"video","entry":"motionary/effects/jump-cut","register":"registerJumpCut();"},{"name":"safe-fade","pack":"safe","entry":"motionary/effects/safe-fade","register":"registerSafeFade();"},{"name":"focus-glow","pack":"safe","entry":"motionary/effects/focus-glow","register":"registerFocusGlow();"},{"name":"color-pulse","pack":"safe","entry":"motionary/effects/color-pulse","register":"registerColorPulse();"},{"name":"underline-sweep","pack":"safe","entry":"motionary/effects/underline-sweep","register":"registerUnderlineSweep();"},{"name":"idle-reveal","pack":"perf3","entry":"motionary/effects/idle-reveal","register":"registerIdleReveal();"},{"name":"gpu-lift","pack":"perf3","entry":"motionary/effects/gpu-lift","register":"registerGpuLift();"}]}