machines-ui
graphs

Timer

A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphTimer } from '@fractaldesign/machines-ui';

Preview

[ UPTIME ]

00:00:00

api

timer
<GraphTimer title="UPTIME" kind="elapsed" at="2026-08-01T00:00:00Z" caption="api" />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
kind TimerKind
'elapsed''ago''clock'
'elapsed'What to count: time `elapsed` since `at`, time `ago` since `at`, or the local `clock`.
at Date | number | string —Instant to count from, as a Date, epoch milliseconds, or an ISO string.
caption string —Muted line drawn under the value.
palette GraphPalette
'mono''duo''multi'
—How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
TimerKindtypeElapsed time, how long ago, or the local clock.
'elapsed' | 'ago' | 'clock'

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphTimer.svelte

machines-ui