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

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { AmplifierDiagram } from '@fractaldesign/machines-ui';

Preview

+- - - - - - - - - - -[ AI IS AN AMPLIFIER ] - - - - - - - - - - +
|                                                                |
|        ▂▅▇▅▂     - - - - ▶  AI  - - - - ▶     ▃▇█████▇▃        |
|      your taste                               amplified        |
|                                                                |
+- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

Signal power: +21.0 dB

<AmplifierDiagram gain={3.5} />

Props

PropTypeDefaultDescription
gain number 3.5Starting gain multiplier. Default 3.5.
interactive boolean trueShow the gain slider and dB readout. Default true.
animated boolean trueAnimate the waves. Default true. Reduced motion freezes them.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-primary
  • --text-secondary

src/lib/components/diagram/AmplifierDiagram.svelte

machines-ui