No description
http://dreamknob.dreamodus.software
- 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 |
||
|---|---|---|
| apps/docs | ||
| packages/dreamknob | ||
| .gitignore | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
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
stepwith float-drift-safe rounding, discretevalueslists, 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 withuseKnob.
See packages/dreamknob/README.md and the docs app for the full API.