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.
What it is for
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.
npx shadcn add https://tactileui.dev/r/cloth-cubes.json Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, CSS, CSS 3D, SVG
- Needs
- Nothing, no dependencies
- States
- 11 documented
- Version
- 0.1.0
- Licence
- Free with an account: sign in with Google or GitHub
States
- At restEvery device lit at its resting level: a warm filament behind pale grey cloth (aluminium) or charcoal cloth (graphite); nothing runs.
- Hover or focusThe tile's lamp rises from 84% (90% on graphite) to full over 240 ms; the link or key inside it takes a 2px focus ring.
- LiveOne device (the second by default) glows green or amber and breathes (down to 42% and back over 2.6 s, then a rest) with a lamp and “Live” printed under it.
- PausedThe Pause key latches below the plate (aria-pressed, now “Resume”) and the breath stops where it was.
- Off screenAn IntersectionObserver pauses the breath; nothing else ever runs.
- FigureThe third device lights its number (and ms, s or %) on a 5 × 7 dot-matrix behind the cloth; the spec line under it repeats the figure in words.
- Three devicesThree in a row; on a tablet the third spans both columns with its device beside its words.
- FinishAuto 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.
- TabletHead stacked; two devices per row.
- PhoneOne column; each feature a row with its device beside its words.
- Reduced motionNo breath and no transitions; the live lamp stays lit, “Live” stays printed and the Pause key is hidden.
Notes
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.
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. Face: Instrument Sans (SIL OFL 1.1), the kit's own.
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
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.