Initial release: dreamknob library + showcase

React + TypeScript knob/fader library with a headless interaction core
(rotary, relative-drag and track modes, wheel, keyboard, a11y), SVG
primitives, nine prebuilt skins, seven-segment display engine, and a
Vite showcase with gallery, live playground and API docs.
This commit is contained in:
Dreamodus 2026-07-12 14:26:52 -07:00
commit 60a02cb1db
46 changed files with 6186 additions and 0 deletions

42
README.md Normal file
View file

@ -0,0 +1,42 @@
# 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
```tsx
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 `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`, `Fader`, `LEDFader`, `SegmentDisplay` — every color themeable per instance.
- **Composable**: `<Knob>` + primitives (`Arc`, `Pointer`, `Ticks`, `Face`, `KnobValue`,
`KnobLabel`) for custom designs, or go fully headless with `useKnob`.
See `packages/dreamknob/README.md` and the docs app for the full API.