⬡ Kudbee Controls

The Kudbee Controls kit

One shared, zero-build layer — assets/kbd-controls.css + assets/kbd-controls.js — that powers every interactive control on the site. Gradient sliders, drag-to-turn rotary knobs, and −/+ steppers, all themeable from each page's palette, keyboard-accessible, and reduced-motion safe. Every control below is live — drag, scroll, tab into them.

Range

.kbd-slider

A native <input type="range"> with a gradient fill, value bubble, and focus throb.

Master volume 72%
Warmth +2.4
Growth rate 3.6×
Rotary

.kbd-knob

Drag vertically, scroll, or use arrow keys / Home / End. The arc fills as you turn.

Cyan → Violet
Green theme
Amber · 76px
Number

.kbd-stepper

A number input with −/+ buttons. Type a value, click, or arrow up/down. Min/max disable the ends.

Quantity
value: 4
Opacity
value: 80%
Gain
value: 0.0 dB
Bound together

One value, three controls

A slider, a knob, and a stepper sharing data-kbd-name="bpm". Move any one and the others follow — no page JS required, the shared layer handles the round-trip.

Tempo (slider) 120 BPM
Tempo (stepper)

Try keyboard too: tab to the knob and press Home / End / arrows.

Tempo (knob)

⬡ Built for accessibility & performance

  • Every control is keyboard-operable: arrows, Home/End, PageUp/Down, type-to-set.
  • Proper ARIA: knobs are role="slider" with live aria-valuetext.
  • :focus-visible rings; no focus ring on mouse clicks.
  • Honors prefers-reduced-motion — no throb, sheen, or tweens.
  • Themeable from each page's palette via --grad / --cyan / --accent.
  • Zero-build, no framework, progressive-enhancement — markup works without JS.

Shared layer: /assets/kbd-controls.css + /assets/kbd-controls.js · Kudbee home