Dreamodus 54189ad07a Docs accuracy pass, guides, and a playable Web Audio synth demo

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

2026-07-12 18:27:06 -07:00

2 KiB

Raw Blame History

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 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.

2 KiB Raw Blame History

dreamknob

Workspace layout

The library in 10 seconds

2 KiB

Raw Blame History