Loading page…
Mockup lab for the visualization primitives — pick a component, drive its props from the panel, and inspect the live stage. Canned catalog demos sit below for documentation.
Component picker + live stage + prop panel. Presets hydrate the knobs; Simulated vs Manual drives TransactionProgress either from a compressed lifecycle clock or from explicit phase props.
--ch-primary--ch-surface--ch-bg--ch-fg--ch-fg-muted--ch-border--ch-dangerReference specimen with play / scrub / fail controls.
import { TransactionProgress } from "@coldharbor/webui";
<TransactionProgress
variant="onchain"
phase="confirming"
confirmations={2}
caption="0.418 BTC → sp1q…"
/>Bits + classic side by side under a shared mode strip.
Bits · blink / terminal / magnet
Classic · particle field
<CycloneStorm variant="bits" mode="churn" height={300} />
<CycloneStorm variant="classic" mode="churn" height={300} />Mid-broadcast fixture — two sent, one failed, one pending.
Split payment
3,000,000 sat to sp1q7d…h3vk · 2/4 pieces broadcast
Pieces on the wire
Due pieces are signed from the operator float and published. Pending pieces are still waiting.
1 piece failed · 510,000 sat did not broadcast.
<SplitPaymentTimeline
totalSat={3_000_000}
pieces={pieces}
recipient="sp1q…"
/>Sample DAG; second input pending so its connector is dashed.
<HarborTransactionFlow nodes={nodes} edges={edges} height={280} />Square dissolve swaps, ambient field, magnet, loaders.
Bits · blinking density wipe
Inbound
Deposits clearing
Framework · soft fade
Inbound
Deposits clearing
Blinking squares · ambient field
Pixel magnet · move pointer
Loaders
<BitViewSwap transitionKey={berth} variant="bits" effect="blink">
<BitPanel kicker="Inbound" title="Deposits" rows={[…]} />
</BitViewSwap>Character or chunk streaming plus a signal halt line.
Live · chunk stream
ok ›Settled · full string (no motion)
Signal · halted copy (char, looping)
!! ›<StreamText text={line} prompt="ok ›" mode="chunk" cps={36} />