Hash
A character-art hashing animation that transforms an input string into a changing digest.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphHash } from '@fractaldesign/machines-ui';Preview
any string → a glyph fingerprint
<GraphHash title="FINGERPRINT" input="machines-ui" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption on the frame's top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| input | string | 'markgraphy' | Any string — its digest is the seed. Default 'markgraphy'. |
| cols | number | 16 | Grid width in cells. Default 16. |
| rows | number | 6 | Grid height in rows. Default 6. |
| speedMs | number | 60 | Milliseconds per tick of the scan-line sweep. Default 60. |
| animated | boolean | true | Animate the scan line. Default true. Reduced motion freezes mid-sweep. |
| label | string | 'any string → a glyph fingerprint' | Short caption under the art. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| Seg | interface |
Theming
CSS custom properties this component reads.
- --graph-accent
- --text-muted
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphHash.svelte