Pixel number

TS

import { … } from "@fungi.computer/caps/components/pixel-number";

Readout

TSX

import { PixelNumber } from "@fungi.computer/caps/components/pixel-number";

export default function Readout() {
  return (
    <div className="flex items-center gap-3">
      <PixelNumber text="08:00" size="xl" tone="primary" />
      <PixelNumber value={48} size="xl" />
    </div>
  );
}

Sizes

TSX

import { PixelNumber } from "@fungi.computer/caps/components/pixel-number";

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <PixelNumber value={7} pad={2} size="sm" />
      <PixelNumber value={42} size="md" />
      <PixelNumber value={128} size="lg" />
      <PixelNumber value={2048} size="xl" />
    </div>
  );
}

Floating gains

TSX

import { PixelNumber } from "@fungi.computer/caps/components/pixel-number";

export default function FloatingGains() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <PixelNumber value={3} signed outline size="lg" tone="success" />
      <PixelNumber value={-1} outline size="lg" tone="error" />
      <PixelNumber text="100%" outline size="lg" tone="accent" />
    </div>
  );
}

Props

PixelNumberProps

Prop	Type	Description
value?	number	A number to draw.
text?	string	Readout text instead of a number: digits and : . + - / × % and spaces.
pad?	number	Left-pad the whole part of value with zeros to this many digits.
signed?	boolean	Prefix a positive value with +, for gains and floating numbers.
size?	"sm" | "md" | "lg" | "xl"
tone?	"current" | "primary" | "accent" | "success" | "warning" | "error"
outline?	boolean	Ring every lit pixel with the ink line, like a sprite outline, so the number reads over any world: damage, pickups and floating gains.

• value?number

  A number to draw.

• text?string

  Readout text instead of a number: digits and : . + - / × % and spaces.

• pad?number

  Left-pad the whole part of value with zeros to this many digits.

• signed?boolean

  Prefix a positive value with +, for gains and floating numbers.

• size?"sm" | "md" | "lg" | "xl"
• tone?"current" | "primary" | "accent" | "success" | "warning" | "error"
• outline?boolean

  Ring every lit pixel with the ink line, like a sprite outline, so the number reads over any world: damage, pickups and floating gains.

Full types: API reference.