Dreamodus
54189ad07a
Docs/playground accuracy (from a full docs-vs-source audit): - Playground: drag-feel select covers pickup/relative rotary modes, is disabled for faders, and generated code no longer emits props the target component does not accept - API/README claims corrected: Shift-fine wheel scope, wheelStep and decimals defaults, trackInset row, data-part and ref-forwarding scope, VintageKnob readout exception, Meter peakHold tag, stale component lists, aria-valuetext wording, also-exported list API consistency fixes surfaced by the audit and the tutorial: - Keyboard gestures now fire onChangeStart (bracket parity with drag/ wheel - fixes gesture-scoped undo patterns) - name (hidden form input) added to Fader, LEDFader, ImageKnob - PushButton gets a themed keyboard-only focus ring + data-focus-visible New docs content: - Getting Started: 7-step guide with live examples and a gotchas list - Advanced guide: 8-step channel-strip tutorial ending in a live, themed, gesture-undoable strip with meter (plus headless demo) - Synth section: playable Web Audio synth - osc/filter/env/LFO/master all dreamknob controls, momentary-pad keyboard, analyser-driven Meter
44 lines
2 KiB
Markdown
44 lines
2 KiB
Markdown
# 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) 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.
|