Svelte 5 component · machines-ui · Diagram
AmplifierDiagram
An ASCII amplifier: a small calm wave goes in, a gain slider scales it, and a large wave comes out — a metaphor for what AI does to your effort, with a live dB readout.
Install
AmplifierDiagram is a Svelte 5 ASCII amplifier diagram 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 { AmplifierDiagram } from '@fractaldesign/machines-ui';Usage
<AmplifierDiagram gain={3.5} />Props
| Name | Type | Default |
|---|---|---|
gain | number Starting gain multiplier. Default 3.5. | 3.5 |
interactive | boolean Show the gain slider and dB readout. Default true. | true |
animated | boolean Animate the waves. Default true. Reduced motion freezes them. | true |
class | string | '' |
Related components
AsciiDiagram Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of…DiagramEditor An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.MetricsTableDiagram An ASCII ledger of cost: one row per tool with its call count and time, and a totaled summary row at the…NestedRadiiDiagram An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values…PromptLoopDiagram An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and…