No description
http://dreamknob.dreamodus.software
Dreamodus
5b97091902
Readout legibility (the #1 ask): - bold own-cell decimal point + colon in seven/fourteen-seg (not hairlines) - weight prop thickens strokes; gap controls inter-cell kerning Display colors: - SegmentDisplay defaults to theme.ledGreen, AlphaDisplay to theme.ledAmber - valueColor fn + value-space zones on SegmentDisplay (self-coloring readouts) - charset: colon in both, $ and % in 14-seg; disabled + data-disabled Knob captions: sublabel (second line) + labelSize (independent of dial size). New components: - ToggleSwitch (rocker/slider boolean, role=switch) - Gauge (read-only radial arc meter, round sibling of Meter) - TransportButton (play/stop/record/pause/panic, record blinks) - LampRow (console-print lamp bank), LabeledField, Rack (panel chrome) Responsiveness: fill on Meter + Fader (stretch to container). Niceties: PushButton leadingIcon; theme ledGreen/ledAmber/panel tokens. 54 -> 63 exports. 38 unit tests. Browser-verified. |
||
|---|---|---|
| apps/docs | ||
| packages/dreamknob | ||
| .gitignore | ||
| LICENSE | ||
| 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,MeterBridge,Gauge,XYPad,PushButton,IndicatorLamp,LampRow,ToggleSwitch,SegmentSwitch,TransportButton,ScrubField,SegmentDisplay,AlphaDisplay, plusLabeledField/Racklayout — 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.
Using it in another app
The easiest way is the published release on our Forgejo:
pnpm add https://git.dreamodus.software/Dreamodus/DreamKnob/releases/download/v1.1.1/dreamknob-1.1.1.tgz
Or build locally — the package builds to packages/dreamknob/dist (ESM + CJS + types):
# 1. Tarball (most robust — behaves exactly like an npm install)
cd packages/dreamknob && pnpm build && pnpm pack
# then in your app:
pnpm add /path/to/dreamknob-1.0.0.tgz
# 2. File dependency (picks up rebuilds on reinstall)
pnpm add file:../dreamknob/packages/dreamknob
# 3. Link for active development against your app
cd packages/dreamknob && pnpm link --global
cd your-app && pnpm link --global dreamknob
Peer deps: react >= 18, react-dom >= 18. No CSS import needed.
License
MIT © Dreamodus Software Inc. — see LICENSE.