Svelte 5 component · machines-ui · Graphs
GraphCountdown
Time left until a date.
Install
GraphCountdown is a Svelte 5 ASCII countdown chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphCountdown } from '@fractaldesign/machines-ui';Usage
<GraphCountdown
title="FREEZE"
to="2027-01-01T00:00:00Z"
done="open"
caption="until launch"
/>Props
| Name | Type | Default |
|---|---|---|
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 Text shown instead of the timer once the target time has passed. | 'done' |
caption | string Optional text displayed beneath the remaining time. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphDiff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.GraphFlow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes…GraphFunnel A proportional funnel showing labeled stages, values, and their relative widths.GraphGantt A character-based timeline that positions task bars across a shared track and can show progress.GraphHeatmap A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels…GraphInvoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.