<FpsWidget>

<FpsWidget> is a lightweight overlay component for monitoring frame rate in the browser.

What It Does

• Samples requestAnimationFrame
• Calculates average FPS over a sliding window
• Displays a color-coded badge in the top-right corner

Usage

<template>
    <Preview :app="runtime" />
    <FpsWidget />
</template>

<script setup>
import { FpsWidget, Preview, useRuntimeApp } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });
runtime.schema(pageJson);
</script>

Notes

• The component is fixed to the viewport and does not require props.
• It starts tracking on mount and stops automatically on unmount.
• This widget is useful for scene-heavy pages, canvas-like layouts, or render-performance tuning.