Dreamodus/DreamKnob
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions
No description http://dreamknob.dreamodus.software
6 commits 1 branch 6 tags 264 KiB
Find a file
Dreamodus e9e52e43ed Tier 3: bubbles, animation, wrap mode, XYPad, AlphaDisplay, PushButton 
- valueBubble/bubbleFormat: floating readout above knobs while dragging
  (Knob-based skins + ImageKnob)
- animateChanges: rAF ease-out tween of the pointer on programmatic
  value changes; user gestures snap; prefers-reduced-motion disables
- wrap: endless encoder mode — values and relative drags roll around
  min↔max; pairs with angleOffset={0} angleRange={360}
- XYPad: two-parameter pad with absolute drag, arrow keys (Shift
  coarse), Escape cancel, double-click reset, grid/crosshair, focus
  ring, hidden form inputs, change meta
- AlphaDisplay: fourteen-segment alphanumeric LED (A-Z, 0-9, symbols,
  decimal points, chars padding/align, glow/skew)
- PushButton: studio panel button with LED strip — toggle or momentary,
  controlled/uncontrolled, aria-pressed, hidden form input
- Docs: five new gallery cards incl. animated preset demo, API rows,
  README
2026-07-12 17:47:20 -07:00
apps/docs Tier 3: bubbles, animation, wrap mode, XYPad, AlphaDisplay, PushButton 2026-07-12 17:47:20 -07:00
packages/dreamknob Tier 3: bubbles, animation, wrap mode, XYPad, AlphaDisplay, PushButton 2026-07-12 17:47:20 -07:00
.gitignore Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
package.json Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
pnpm-lock.yaml Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
pnpm-workspace.yaml Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
README.md Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00

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