---
title: frameClock
description: Creates a monotonic time source with pause/resume support for ad-hoc render loops. Use it when you need consistent elapsed seconds outside the built-in `frame()` loop.
---

# frameClock



## Import

```ts
import { frameClock } from "@vgpu/render/utils";
```

## Signature

```ts
export function frameClock(): FrameClock;
```

## Parameters

| Param | Type | Required | Default | Notes                                                                             |
| ----- | ---- | -------- | ------- | --------------------------------------------------------------------------------- |
| —     | —    | —        | —       | `frameClock` does not take arguments; it captures `performance.now()` internally. |

**Returns:** `FrameClock` — exposes `now()`, `delta()`, `reset()`, `pause()`, `resume()`, and an `isPaused` getter. All time values are expressed in seconds.

## Examples

```ts
import { frameClock } from "@vgpu/render/utils";

const clock = frameClock();

function updateScene(elapsed: number, dt: number): void {
  void elapsed;
  void dt;
}

function tick() {
  if (!clock.isPaused) {
    const elapsed = clock.now();
    const dt = clock.delta();
    updateScene(elapsed, dt);
  }
  requestAnimationFrame(tick);
}

tick();
```

## Notes

* `delta()` returns `0` while paused, so you can leave animation code untouched and simply toggle `pause()` / `resume()`.
* `reset()` zeroes both elapsed time and accumulated pause, making it ideal for restarting demos without allocating a new clock.
* Calls to `pause()` are idempotent; repeated calls do nothing until `resume()` runs.
* **See also:** `canvasMouseTracker`, `canvasResolution`


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)