xq-fps-meter
Performance debugging and FPS grading web component. Displays real-time rendering statistics as a circular gauge overlay.
Interactive Sandbox
Customize the meter's attributes dynamically. (Note: These sample meters are styled with relative positioning to display inline rather than fixed viewport corners).
Variants & Sizes
Demonstrating size options ranging from compact (size ≤ 56px hides labels) to large sizes, alongside custom color override themes.
Badge inline (default)
Quiet chrome for version-badge rows (placement="inline").
Compact Gauge (54px)
Labels are hidden automatically under 56px.
Default Gauge (72px)
Standard sizing suitable for most staging environments.
Large Gauge (120px)
High visibility sizing for detailed performance tuning.
Custom Theme Palette
Theming via CSS variables to override grading colors.
Design Tokens & Shadow Parts
The component exposes design tokens for custom styling and CSS ::part() bindings to access individual elements in the Shadow DOM.
CSS Variables (Tokens)
| Variable | Default | Description |
|---|---|---|
--xq-fps-size | --v-badge-pill-height (30px) | Diameter of the gauge |
--xq-fps-surface | rgba white | Opaque light gauge button background |
--xq-fps-readout | #1b1714 | Readout number color (not page theme text) |
--xq-fps-readout-muted | #716a62 | Readout label color |
--xq-fps-track | color-mix | Color of background track |
--xq-fps-ring | (grading color) | Active gauge line color |
--xq-fps-good | #22c55e | Color for healthy FPS range |
--xq-fps-warn | #f59e0b | Color for warnings/drops |
--xq-fps-bad | #ef4444 | Color for critical lag |
Shadow Parts (::part)
| Part Name | Element Type | Description |
|---|---|---|
button | <button> | Interactive outer container |
gauge | <div> | Sizing wrapper for SVG & texts |
ring | <circle> | Active SVG gauge circle element |
readout | <div> | Text display alignment grid |
value | <p> | FPS readout number indicator |
label | <p> | Readout 'fps' label text |