Motion Budget
`<pura-motion-budget>` is an invisible, page-level governor for how much motion the whole library may spend. It renders nothing: its only job is to drive the existing global `--pura-motion` token on `<html>` (which pura components already multiply their durations by) plus a machine-readable `data-pura-motion` mirror. Because custom properties inherit across shadow boundaries, one element calms or stops motion inside every component's shadow root at once, without touching any of them. Three semantic modes: `normal` (full motion, steps aside so the system `prefers-reduced-motion` rule still wins), `calm` (half speed, `--pura-motion: 0.5`, to dial down looping vestibular motion without freezing one-shot transitions), and `off` (a hard stop, `--pura-motion: 0`). Set an explicit `scale` (0..1) to override the mode default, or add `respect-system` so a system reduced-motion preference forces `off`. Drive it with `.setMode('calm')`; listen for `motionchange` `{ mode, motion }`. Each instance registers in `window.__puraMotionBudgets` by `data-pura-id`.
Preview
<!-- Drop one governor near the top of the page -->
<pura-motion-budget mode="normal" respect-system></pura-motion-budget>
<script type="module">
const mb = document.querySelector('pura-motion-budget');
// Calm the whole page while a heavy animation runs
mb.setMode('calm');
mb.addEventListener('motionchange', (e) => console.log(e.detail)); // { mode, motion }
</script>
<!-- Any component duration that multiplies var(--pura-motion) now responds -->Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
mode | "normal" | "calm" | "off" | normal | Motion budget: full motion, half-speed calm, or a hard stop. |
scale | number | (per mode) | Explicit 0..1 override for --pura-motion. Wins over the mode default, except off which always pins 0. |
respect-system | boolean | false | When present, a system prefers-reduced-motion: reduce forces off regardless of mode. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/motion-budget.js"></script>import "./pura/lib/motion-budget.js";