machines-ui
graphs

Countdown

Time left until a date.

Install

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

Preview

[ FREEZE ]

00:00:00

until launch

remaining 00:00:00
<GraphCountdown
  title="FREEZE"
  to="2027-01-01T00:00:00Z"
  done="open"
  caption="until launch"
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
to* Date | number | string —Date, timestamp, or date string to count down to.
done string 'done'Text shown instead of the timer once the target time has passed.
caption string —Optional text displayed beneath the remaining time.
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

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphCountdown.svelte

machines-ui