Documentation Index
Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt
Use this file to discover all available pages before exploring further.
StatsPanel is a renderless performance overlay that mounts three stats.js panels — FPS, MS (millisecond overhead), and MB (memory usage) — as fixed-position DOM elements directly on document.body. The component itself renders no visible HTML; its template is a single empty <div />. All visual output comes entirely from the stats.js canvases it injects into the page.
Usage
StatsPanel accepts no props. Drop it anywhere inside your sketch template and it will activate automatically on mount:
Panels
Three panels are created in sequence, each pinned totop: 10px and offset horizontally so they sit side-by-side without overlapping:
| Panel | Metric | left offset |
|---|---|---|
| 0 | FPS — frames per second | 10px |
| 1 | MS — milliseconds per frame | 92.5px |
| 2 | MB — heap memory usage | 175px |
position: fixed, zIndex: 99999, and pointerEvents: none so it floats above the sketch canvas without intercepting mouse or touch input.
Iframe-aware
On mount,StatsPanel calls useIsPreview() to detect whether it is running inside an iframe. If it is, the component returns immediately — no stats.js instances are created, no panels appear, and the dashboard preview card remains uncluttered.
Cleanup
On component unmount,cancelAnimationFrame is called to stop the animation loop, and .dom.remove() is called for every stats.js instance to detach the panel canvases from document.body. The internal statsInstances array is also cleared.
StatsPanel drives its updates with a continuous requestAnimationFrame loop that calls stats.update() on every tick. To avoid errors before a panel canvas has been fully painted, stats.update() is only called when the canvas inside the stats DOM reports non-zero width and height — if the canvas isn’t ready yet, that iteration is silently skipped.