---
title: Score
description: "Displays a changing number using pooled digit icons."
---

```tsx
import { Score } from 'filedom';

<Score value={points} places={4} at={{ x: 480, y: 80 }} />
```

Render Score inside a [Stage](/docs/reference/components/stage). Each place mounts ten
pooled sprites, one per digit face, and moves the one it needs into position, so
no icon is ever swapped in place. Leading zeros are hidden and the visible
digits are centered on `at`. Values are floored and clamped to zero, and digits
beyond `places` are dropped from the high end.

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `value` | `number` | - | Number to show. |
| `places` | `number` | - | Number of digit positions. |
| `at` | `StagePoint \| null` | - | Readout center; null hides it. |
| `gap?` | `number` | - | Digit-center spacing in px. Default 0.62 × provider icon size. Required when the provider has no metrics; otherwise Score throws. |
| `digitIcon?` | `((digit: number) => IconDescriptor)` | - | Face for digits 0 to 9. Defaults to scoreDigitIcon. |