Cloth-lit Cubes

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. Free with an account as the taste of Tactile UI's blocks: pure CSS and SVG, no dependency, both finishes.

Copy the cloth-cubes folder from its package next to your page, link the stylesheets and mount 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-cubes/cloth-cubes.css">
<div id="cloth-cubes"></div>

<script type="module">
  import { mount } from './cloth-cubes/cloth-cubes.mjs';

  const clothCubes = mount(document.getElementById('cloth-cubes'), {
    label: 'Lode · agent runtime',
    title: 'A runtime you can read from across the room.',
    lead: 'Lode runs long-lived agents in production and reports on them the way a good appliance does: a light in the right place, a key that stops it, and numbers that are true.',
  });

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

mount(element, options)

Builds the block inside the element and returns its handle.

handle.paused

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restEvery device lit at its resting level: a warm filament behind pale grey cloth (aluminium) or charcoal cloth (graphite); nothing runs.
2. 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.
3. 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.
4. PausedThe Pause key latches below the plate (aria-pressed, now “Resume”) and the breath stops where it was.
5. Off screenAn IntersectionObserver pauses the breath; nothing else ever runs.
6. 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.
7. PuckThe same devices as low square pucks, the icons scaled to the shallower face.
8. Three devicesThree in a row; on a tablet the third spans both columns with its device beside its words.
9. 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.
10. TabletHead stacked; two devices per row.
11. PhoneOne column; each feature a row with its device beside its words.
12. AuroraThe live lamp can be an aurora: a slow mesh of colours drifting through the lamp's own icon, blurred into the fibres and sharp through the weave. A seed fixes it; the Pause key and going off screen hold it.
13. Reduced motionNo breath and no transitions; the live lamp stays lit, “Live” stays printed and the Pause key is hidden.

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

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.