Cloth Fader

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, one hex to match a brand, or an aurora of a few colours drifting behind the cloth.

Copy the cloth-fader folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="cloth-fader/cloth-fader.css">
<div id="cloth-fader" style="width: min(100%, 720px)"></div>

<script type="module">
  import ClothFader from './cloth-fader/cloth-fader.mjs';

  const clothFader = new ClothFader(document.getElementById('cloth-fader'), {
    layout: 'strip',
    channels: [{"id":"media","label":"Media","icon":"volume","value":62,"tone":"filament","muted":false},{"id":"calls","label":"Calls","icon":"phone","value":40,"tone":"green","muted":false},{"id":"alerts","label":"Alerts","icon":"bell","value":75,"tone":"amber","muted":false},{"id":"system","label":"System","icon":"sliders","value":30,"tone":"filament","muted":false}],
    weave: 'twill',
  });

  // clothFader.update({ … });   change any option in place
  // clothFader.destroy();        and take it away again
</script>

new ClothFader(element, options)

Builds it inside the element with these options.

channels

The channels as they stand now: id, label, value (0–100) and whether they are muted.

value(id)

A channel's level, or undefined.

paused

True while the Pause key holds the aurora's drift.

set(id, value)

Move a channel from code.

mute(id, on)

Mute or unmute from code (silent); with no argument, toggle.

update(opts = {})

Change options in place.

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: mute, input, change.

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; one hue, only ever behind the cloth.
10. AuroraA channel's light can be an aurora: a slow mesh of colours drifting behind the cloth like a flexible OLED panel, in borealis, ember, lagoon, prism, mono or two to five colours of your own. A seed fixes it. It holds still off screen, in a hidden tab and when muted, and is one still frame under reduced motion.
11. AluminiumPale grey cloth on a bead-blasted plate.
12. GraphiteDark cloth on a soft-touch plate, with a paler lamp core so the light still reads.
13. SoundOptional: a small mechanical tick at each detent. Off by default, only after the page has been touched.
14. Reduced motionNo lag and no transitions: the light is exactly where the finger is. No sound.

Made of: 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.

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.