# Cloth-lit Cubes

A features row of small devices on a desk. Each feature is a cube in speaker cloth with its icon lit through the weave; one shows its figure on lamps, one breathes as the live one.

Block · Free with an account · https://tactileui.dev/blocks/cloth-cubes

> The code and styling for this block 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

Css 3d device, Svg weave tile, Weave masked backlight, Plus lighter glow, Dot matrix figure, Fixed lamp face shading, Container query layout, Finish following, Offscreen paused breath

## Usage notes

The features section of a product that runs something and shows its state: an agent runtime, a devtools or infrastructure service, an energy or IoT platform. Each feature becomes a device you could put on a shelf: its name, two lines, a printed spec and a link under a lit icon, with a real number on the matrix and one device live. The free taste of Tactile UI's blocks, with one cloth (speaker weave): pure CSS and SVG, no dependency, both finishes.

## Options

| Option | Type | Description |
| - | - | - |
| label | text | Printed small above the headline. |
| title | text | Headline |
| lead | text | Lead |
| t1 | text | Feature 1 |
| b1 | text | Feature 1, text |
| t2 | text | Feature 2 |
| b2 | text | Feature 2, text |
| t3 | text | Feature 3 |
| b3 | text | Feature 3, text |
| t4 | text | Feature 4 |
| b4 | text | Feature 4, text |
| stat | text | Digits and one point, lit through the cloth of the third device. |
| unit | enum | Unit on the matrix |
| count | number | Devices |
| live | enum | The one whose lamp breathes and says Live. None: all rest. |
| lamp | enum | Green: serving. Amber: working. Filament: warm white like the rest. |
| pulse | boolean | The live lamp breathes with a rest between breaths, with a Pause key. Never under reduced motion. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |

## Methods

- paused
- update
- destroy

## States

1. **At rest**: Every device lit at its resting level: a warm filament behind pale grey cloth (aluminium) or charcoal cloth (graphite); nothing runs.
2. **Hover or focus**: 
3. **Live**: 
4. **Paused**: The Pause key latches below the plate (aria-pressed, now “Resume”) and the breath stops where it was.
5. **Off screen**: An IntersectionObserver pauses the breath; nothing else ever runs.
6. **Figure**: 
7. **Three devices**: Three in a row; on a tablet the third spans both columns with its device beside its words.
8. **Finish**: Auto follows the nearest data-finish around the section (watched live) and then the system; pale grey heather on bead-blasted aluminium, or charcoal heather on graphite.
9. **Tablet**: Head stacked; two devices per row.
10. **Phone**: One column; each feature a row with its device beside its words.
11. **Reduced motion**: No breath and no transitions; the live lamp stays lit, “Live” stays printed and the Pause key is hidden.

## How it works

Original composition. The product (Lode), its features and numbers are invented. The devices are CSS 3D with SVG textures drawn for this block; no photograph.