# @vectorvesper/motion
**Frame-time discipline for WebGL, canvas, and scroll-driven pages.**
*For the failures that never throw.*
[](https://www.npmjs.com/package/@vectorvesper/motion)
[](./LICENSE)
---
```bash
npm install @vectorvesper/motion
```
Rendering failures rarely throw. A scene mounts while the reader is still
scrolling and the page hitches. A context is lost and the canvas stays black.
Quality flips between tiers twice a second. Frames take 45ms and nothing tells
you whether the cost is yours, React's, or the compositor's.
None of that produces an error, a failed test, or a red type. It produces a page
that is slightly worse in a way you notice on someone else's machine.
This runtime is a set of primitives for that class of problem: deciding when
work runs, at what quality, whether it should run at all, and being able to see
where the frame actually went.
```tsx
import { useSceneGate } from "@vectorvesper/motion/react";
import { useRenderQuality } from "@vectorvesper/motion/r3f";
export function Scene() {
const { ref, state, mounted, generation } = useSceneGate({ cost: "heavy" });
const quality = useRenderQuality(state, {
full: { dpr: 2 },
reduced: { dpr: 1 },
});
// `mounted` waits for the page to afford it. `generation` bumps when a context
// is lost, and keying on it is what replaces the canvas, since a lost context
// can be recreated but never revived.
return {mounted && }
;
}
```
## Do you need this?
One animated element does not. It runs fine on its own loop, and a single canvas
can handle its own context loss in about fifteen lines:
```tsx
const [gen, setGen] = useState(0);