Svelte 5 component · machines-ui · Animated
GraphHash
A character-art hashing animation that transforms an input string into a changing digest.
Install
GraphHash is a Svelte 5 animated ASCII hash 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 { GraphHash } from '@fractaldesign/machines-ui';Usage
<GraphHash title="FINGERPRINT" input="machines-ui" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption on the frame's top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
input | string Any string — its digest is the seed. Default 'markgraphy'. | 'markgraphy' |
cols | number Grid width in cells. Default 16. | 16 |
rows | number Grid height in rows. Default 6. | 6 |
speedMs | number Milliseconds per tick of the scan-line sweep. Default 60. | 60 |
animated | boolean Animate the scan line. Default true. Reduced motion freezes mid-sweep. | true |
label | string Short caption under the art. | 'any string → a glyph fingerprint' |
class | string | '' |
Related components
GraphJapa A mala (prayer-bead ring) drawn in ASCII, with a marker travelling bead by bead around the circle.GraphLife Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail.GraphMandala A lotus mandala drawn in terminal glyphs, blooming outward ring by ring and then slowly rotating.GraphMandel ASCII Mandelbrot with a slow cinematic zoom into seahorse valley.GraphPulse A live health strip: a window of blips — ok, degraded, or down — appended at a fixed interval, newest on the…GraphRain A looping character-art rain animation with adjustable trails and dimensions.