# 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.

Object · With a Pass · https://tactileui.dev/objects/cloth-fader

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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. 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.

## Options

| Option | Type | Description |
| - | - | - |
| layout | enum | One tall fader, or a strip of two to six like a mixer. The strip scales down to a phone and wraps below that. |
| channels | enum | A phone’s four, a pair, or a six-channel mixer. |
| weave | enum | A fine diagonal twill like denim, speaker cloth with its pinholes, or a mesh so fine it is a checker of single pixels. |
| halo | boolean | The lit cloth throws a soft glow onto what is around it, stronger the higher the level. Best on graphite. |
| finish | enum | Auto follows the page: the plate is drawn from the page’s finish (a printed plate on Paper, a black one on Phosphor); the cloth is pale on a light finish and dark on a dark one, with a paler lamp so it still reads. Without the kit’s tokens, aluminium on a light page and graphite on a dark one. |
| lamp | text | One hex for every fader, so a product can match its brand. The glow stays a single hue. Empty keeps each channel’s own lamp: filament, green, amber or red. |
| aurora | enum | The light behind the cloth as a slow mesh of colours drifting like a flexible OLED panel: borealis (greens, teals, a touch of violet), ember (amber to red to magenta), lagoon (cyan to blue to green), prism (the full spectrum) or mono (shades of the lamp colour). In your own code it is a channel’s tone, 'aurora'. |
| auroraSeed | number | The same seed is always the same aurora: where each colour sits, how large, how it drifts. Each channel after the first takes its own from it. |
| auroraColors | text | Two to five hex colours of your own, in place of the pattern. One colour is its shades. |
| steps | number |  |
| names | boolean | The engraved name under each fader. |
| haptics | boolean | A tiny pulse on each detent where the device can vibrate (navigator.vibrate). Off by default. |
| sound | boolean | A small mechanical tick at each detent. Synthesised, off by default, and only once you have touched the page; never under reduced motion. Needs detents. |
| label | text | What a screen reader calls the group of faders. |

## Methods

- channels
- value
- paused
- set
- mute
- update
- destroy

## States

1. **At rest**: The light sits at its level behind the cloth; nothing runs.
2. **Pressed or dragged**: The 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. **Wheel**: 
4. **Keyboard**: Arrows move one step, PageUp and PageDown ten, Home and End go to the ends, M or Space mutes. Each move is announced.
5. **Muted**: A 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. **Detents**: With 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 strip**: One tall fader, or two to six side by side; the strip scales down to a phone and wraps below that.
8. **Twill or speaker cloth**: A fine diagonal twill like denim, or speaker cloth with its pinholes; the weave is seen over the light in both.
9. **Lamps**: Filament, green, amber or red per fader, or one hex; one hue, only ever behind the cloth.
10. **Aurora**: A 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. **Aluminium**: Pale grey cloth on a bead-blasted plate.
12. **Graphite**: Dark cloth on a soft-touch plate, with a paler lamp core so the light still reads.
13. **Sound**: Optional: a small mechanical tick at each detent. Off by default, only after the page has been touched.
14. **Reduced motion**: No lag and no transitions: the light is exactly where the finger is. No sound.

## How it works

Original. 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.