No description
http://dreamknob.dreamodus.software
- Keyboard focus-visible ring on all controls (WCAG 2.4.7), suppressed for pointer grabs; focusRing prop to customize or disable - aria-orientation on track modes; data-dragging/-disabled/-readonly/ -focus-visible state attributes; disabled dims, readOnly drops the grab cursor - Escape cancels a drag and restores the pre-gesture value - Controlled mode no longer desyncs when the parent rejects onChange - Second concurrent pointer can no longer hijack a drag session; drags cancel when disabled/readOnly flips mid-gesture - Wheel: onChangeStart symmetry, settle flush on unsubscribe, dominant- axis direction (fixes macOS Shift+scroll reversal), ignored mid-drag - Shift+wheel and fine multipliers now work on stepped/values knobs - Fader/LEDFader track mapping inset-aligned with handle travel (no value jump when grabbing the cap); LEDFader zones sorted - roundTo no longer returns NaN for exponential-notation values; logTaper falls back to linear for invalid ranges; decimalsFromStep shaves float noise; findClosest([]) returns the input - Double-click reset brackets with onChangeStart/End - MetalKnob honors showValue/unit/format; VintageKnob omits them from its type; TickLabels extracted as a public primitive - SegmentDisplay: letters/hex charset, dash overflow instead of 888 |
||
|---|---|---|
| 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), or relative vertical /
horizontal drag (DAW plugin style), or absolute track dragging for faders. Scroll-wheel
nudge, full keyboard support, Shift 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,Fader,LEDFader,SegmentDisplay— every color themeable per instance. - Composable:
<Knob>+ primitives (Arc,Pointer,Ticks,Face,KnobValue,KnobLabel) for custom designs, or go fully headless withuseKnob.
See packages/dreamknob/README.md and the docs app for the full API.