Ink Murmur
Web (React)
A mono status line that breathes while work is in progress and settles into a timed summary.
Set in small uppercase mono with a pulsing dot, it sits under a heading like a typesetter's margin note. Expanding it reveals the steps taken so far.
- Reading the brief
- Setting the measure
- Pulling a proof
Installation
CLI
npx @modus-ui/cli add ink-murmurManual
- Copy the code from the component tab.
- Create a file at
components/ui/ink-murmur.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Composing…" | - |
| doneLabel | string | "" | - |
| renderLabel | any | - | - |
| glyph | string | "dot" | - |
| steps | any | EMPTY_STEPS | - |
| collapsible | boolean | true | - |
| collapseOnSettle | boolean | true | - |
| color | string | "currentColor" | - |
| glyphColor | string | "" | - |
| fontSize | number | 13 | - |
| breathPeriod | number | 1.6 | - |
| breathDepth | number | 0.45 | - |
| shimmer | boolean | true | - |
| shimmerDuration | number | 1.8 | - |
| settleDuration | number | 350 | - |
| settleBlur | number | 2 | - |
| working | boolean | true | - |
| settleAfter | number | 0 | - |
| elapsed | any | - | - |
| showTimer | boolean | true | - |
| onSettle | any | - | - |
| style | any | - | - |
Comments