Skip to the object
TACTILE UI

Cloth Fader

Tall volume faders that are capsules of stretched cloth, lit from behind. The level is light rising from the bottom with a soft edge that blooms into the weave; the number and the icon glow through the fabric too. One fader, or a strip of up to six.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
One property light band, Weave masked backlight, Plus lighter bloom and core, Soft edge tail, Sleeping spring, Jump and drag slider, Double press mute, Detent tick, Container query scaling
Stack
Vanilla ES modules, Dom, CSS
Needs
Nothing — no dependencies
States
13 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restThe light sits at its level behind the cloth; nothing runs.
  2. Pressed or draggedThe level jumps to the finger and the light follows a moment late on a short spring, then settles; the light comes up a touch under the hand.
  3. WheelThe wheel over a fader moves it, a notch is about 6%; at the end of its travel the page scrolls instead.
  4. KeyboardArrows move one step, PageUp and PageDown ten, Home and End go to the ends, M or Space mutes. Each move is announced.
  5. MutedA double press, or M or Space: the light and the readout go out and a dark slashed icon shows. The level is kept and comes back on unmute; moving the fader wakes it.
  6. DetentsWith steps set, the level snaps to them, with a tick down each edge; each crossing can pulse the device (haptics) and tick (sound).
  7. Single or stripOne tall fader, or two to six side by side; the strip scales down to a phone and wraps below that.
  8. Twill or speaker clothA fine diagonal twill like denim, or speaker cloth with its pinholes; the weave is seen over the light in both.
  9. LampsFilament, green, amber or red per fader, or one hex; always one hue, only ever behind the cloth.
  10. AluminiumPale grey cloth on a bead-blasted plate.
  11. GraphiteDark cloth on a soft-touch plate, with a paler lamp core so the light still reads.
  12. SoundOptional: a small mechanical tick at each detent. Off by default, only after the page has been touched.
  13. Reduced motionNo lag and no transitions: the light is exactly where the finger is. No sound.

What it is for

A slider for the places a level is a feeling more than a figure: a phone-style volume panel, a meeting app's mixer, a brightness or dimmer rail, a smart-home scene. Drag it and the light follows with a little weight; click the track to jump; use the wheel or the keyboard. A double press mutes it: the light goes out and a dark slashed icon shows. Each fader is a real slider for a reader, named with its level (Media, 62 percent). The only colour is the lamp: warm white, green, amber, red, or one hex to match a brand.

Original. The light is one custom property, --v, moving one transform on a band as tall as the cloth; the weave masks sit on a fixed layer around the band so the texture never slides, and above its edge the band has a tail of the same gradient so the edge is a fall-off into the fibres, not a line. The spring runs only while the light is moving. The icons are drawn in the kit's hand inside the object, so it ships on its own.