Find a file
Dreamodus c404b3f82d Synth v2: modular pro layout, HOLD latching pads, fuller voice engine
- Modular hardware-style panel: System / Oscillator / Filter / Envelope
  / LFO / Drive / Echo / Output / Keyboard sections with labeled frames
- HOLD switch: pads become latching toggles (switching pads retunes the
  held note, unlatching or disabling HOLD releases it)
- Fuller Web Audio voice: waveshaper drive, full ADSR, feedback delay
  (time/feedback/mix), LFO target switch (cutoff or pitch via detune),
  octave/detune/glide with live retuning of held notes
- More of the library in service: MetalKnob (drive, with value bubble),
  VintageKnob (echo time), horizontal LEDFader (echo mix), XYPad
  two-way-linked with the cutoff/res knobs (exponential x-axis mapping),
  SegmentDisplay live frequency readout, 4 preset buttons that glide
  every knob via animateChanges
- Disambiguated synth aria-labels from gallery demos; octave readout
  fixed via decimals/format
- SteppedKnob now honors the format prop for numeric readouts
2026-07-12 19:44:42 -07:00
apps/docs Synth v2: modular pro layout, HOLD latching pads, fuller voice engine 2026-07-12 19:44:42 -07:00
packages/dreamknob Synth v2: modular pro layout, HOLD latching pads, fuller voice engine 2026-07-12 19:44:42 -07:00
.gitignore Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
package.json Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
pnpm-lock.yaml Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
pnpm-workspace.yaml Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
README.md Docs accuracy pass, guides, and a playable Web Audio synth demo 2026-07-12 18:27:06 -07:00

dreamknob

A feature-full, studio-grade React + TypeScript knob & fader library with a headless interaction core — plus a showcase/documentation site.

pnpm install       # install everything
pnpm dev           # run the showcase at http://localhost:5173
pnpm test          # library unit tests
pnpm build         # build library + docs

Workspace layout

Path What it is
packages/dreamknob The library. Zero runtime dependencies, ESM + CJS + .d.ts.
apps/docs Vite showcase: gallery, live playground with code generation, API docs.

The library in 10 seconds

import { MetalKnob, LEDKnob, Fader, logTaper } from 'dreamknob'

<MetalKnob size={90} min={0} max={100} step={0.5} defaultValue={64} label="Gain" />
<LEDKnob min={20} max={20000} taper={logTaper} defaultValue={632} label="Freq" />
<Fader min={-60} max={12} step={0.5} unit=" dB" defaultValue={-6} label="Out" />
  • Feel: grab-and-rotate rotary tracking (rc-knob style) with pickup/relative modes, or relative vertical / horizontal drag (DAW plugin style), or absolute track dragging for faders. Scroll-wheel nudge, full keyboard support, Shift+scroll for fine control, double-click reset, touch via pointer capture, proper role="slider" accessibility.
  • Numbers: any range (negative, fractional, huge), decimal step with float-drift-safe rounding, discrete values lists, evenly spaced detents (steps), linear / log / power / custom tapers.
  • Styles: FlatKnob, MetalKnob, RubberKnob, VintageKnob, LEDKnob, NeonKnob, SteppedKnob, ImageKnob (film-strips), Fader, LEDFader, Meter, XYPad, PushButton, SegmentDisplay, AlphaDisplay — every color themeable per instance.
  • Composable: <Knob> + primitives (Arc, Pointer, Ticks, TickLabels, Face, KnobValue, KnobLabel, GlowFilter) for custom designs, or go fully headless with useKnob.

See packages/dreamknob/README.md and the docs app for the full API.