Zyqor Studio UI Gallery Concept work

Vol. 0116 componentsPlain HTML, CSS, JS

Small parts, carefully made.

The bits of an interface people touch a hundred times a day. Each one here is live: press it, drag it, tab to it. Under each, one line on why it moves the way it does.

Try them

Built to be used, not just watched.

Keyboard first

Every component works without a mouse. Tab moves between them, arrow keys move inside radio groups, sliders and the reorder list, and Escape closes what opened.

Visible focus

A two-pixel copper ring with an offset, so focus never hides behind a shadow or a fill. It shows for keyboard users only.

Honest semantics

Switches are switches, radios are radios, the comparison handle is a slider with a spoken value. Changes are announced in live regions.

Motion you can turn off

With reduced motion set on your device, springs settle instantly, bursts and wipes are skipped, and every state is still shown.

CtrlK
Command palette
Space
Lift and drop in the reorder list
←→
Comparison, segments, range
Esc
Close menu or palette