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
This commit is contained in:
parent
0aee48b749
commit
e9e52e43ed
12 changed files with 936 additions and 8 deletions
|
|
@ -71,6 +71,11 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
|
|||
- `wheelStep` / `wheelRequiresFocus` — tune wheel notches, or keep hover-scroll free.
|
||||
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks with
|
||||
`meta.source` (`'drag' | 'wheel' | 'keyboard' | 'reset' | 'api'`).
|
||||
- `wrap` — endless encoder mode: values roll around min↔max (pair with
|
||||
`angleOffset={0} angleRange={360}`).
|
||||
- `animateChanges` — tween the pointer on programmatic changes (preset loads);
|
||||
gestures never animate and `prefers-reduced-motion` is honored.
|
||||
- `valueBubble` — floating readout above the control while dragging.
|
||||
- `name` — hidden form input for plain `<form>` posts; every component forwards a
|
||||
ref to its root element, and SVG parts carry `data-part` attributes for CSS.
|
||||
|
||||
|
|
@ -89,7 +94,10 @@ import {
|
|||
LEDFader, // segmented LED meter-fader with color zones
|
||||
ImageKnob, // film-strip sprite knob (KnobMan-style PNG strips)
|
||||
Meter, // read-only LED level meter with peak hold
|
||||
XYPad, // two-parameter pad (cutoff/resonance, vector mixing)
|
||||
PushButton, // panel button with LED strip (toggle or momentary)
|
||||
SegmentDisplay, // standalone seven-segment numeric display
|
||||
AlphaDisplay, // fourteen-segment alphanumeric display
|
||||
} from 'dreamknob'
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue